Recommendation for “SyntaxError: Cannot use import statement outside a module” error when apply react-native-svg-web

March 17, 2022

Error Messages

Have you ever imported any package and the warning text appears? If yes. That is a common problem you always face. Don’t waste your time or ignore this issue if you prefer resolving them. We will show you the effective method to fix SyntaxError: Cannot use import statement outside a module” error. Thus, refer our solution below to fix this error.

Today, we will provide you with an error when operating the Yarn test. That is “SyntaxError: Cannot use import statement outside a module” error. Moreover, how do you check the web app that runs react-native-svg-web without problem?. Let’s see the approaches to solve it.

What is the “SyntaxError: Cannot use import statement outside a module” error?

The message is tuned out when set up yarn test:

lerna ERR! yarn run test:unit stderr:
 FAIL   id-check-front  src/tests/App.test.tsx
  ● Test suite failed to run

    Jest encountered an unexpected token

    This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.

    By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".

    Here's what you can do:
     • If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/en/ecmascript-modules for how to enable it.
     • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
     • If you need a custom transformation specify a "transform" option in your config.
     • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

    You'll find more details and examples of these config options in the docs:
    https://jestjs.io/docs/en/configuration.html

    Details:

    /home/dka/workspace/github.com/pass-culture/id-check-front/node_modules/react-native-svg-web/index.js:23
    import * as React from "react";
    ^^^^^^

    SyntaxError: Cannot use import statement outside a module

      1 | import * as React from 'react'
    > 2 | import Svg, { Path } from 'react-native-svg'
        | ^
      3 | import { IconProps, mapIconPropsToSvgProps } from './types'
      4 | 
      5 | function AlertFilled(props: IconProps) {

      at Runtime.createScriptFromCode (../../../node_modules/jest-runtime/build/index.js:1350:14)
      at Object.<anonymous> (../../../packages/id-check/src/components/icons/AlertFilledIcon.tsx:2:1)

While trying to install yarn test, The jest.config.js will appear:

  moduleNameMapper: {
    '^react-native$': 'react-native-web',
    '^react-native-modal$': 'modal-enhanced-react-native-web',
+    '^react-native-svg$': 'react-native-svg-web',
  },
  transformIgnorePatterns: [
    'node_modules/(?!(jest-)?react-native' +
    '|@react-navigation' +
    '|@ptomasroos/react-native-multi-slider' +
    '|react-navigation' +
    '|@react-native-community/masked-view' +
    '|@react-native-community' +
    '|react-navigation' +
    '|@react-navigation/.*' +
    '|@unimodules/.*' +
    '|unimodules' +
    '|sentry-expo' +
    '|native-base' +
    '|@sentry/.*' +
    '|native-base-*' +
    '|@react-native-firebase/analytics' +
    '|@react-native-firebase/app' +
    '|@react-native-firebase/remote-config' +
    '|@sentry/react-native' +
    '|react-native-geolocation-service' +
    '|@react-native/polyfills' +
+    '|react-native-svg' +
+    '|react-native-svg-web)'
  ],

Babel is supposed to convert the file in node_modules/react-native-svg-web, however it is not able. When babel does not work and you face with error when you try to change completely.

Settling the “SyntaxError: Cannot use import statement outside a module” error

Make sure that the transformer receives the .js package after you mapped the file. For instance, jest.config.js would be transformed when you run TypeScript. The words are:

transform: {
    '^.+\.(ts|tsx|js)$': 'ts-jest',
},

Now you can import your package and it is not complicated as you thought? After that, your web is functioning well after inputting our direction.

In conclusion

Finally, above are the basic tips on how to settle “SyntaxError: Cannot use import statement outside a module”. From our instruction you simply activate the function well. Please let us know if you have any concerns for any errors in the comment box. Therefore, follow us in the next article to investigate other issues that you might face. Thank you so much for reading and look forward to seeing you later!

Scroll to Top