SyntaxError: 'import' and 'export' may appear only with 'sourceType: module' (1:0)

Question

I keep hitting this error. Its happened a few times recently and now I can't get rid of it. I'm using MobX in my React Native project and so I need something in my .babelrc so I have decorator support:

{
  "presets": ["react-native"],
  "plugins": ["transform-decorators-legacy"]
}

I've tried a few difference variations but all give me the error below. If I remove it, I get an error due to decorators not being supported.

SyntaxError: 'import' and 'export' may appear only with 'sourceType: module' (1:0)
    at Parser.pp$5.raise (/path-to/node_modules/babylon/lib/index.js:4246:13)
    at Parser.pp$1.parseStatement (/path-to/node_modules/babylon/lib/index.js:1749:16)
    at Parser.pp$1.parseBlockBody (/path-to/node_modules/babylon/lib/index.js:2133:21)
    at Parser.pp$1.parseTopLevel (/path-to/node_modules/babylon/lib/index.js:1645:8)
    at Parser.parse (/path-to/node_modules/babylon/lib/index.js:1537:17)
    at Object.parse$1 [as parse] (/path-to/node_modules/babylon/lib/index.js:6466:37)
    at extractDependencies (/path-to/node_modules/react-native/packager/react-packager/src/JSTransformer/worker/extract-dependencies.js:29:23)
    at transform (/path-to/node_modules/react-native/packager/react-packager/src/JSTransformer/worker/index.js:53:9)
    at module.exports (/path-to/node_modules/react-native/packager/transformer.js:130:3)
    at transformCode (/path-to/node_modules/react-native/packager/react-packager/src/JSTransformer/worker/index.js:27:3)
transformed 35/139 (25%)/path-to/node_modules/babylon/lib/index.js:4249
  throw err;

I've tried removing my node_modules and reinstalling a few times. I'm using yarn. Also removed the lock file before running yarn install again.

I followed this guide to get the Babel plugins installed. My package.json looks like:

  "dependencies": {
    "apsl-react-native-button": "^3.0.0",
    "mobx": "^2.5.0",
    "mobx-react": "^3.5.5",
    "react": "15.3.2",
    "react-native": "0.37.0",
    "react-native-autogrow-textinput": "^2.0.3",
    "react-native-awesome-button": "^1.6.0",
    "react-native-couchbase-lite": "git://github.com/adamski/react-native-couchbase-lite.git#gradle-experimental",
    "react-native-keep-awake": "git://github.com/adamski/react-native-keep-awake.git#experimental-gradle",
    "react-native-keyboard-aware-view": "^0.0.11",
    "react-native-keyboard-dodging-view": "git://github.com/adamski/react-native-keyboard-dodging-view#upper-text-inputs",
    "react-native-modalbox": "^1.3.4",
    "react-native-navigation": "git://github.com/adamski/react-native-navigation.git#gradle-experimental-update",
    "react-native-searchbar": "^0.4.2",
    "react-native-simple-store": "^1.0.1",
    "react-native-swipe-list-view": "^0.3.1"
  },
  "devDependencies": {
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-preset-react-native": "^1.9.1"
  }

I tried updating to RN 0.38 but still get the same error.

Running ag babylon yields

yarn.lock
200:    babylon "^6.11.0"
885:    babylon "^6.11.0"
896:    babylon "^6.11.0"
911:babylon@^6.11.0, babylon@^6.13.0, babylon@^6.13.1:
913:  resolved "https://registry.yarnpkg.com/babylon/-/babylon-6.14.1.tgz#956275fab72753ad9b3435d7afe58f8bf0a29815"
3478:    babylon "^6.13.0"
3555:    babylon "^6.13.1"

which suggests a conflict among different versions of babylon?

Can anyone tell me what this error message actually means? Is it something in my code, or is it a mismatch of babel versions among my modules?

Answer 1

I think there is a package for that, babel-preset-react-native-stage-0

and in your .babelrc add "react-native-stage-0/decorator-support" to your presets array

Answer 2

I had the same problem. At the end my solution was to delete the .babelrc file all together. Then, I had to install some presets and add them as dev dependencies.

Specifically:

babel-preset-es2015 babel-preset-react babel-preset-react-native

And everything started working again.