ParseError: 'import' and 'export' may appear only with 'sourceType: module'

[baptistebriel]

Hello,

I updated babelify to 7.0.2 and now it throws this error:

Browserify Error
/Applications/MAMP/htdocs/folder-name/assets/js/main.js:1
import framework from './framework';
^
ParseError: 'import' and 'export' may appear only with 'sourceType: module'

Working with 6.4.0.
Do you maybe have any ideas?

Thanks!

[zertosh]

You upgraded to babelify 7.0, which uses the new babel 6.0, and you're missing options. Please read the README.

[joshuakfarrar]

Totally appreciate the help @zertosh.

[gaboom]

@sent1nel : Please share solution! Same issue and don't see what option we are missing. Appreciated!!!

[justjacksonn]

I too am seeing this problem after updating to Babel 6. @zertosh you have said See README in several answers to this, but yet I cant find anything in the README that specifically states which options we need to provide to avoid this issue. Can you update the README there and put something like NOTE: If you are seeing this error (...) this is why and here is how to solve it. All the searches I am seeing on google indicate some option is not sent to Babel 6, yet at least from what I have found so far, my webpack includes the es2015, react and state-1/23 options in the loader section of my webpack. I am also including all the correct dependencies in my package.json file. So any pointers to what we need to do would be of HUGE help to many of us that have this problem. Also, what README are you referring to? I looked through the page about migrating from Babel 5 to Babel 6... maybe I am looking at the wrong README?

[zertosh]

If people open new issues with their current configurations and what features they want, I'd be more than happy to tell them what's missing. I don't know how else to help.

[baptistebriel]

This is what I needed to do to fix this error:

npm install --save-dev babel-preset-es2015

gulpfile.js:

browserify().transform("babelify", {presets: ["es2015"]});

package.json:

{
  "browserify": {
    "transform": [["babelify", { "presets": ["es2015"] }]]
  }
}

https://github.com/babel/babelify#options

[ashnur]

MFW people say RTFM and they think they are helping just because some people randomly solve their problems alone after they read the insult.

[joshuakfarrar]

Sorry @gaboom, that was sarcasm. A colleague of mine fixed this by using preset es2015, the README doesn't contain an upgrade guide.

[smiffy6969]

Thanks for this @baptistebriel I updated and have been having this issue all night!

[ansmonjol]

If you are using react-native, I've got this error after init a new project and it was due to the defaults included packages (maybe "babel-eslint": "^7.0.0" not sure).

I've finally removed my .babelrc config file to add a .eslintrc with all my linter config and solve my problem
Eslintrc example config here --> https://gist.github.com/ansmonjol/7e8131c3bb61609c22b98bb1ee218bbb

[nayaabh]

Adding transform: [["babelify", { "presets": ["es2015"] }]] in grunt config worked for me.

[Naxus28]

@baptistebriel: I think you can use either the browserify config in package.json or pass the config in the browserify transform. I don't think you don't need both (at least I didn't).

[drewdeal]

I am getting this error simply by changing preset from es2015 to es2016. Why should that break this?

Instead of a bunch of "works for me with this tweak", there shoudl be compatibility.

Here are my deps:
"devDependencies": {
"babel-preset-es2016": "^6.16.0",
"babelify": "^7.3.0",
"browserify": "^13.1.1",

and my build cmd:
"build-cocos": "mkdirp dist && browserify cocosDrew/index.js -t babelify --outfile dist/cocosBundle.js",

[ashnur]

@drewdeal There is no reason to expect that es2016 will be as complete as transform as es2015. In fact, what I suspect is happening is that some part is missing. You will have to look into both presets and check the differences I am afraid. People can help if you maybe can give a minimal source code example for your index.js file that has just the couple lines that are required for the error to show.

[loganfsmyth]

es2016 only processes the things added in ES2016, just like es2015 is only the things added in ES2015, so you'd either want to use both, or use something like babel-preset-latest.

[drewdeal]

Thanks @ashnur and @loganfsmyth . Since I am writing an app for Chrome only, I figured out that the better route was to go with this that works perfectly for me:
"presets": [
["env", {
"targets": {
"chrome": 53
}
}]

I am new to babel, so it took me a while to understand that the es2015 preset transforms code back to ES5. My first assumption was that it should 'out' to es2015. So once I got that, I figured es2016 would cleanly work and take me to es2015, preserving arrow functions, spreads, etc.

I am still surprised my code would be in context to the bug however, since the error itself does not point to any line in my code other than this generic sourseType one.

[dasilvacontin]

For browserify users that are running into this issue:

• It is likely that this issue is getting triggered because you're importing node_modules that are not being babelified.
• What? Yes, by default, node_modules are not babelified.
• Solve by passing global as an option to the babelify transform plugin
My example from package.json:

    "build": "browserify src/main.js -o assets/bundle.js -t [ babelify --global ] && (say 'go es!'; echo 'built!')",

• I also converted my .babelrc to a babel.config.js file, as suggested when you are using a monorepo or want to compile files from node_modules.

Hope it helps someone!

(Commenting here since this issue is one of the top results for the query)