React-icons error 'Cannot use import statement outside a module' in stackblitz

Question

I'm trying to add icon in my social header, but I am getting this error:

Cannot use import statement outside a module

and here is code:

import React from 'react';
import { BsLinkedin } from 'react-icons/bs';

const HeaderSocial = () => {
  return (
    <div className="header_socials">
      <a href="https://linkedin.com" target="_blank">
        <BsLinkedin />
      </a>
      <a href="https://github.com" target="_blank"></a>
      <a href="https://facebook.com" target="_blank"></a>
    </div>
  );
};

export default HeaderSocial;

and project source code here.

Answer 1

If you do not have jest.config.js and your jest configs are in package.json, you can fix this problem by adding these lines.

 "transformIgnorePatterns": [
  "node_modules/(?!(@react-native|react-native|react-native-vector-icons)/)"
]

So your package.json will have lines like that ...

  "jest": {
    "preset": "react-native",
    "transformIgnorePatterns": [
      "node_modules/(?!(@react-native|react-native|react-native-vector-icons)/)"
    ]
  }