Cannot use import statement outside a module on 0.64.0

Please provide all the information requested. Issues that do not follow this format are likely to stall.

Description

Please provide a clear and concise description of what the bug is. Include screenshots if needed. Please test using the latest React Native release to make sure your issue has not already been fixed: https://reactnative.dev/docs/upgrading.html

React Native version:

Run react-native info in your terminal and copy the results here.

info Fetching system and libraries information… System: OS: macOS 11.2.3 CPU: (12) x64 Intel® Core™ i7-8850H CPU @ 2.60GHz Memory: 686.00 MB / 16.00 GB Shell: 5.8 - /bin/zsh Binaries: Node: 12.18.3 - /usr/local/bin/node Yarn: 1.22.5 - ~/.yarn/bin/yarn npm: 6.14.8 - /usr/local/bin/npm Watchman: 4.9.0 - /usr/local/bin/watchman Managers: CocoaPods: 1.10.1 - /usr/local/bin/pod SDKs: iOS SDK: Platforms: iOS 14.4, DriverKit 20.2, macOS 11.1, tvOS 14.3, watchOS 7.2 Android SDK: API Levels: 23, 28, 29, 30 Build Tools: 28.0.3, 29.0.2, 30.0.2 System Images: android-22 | Google APIs Intel x86 Atom, android-30 | Google Play Intel x86 Atom Android NDK: Not Found IDEs: Android Studio: 4.1.3 4.1.3 Xcode: 12.4/12D4e - /usr/bin/xcodebuild Languages: Java: 1.8.0_272 - /usr/bin/javac npmPackages: @react-native-community/cli: Not Found react: 17.0.1 => 17.0.1 react-native: 0.64.0 => 0.64.0 react-native-macos: Not Found npmGlobalPackages: react-native: Not Found

Steps To Reproduce

Provide a detailed list of steps that reproduce the issue.

1. run npx react-native init app --template react-native-template-typescript
2. run cd app
3. run yarn add react-native-vector-icons
4. create a file test.tsx and paste following:

import React from 'react';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import {create} from 'react-test-renderer';

describe('Icon', () => {
  it('should render as expected', () => {
    const {toJSON} = create(<Icon name={'exit'} />);

    expect(toJSON()).toMatchSnapshot();
  });
});

1. run jest ./test.tsx

Expected Results

Describe what you expected to happen.

The test should pass without any problems as it used to happen on react-native 0.63.4.

Snack, code example, screenshot, or link to a repository:

Please provide a Snack (https://snack.expo.io/), a link to a repository on GitHub, or provide a minimal code example that reproduces the problem. You may provide a screenshot of the application if you think it is relevant to your bug report. Here are some tips for providing a minimal example: https://stackoverflow.com/help/mcve

What happens is actually the following error:

  FAIL  ./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:

    /Users/maykonmichelpalma/Projects/GitHub/@kovver/kovver/node_modules/react-native-vector-icons/MaterialCommunityIcons.js:6
    import createIconSet from './lib/create-icon-set';
    ^^^^^^

    SyntaxError: Cannot use import statement outside a module

      1 | import React from 'react';
    > 2 | import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
        | ^
      3 | import {create} from 'react-test-renderer';
      4 |
      5 | describe('Icon', () => {

      at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1350:14)
      at Object.<anonymous> (test.tsx:2:1)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        0.736 s
Ran all test suites matching /.\/test.tsx/i.

[ls-andrew-goodale]

I believe this issue was introduced by the change to transformIgnorePatterns from this commit: https://github.com/facebook/react-native/commit/a77f2c40d1044da63426078f356cfc7c1284a79e I worked around it by adding the following:

"transformIgnorePatterns": [
      "node_modules/(?!((jest-)?react-native(-.*)?|@react-native(-community)?)/)"
    ]

So that 3rd party libraries like react-native-webview and react-native-keyboard-aware-scroll-view would get processed by babel.

[TommyLeong]

Glad that it work for your case, but not mine… after appending the code (without the library i’m working with)

"transformIgnorePatterns": [
  "node_modules/(?!(react-native)/)"
]

Im getting another error from react-native itself.

 FAIL  __tests__/App-test.js
  ● Test suite failed to run

    /maskedProjectPath/node_modules/@react-native/polyfills/error-guard.js:14
    type ErrorHandler = (error: mixed, isFatal: boolean) => void;
         ^^^^^^^^^^^^

    SyntaxError: Unexpected identifier

      at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1350:14)
      at Object.<anonymous> (node_modules/react-native/jest/setup.js:439:6)

---

Update

Thanks @josmithua !

It works after appending the following @react-native infront

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