picker icon indicating copy to clipboard operation
picker copied to clipboard

SyntaxError: Unexpected token export when running jest

Open HugoLiconV opened this issue 4 years ago • 8 comments

Bug report

Summary

When I run the test I get this error:

   Details:
    /****/****/****/***/*****/node_modules/@react-native-community/picker/js/index.js:5
    export {default as Picker} from './Picker';
    ^^^^^^
    SyntaxError: Unexpected token export

Environment info

react-native info output:

  React Native Environment Info:
    System:
      OS: Linux 5.3 Ubuntu 18.04.4 LTS (Bionic Beaver)
      CPU: (6) x64 Intel(R) Core(TM) i5-9600K CPU @ 3.70GHz
      Memory: 542.64 MB / 15.55 GB
      Shell: 5.4.2 - /usr/bin/zsh
    Binaries:
      Node: 12.4.0 - ~/.nvm/versions/node/v12.4.0/bin/node
      Yarn: 1.21.1 - /usr/bin/yarn
      npm: 6.13.7 - ~/.nvm/versions/node/v12.4.0/bin/npm
      Watchman: 4.9.0 - /usr/local/bin/watchman
    SDKs:
      Android SDK:
        API Levels: 23, 24, 26, 27, 28, 29
        Build Tools: 26.0.0, 27.0.3, 28.0.3, 29.0.0, 29.0.1, 29.0.2
        System Images: android-22 | Google APIs Intel x86 Atom, android-23 | Google APIs Intel x86 Atom, android-24 | Google APIs Intel x86 Atom, android-24 | Google Play Intel x86 Atom, android-27 | Google APIs Intel x86 Atom, android-28 | Google APIs Intel x86 Atom, android-29 | Google APIs Intel x86 Atom
    npmPackages:
      react: 16.8.3 => 16.8.3 
      react-native: 0.59.10 => 0.59.10 
    npmGlobalPackages:
      react-native-cli: 2.0.1
      react-native-git-upgrade: 0.2.7
      react-native-rename: 2.4.1

Library version: 1.6.1

Steps to reproduce

  1. just run npm test

HugoLiconV avatar Jun 17 '20 18:06 HugoLiconV

I added this to my package.json

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

After adding this, you'll get this error: TypeError: Cannot read property 'default' of undefined. To solve it go to node_modules/@react-native-community/picker/js/PickerIOS.ios.js and add a constructor to the PickerIOS component:

class PickerIOS extends React.Component<Props, State> {
  _picker: ?ElementRef<RNCPickerIOSType> = null;
+  constructor(props) {
+    super(props)
+  }
  state = {
    selectedIndex: 0,
    items: [],
  };
// ...

HugoLiconV avatar Aug 03 '20 23:08 HugoLiconV

Thanks @HugoLiconV, adding constructor was not required but adding @react-native-community/picker to transformIgnorePatterns helped.

ebaynaud avatar Sep 29 '20 10:09 ebaynaud

In case anyone else still experiences problems with the above, I found the secret sauce for me was:

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

christianchownsan avatar Dec 04 '20 13:12 christianchownsan

In case anyone else still experiences problems with the above, I found the secret sauce for me was:

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

Make sure you add this under "jest" in package.json or jest config Works for me. Thanks

SebastianMieszczanczyk avatar Jun 09 '21 13:06 SebastianMieszczanczyk

To fix the unexpected token error, I updated the config-overrides.js with:

module.exports = override(
    babelInclude([
        ...
        path.resolve('src'),
        path.resolve(__dirname, 'node_modules/@react-native-picker/picker'),
    ]),
);

cs-manughian avatar Jul 26 '21 21:07 cs-manughian

Still seeing this issue, even if using transformIgnorePatterns

Maker-Mark avatar Aug 25 '21 18:08 Maker-Mark

Just in case it helps. I had the same issue because I was using expo-image-picker my solution was to also ignore expo-modules-core.

sorodrigo avatar Dec 19 '21 14:12 sorodrigo

Just in case it helps. I had the same issue because I was using expo-image-picker my solution was to also ignore expo-modules-core.

I was seeing this issue without using expo-image-picker.

Maker-Mark avatar Dec 22 '21 18:12 Maker-Mark