babel: Unexpected token import

⚠️ 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:

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.
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:
```
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
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

About this issue

Original URL
State: closed
Created 6 years ago
Comments: 45 (11 by maintainers)

Most upvoted comments

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

LinFeng1997 on Jul 12, 2018

@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).

zaqqaz on Aug 22, 2019

@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

pearofducks on Jul 14, 2018

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

AudeR on Apr 22, 2019

@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”] }

tolumide-ng on Feb 9, 2019

@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!

nicolo-ribaudo on Oct 10, 2018

@xtuc I do the following

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

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.

amereii on Jul 4, 2018