Nowadays, React Native programming is gradually becoming popular. Thousands of apps have been created that involve React native. Big names like Facebook, AirBnB, Uber and many others have also chosen to program React Native to build their apps. However, for those who are new to it, it will be difficult to run the program. Today, we will bring you a new situation and how to handle it when you encounter “SyntaxError: Cannot use import statement outside a module” and how to run test unit with react-native-svg for the Web.

When does it occur?

“SyntaxError: Cannot use import statement outside a module” occurred while running “yarn test”. Error is displayed as below:

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)

This is the program “jest.config.js” created :

  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)'
  ],

Cause of error

Some possible causes of the error are as follows:
– in script forgot tag type=”module”

– The source file within the src directory, instead of the built file that is located in the dist directory . This implies that you’re running the native source code that is not altered or bundled in a state, resulting in the following error message: Uncaught SyntaxError : Cannot make use of import statements outside of the context of a module. 

Solving “SyntaxError: Cannot use import statement outside a module”

Option 1: Adding type=”module”

If in your program has this code:

<script src="../src/main.js"></script>

replace with

<script type="module" src="../src/main.js"></script>

Option 2:

Your direction is on the right track, however, when you set up the sample project, remember that you have also installed the react-native-svg-transformer library and make sure the .js file is already there. In this situation you can check the following:

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

Note that the above example applies to TypeScript.

Option 3:

Another ways, you can try this code:

import { parse } from 'node-html-parser';

parse = require('node-html-parser');

Conclusion

The above article has provided you with more information about “SyntaxError: Cannot use import statement outside a module” and how to run test unit with react-native-svg for the Web. Hope you get your problem resolved soon. React Native programming will become an integral part and will grow very quickly. Therefore, our advice is to start learning React Native programming right before it’s too late. Thanks for reading!