Babel: Unexpected token import

[amereii]

:warning: Edit by @nicolo-ribaudo

If you are getting this error but you have already enabled a modules transform plugin, it can be caused by different configuration problems:

1. If you have added a modules transform plugin inside .babelrc, .babelrc.js or package.json#babe, keep in mind that those configuration files don't cross package boundaries.
   This means that they are not applied to any package inside node_modules, to any subpackage if you are using a monorepo, or to any other package which is not the one containing the configuration.
   You can read https://babeljs.io/docs/en/config-files/ for more information.
2. If you are using @babel/register, it ignores node_modules and any file outside of your cwd by default. (ref)
   You can prevent this behavior by explicitly setting either only or ignore:
   js require("@babel/register")({ ignore: [/\/node_modules\/(?!package-in-node_modules-i-want-to-transpile)/] });
   Another problem could be caused by @babel/register not finding your babel.config.js file: you can either pass the rootMode: "upward" option or follow https://github.com/babel/babel/issues/8249#issuecomment-523842211
3. If you are using @babel/node, it internally uses @babel/register so it has the same caveats from point 2.
   You can use the --only, --ignore, --root-mode or --config-file options.

---

Bug Report

Current Behavior

I have a SyntaxError: Unexpected token import issue ,
Main script that use register babel : https://github.com/RooyeKhat-Media/iGap-Plus/blob/master/script/i18n/index.js
My script : https://github.com/RooyeKhat-Media/iGap-Plus/blob/master/script/i18n/script.js
If I comment these lines , it works https://github.com/RooyeKhat-Media/iGap-Plus/blob/master/src/modules/Error/index.js#L7-L9 You can see full sources here : https://github.com/RooyeKhat-Media/iGap-Plus

I have a script here https://github.com/RooyeKhat-Media/iGap-Plus/blob/master/package.json#L8

Input Code
https://github.com/RooyeKhat-Media/iGap-Plus/blob/master/script/i18n/script.js

Expected behavior/code
https://github.com/RooyeKhat-Media/iGap-Plus is a react-native project that works , my script just import some module from the project (If I comment that lines, script works) , So as I set preset react-native , I expect it must works without commenting lines

Babel Configuration .babelrc and cli command

https://github.com/RooyeKhat-Media/iGap-Plus/blob/master/script/i18n/index.js
https://github.com/RooyeKhat-Media/iGap-Plus/blob/master/.babelrc

Environment

• Babel version(s): 7.0.0-beta.44
• Node/npm version: Node 8/npm 5
• OS: Windows 10
• Monorepo yes (I think)
• How you are using Babel: register

Possible Solution
I asked in slack and no body fix it , I think it may be a bug , if it is not a bug please let me know how can I fix it

Additional context/Screenshots
N/A

[babel-bot]

Hey @amereii! We really appreciate you taking the time to report an issue. The collaborators
on this project attempt to help as many people as possible, but we're a limited number of volunteers,
so it's possible this won't be addressed swiftly.

If you need any help, or just have general Babel or JavaScript questions, we have a vibrant Slack
community that typically always has someone willing to help. You can sign-up here
for an invite.

[amereii]

@babel-bot I asked before in slack and I think it may be a bug

[xtuc]

Could you please provide the full stack trace? Are you using Webpack?

[amereii]

Are you using Webpack?

No

$ yarn run i18n
yarn run v1.3.2
$ node script/i18n/index.js
C:\projects\iGapPlus\node_modules\react-native-sqlite-2\index.js:1
(function (exports, require, module, __filename, __dirname) { import module from './src'
                                                              ^^^^^^

SyntaxError: Unexpected token import
    at createScript (vm.js:74:10)
    at Object.runInThisContext (vm.js:116:10)
    at Module._compile (module.js:533:28)
    at Module._extensions..js (module.js:580:10)
    at Object.require.extensions.(anonymous function) [as .js] (C:\projects\iGapPlus\node_modules\babel-register\lib\node.js:152:7)
    at Module.load (module.js:503:32)
    at tryModuleLoad (module.js:466:12)
    at Function.Module._load (module.js:458:3)
    at Module.require (module.js:513:17)
    at require (internal/module.js:11:18)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

[xtuc]

You need to transpile JavaScript's modules to something that Node understands, you need to use https://babeljs.io/docs/en/babel-plugin-transform-es2015-modules-commonjs.

[amereii]

@xtuc I do the following

yarn add transform-es2015-modules-commonjs --dev

Next

require('babel-core/register')({
  presets: [
    'react-native',
  ],
  plugins: [
    'transform-object-rest-spread',
    'transform-es2015-modules-commonjs',
  ],
});

require('./script');

But not fixed

$ yarn run i18n
yarn run v1.3.2
$ node script/i18n/index.js
C:\projects\iGapPlus\node_modules\react-native-sqlite-2\index.js:1
(function (exports, require, module, __filename, __dirname) { import module from './src'
                                                              ^^^^^^

SyntaxError: Unexpected token import
    at createScript (vm.js:74:10)
    at Object.runInThisContext (vm.js:116:10)
    at Module._compile (module.js:533:28)
    at Module._extensions..js (module.js:580:10)
    at Object.require.extensions.(anonymous function) [as .js] (C:\projects\iGapPlus\node_modules\babel-register\lib\node.js:152:7)
    at Module.load (module.js:503:32)
    at tryModuleLoad (module.js:466:12)
    at Function.Module._load (module.js:458:3)
    at Module.require (module.js:513:17)
    at require (internal/module.js:11:18)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

[xtuc]

Could you please try with the babel/cli? Your configuration looks ok to me.

[amereii]

@xtuc I run

babel script.js --out-file script-compiled.js --presets=react-native --plugins transform-es2015-modules-commonjs,transform-object-rest-spread

and then node script-compiled.js , the output is not same as babel-core/register

$ node script-compiled.js
C:\projects\iGapPlus\src\i18n\en.js:1
(function (exports, require, module, __filename, __dirname) { import country from '../constants/country/en';
                                                              ^^^^^^

SyntaxError: Unexpected token import
    at createScript (vm.js:74:10)
    at Object.runInThisContext (vm.js:116:10)
    at Module._compile (module.js:533:28)
    at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:503:32)
    at tryModuleLoad (module.js:466:12)
    at Function.Module._load (module.js:458:3)
    at Module.require (module.js:513:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (C:\projects\iGapPlus\script\i18n\script-compiled.js:1:429)

[amereii]

@xtuc , Is it a bug?

[nicolo-ribaudo]

What Babel version are you using? In the issue description you said 7.0.0-beta.44 but all your Babel plugins are version 6.

[amereii]

https://github.com/RooyeKhat-Media/iGap-Plus/blob/master/yarn.lock#L12
https://github.com/RooyeKhat-Media/iGap-Plus/blob/master/yarn.lock#L1348

https://github.com/RooyeKhat-Media/iGap-Plus/blob/master/package.json#L68-L73

Is something wrong?

[LinFeng1997]

try https://www.npmjs.com/package/babel-plugin-dynamic-import-node

[amereii]

@LinFeng1997 I add babel-plugin-dynamic-import-node

yarn add babel-plugin-dynamic-import-node --dev

require('babel-core/register')({
  presets: [
    'react-native',
  ],
  plugins: [
    'transform-object-rest-spread',
    'dynamic-import-node',
  ],
});

require('./script');

still having Unexpected token import error

[pearofducks]

@amereii - you're requiring babel 6's babel-core/register in that code snippet you just posted. Babel 7's register is @babel/register (which is _also_ in your yarn.lock).

[amereii]

@pearofducks Can you tell me more detail , what must I do exactly

Also see https://stackoverflow.com/questions/37780952/babel-core-register-vs-babel-register

They are the same. All babel-core/register does is require('babel-register'). https://github.com/babel/babel/blob/cb8c4172ef740aa562f0873d602d800c55e80c6d/packages/babel-core/register.js#L3
The recommended usage is babel-register since that is the module where the code actually lives, and babel-core/register has been removed in Babel 7.x. Better to depend specifically on the module you use, rather than load it as a side-effect of babel-core.

[pearofducks]

@amereii - babel-core/register is v6 [1], @babel/register is v7 [2]

You need to change the first line of your file you just posted to require('@babel/register')({

[1] Your yarn.lock v6 babel-core/register
[2] Your yarn.lock v7 @babel/register

[amereii]

@pearofducks After doing that , Unexpected token import error is solved but now I have

$ node script/i18n/index.js
C:\projects\iGapPlus\node_modules\@babel\traverse\lib\scope\index.js:964
      scope.bindings[name] = info;
           ^

TypeError: Cannot read property 'bindings' of null
    at Scope.moveBindingTo (C:\projects\iGapPlus\node_modules\@babel\traverse\lib\scope\index.js:964:12)
    at BlockScoping.updateScopeInfo (C:\projects\iGapPlus\node_modules\babel-plugin-transform-es2015-block-scoping\lib\index.js:364:17)
    at BlockScoping.run (C:\projects\iGapPlus\node_modules\babel-plugin-transform-es2015-block-scoping\lib\index.js:330:12)
    at PluginPass.BlockStatementSwitchStatementProgram (C:\projects\iGapPlus\node_modules\babel-plugin-transform-es2015-block-scoping\lib\index.js:70:24)
    at newFn (C:\projects\iGapPlus\node_modules\@babel\traverse\lib\visitors.js:243:21)
    at NodePath._call (C:\projects\iGapPlus\node_modules\@babel\traverse\lib\path\context.js:65:18)
    at NodePath.call (C:\projects\iGapPlus\node_modules\@babel\traverse\lib\path\context.js:40:17)
    at NodePath.visit (C:\projects\iGapPlus\node_modules\@babel\traverse\lib\path\context.js:100:12)
    at TraversalContext.visitQueue (C:\projects\iGapPlus\node_modules\@babel\traverse\lib\context.js:144:16)
    at TraversalContext.visitSingle (C:\projects\iGapPlus\node_modules\@babel\traverse\lib\context.js:104:19)
    at TraversalContext.visit (C:\projects\iGapPlus\node_modules\@babel\traverse\lib\context.js:185:19)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

[amereii]

@xtuc , @nicolo-ribaudo , @LinFeng1997 , @pearofducks How can I fix it ? is it a bug?

[SupremeTechnopriest]

I can confirm that this is broken. Did you ever find a way to fix it @amereii? I tried @babel/preset-env as well and it breaks in a different way:

node_modules/@babel/runtime/helpers/esm/classCallCheck.js:1
(function (exports, require, module, __filename, __dirname) { export default function _classCallCheck(instance, Constructor) {
                                                              ^^^^^^
SyntaxError: Unexpected token export

[nicolo-ribaudo]

@SupremeTechnopriest Are you using useESModules: true in babel-transform-runtime?

[SupremeTechnopriest]

@nicolo-ribaudo im trying to run on node and Im not using transform-runtime. Do I need to be? Here is my script:

require('ignore-styles')

require('@babel/register')({
  ignore: [ /(node_modules)/ ],
  presets: ['@babel/preset-env', 'react-app'],
  plugins: [
    'syntax-dynamic-import',
    'dynamic-import-node',
    'react-loadable/babel'
  ]
})

require('./index')

[nicolo-ribaudo]

Are you sure you are not using any other config file? @babel/runtime (which is where your error comes from) is only pulled in by @babel/plugin-transform-runtime. You could add configFile: false to your Babel register config to prevent other configurations from being loaded.

[SupremeTechnopriest]

@nicolo-ribaudo pretty sure theres no other configs. I have an ejected create-react-app. Theres no .babelrc in the project. I tried adding configFile: false and it still throws the same error.

[SupremeTechnopriest]

Here are the babel bits from my package.json
"@babel/core": "7.1.2", "@babel/preset-env": "^7.0.0", "@babel/register": "^7.0.0", "babel-core": "7.0.0-bridge.0", "babel-eslint": "10.0.1", "babel-jest": "23.6.0", "babel-loader": "8.0.4", "babel-plugin-dynamic-import-node": "^2.2.0", "babel-plugin-named-asset-import": "^0.2.2", "babel-plugin-syntax-dynamic-import": "^6.18.0", "babel-preset-react-app": "^5.0.3",

[nicolo-ribaudo]

Ok, the problem is that the react-app preset turns on useESModules (in https://github.com/facebook/create-react-app/blob/master/packages/babel-preset-react-app/create.js).
I think that the only thing that you can do is to remove that preset and manually specify the plugins that you need.

[SupremeTechnopriest]

I thought so too at first. Then I started with an empty config and started to resolve issues one by one.

require('@babel/register')()

First error:

www-new/server/index.js:1
(function (exports, require, module, __filename, __dirname) { import express from 'express';

SyntaxError: Unexpected token import

First fix:

require('@babel/register')({
  presets: ['@babel/preset-env']
})

and it errors with

node_modules/@babel/runtime/helpers/esm/classCallCheck.js:1
(function (exports, require, module, __filename, __dirname) { export default function _classCallCheck(instance, Constructor) {

SyntaxError: Unexpected token export

Nothing I do gets it past this point. Looks like it's failing on @babel/preset-env version 7.0.0 If you dont supply a full configuration, does it include runtime by default?

[nicolo-ribaudo]

Does it also errors with configFile: false? Do you have a repository I could look at? (I can't currently debug it, but someone else could)

[SupremeTechnopriest]

Yeah same errors with configFile: false I'll put together a sample repository today.

[SupremeTechnopriest]

Here is a test repo. It's a create-react-app with the beginnings of server side rendering and code splitting. The babel register is here:

https://github.com/SupremeTechnopriest/babel-7-test/blob/master/server/init.js

[SupremeTechnopriest]

Basically if you can get this to work with babel 7 https://timonweb.com/posts/how-to-enable-es6-imports-in-nodejs/ we are in the clear.

[SupremeTechnopriest]

Ah I got it. Need to add babelrc: false maybe the option name was changed.

[SupremeTechnopriest]

and yes we were correct in assuming it was due to create react app. I had to manually add the plugins i wanted and start with @babel/preset-react as a base.

[nicolo-ribaudo]

Oh ok, I thought that configFile: false (which disables babel.config.js) automatically set babelrc: false.

[SupremeTechnopriest]

Yeah I guess not.. All good now though! On to the next problem. Thanks for you input!

[nicolo-ribaudo]

@SupremeTechnopriest I'm marking our conversation as resolved so that it doesn't distract from the original issue. I'm glad that you solved your problem!

[luvwinnie]

i have the same problem with server side rendering and get same error. does this has resolved?

the erorr was as shown below.

```
(function (exports, require, module, __filename, __dirname) { export default function _classCallCheck(instance, Constructor) {
^^^^^^

SyntaxError: Unexpected token export```

[tolumide-ng]

@xtuc , @nicolo-ribaudo , @LinFeng1997 , @pearofducks How can I fix it ? is it a bug?

check your root file, change the .babelrc file to babel.config.js
--also change the content to:
{
"presets" ["@babel/preset-env"]
}

[tjsudarsan]

Yeah I guess not.. All good now though! On to the next problem. Thanks for you input!

Hey, I am also sticking to the same problem. By the way, i am not good into the core. Please tell me what I have to do. I have seen you repository that you have posted here. It looks same as of mine. But i get the same error. which is

(function (exports, require, module, __filename, __dirname) { export default fun ction _classCallCheck(instance, Constructor) { ^^^^^^
SyntaxError: Unexpected token export
at new Script (vm.js:84:7)

at createScript (vm.js:264:10)

What i need to do?

[AudeR]

I use this set-up and it has put an end to these issues for me.
https://docs.microsoft.com/en-us/visualstudio/javascript/tutorial-nodejs-with-react-and-jsx?view=vs-2019

[zaqqaz]

@amereii, if it's still actual for you and for everyone else who tried to get shared configuration for webpack with monorepo, such configuration work for me like a charm:

const path = require('path');
const rootPath = path.join(__dirname, '../../'); // path to root folder

require('@babel/register')({
    root: rootPath,
    ignore: [/node_modules/],
    presets: ['@babel/preset-env'],
    plugins: [
        '@babel/plugin-transform-runtime',
    ],
});

module.exports = require('./webpack.babel.config');

the key thing here, to have both keys (root & ignore).

[nicolo-ribaudo]

I wrote an explanation in the original issue.

[ghasemikasra39]

same issue. Any solution ?

[lopezdp]

same issue. Any solution ?

none.

[lopezdp]

@amereii, if it's still actual for you and for everyone else who tried to get shared configuration for webpack with monorepo, such configuration work for me like a charm:

const path = require('path');
const rootPath = path.join(__dirname, '../../'); // path to root folder

require('@babel/register')({
    root: rootPath,
    ignore: [/node_modules/],
    presets: ['@babel/preset-env'],
    plugins: [
        '@babel/plugin-transform-runtime',
    ],
});

module.exports = require('./webpack.babel.config');

the key thing here, to have both keys (root & ignore).

Any context would be great here... where is this going? .babelrc? webpack.config? in the implementation? where??????