Babel unexpected token import when running mocha tests

Question

The solutions offered in other related questions, such as including the proper presets (es2015) in .babelrc, are already implemented in my project.

I have two projects (lets call them A and B) which both use ES6 module syntax. In Project A, I'm importing Project B which is installed via npm and lives in the node_modules folder. When I run my test suite for Project A, I'm getting the error:

SyntaxError: Unexpected token import

Which is preceded by this alleged erroneous line of code from Project B:

(function (exports, require, module, __filename, __dirname) { import createBrowserHistory from 'history/lib/createBrowserHistory';

The iife appears to be something npm or possibly babel related since my source file only contains "import createBrowserHistory from 'history/lib/createBrowserHistory'; The unit tests in Project B's test suite runs fine, and if I remove Project B as a dependency from Project A, my test suite then (still using es6 imports for internal project modules) works just fine.

Full Stack Trace:

 SyntaxError: Unexpected token import
    at exports.runInThisContext (vm.js:53:16)
    at Module._compile (module.js:374:25)
    at Module._extensions..js (module.js:405:10)
    at Object.require.extensions.(anonymous function) [as .js] (/ProjectA/node_modules/babel-register/lib/node.js:138:7)
    at Module.load (module.js:344:32)
    at Function.Module._load (module.js:301:12)
    at Module.require (module.js:354:17)
    at require (internal/module.js:12:17)
    at Object.<anonymous> (actionCreators.js:4:17)
    at Module._compile (module.js:398:26)
    at loader (/ProjectA/node_modules/babel-register/lib/node.js:130:5)
    at Object.require.extensions.(anonymous function) [as .js] (/ProjectA/node_modules/babel-register/lib/node.js:140:7)
    at Module.load (module.js:344:32)
    at Function.Module._load (module.js:301:12)
    at Module.require (module.js:354:17)
    at require (internal/module.js:12:17)
    at Object.<anonymous> (/ProjectA/src/components/core/wrapper/wrapper.js:28:23)
    at Module._compile (module.js:398:26)
    at loader (/ProjectA/node_modules/babel-register/lib/node.js:130:5)
    at Object.require.extensions.(anonymous function) [as .js] (/ProjectA/node_modules/babel-register/lib/node.js:140:7)
    at Module.load (module.js:344:32)
    at Function.Module._load (module.js:301:12)
    at Module.require (module.js:354:17)
    at require (internal/module.js:12:17)
    at Object.<anonymous> (/ProjectA/src/components/core/wrapper/wrapperSpec.js:15:16)
    at Module._compile (module.js:398:26)
    at loader (/ProjectA/node_modules/babel-register/lib/node.js:130:5)
    at Object.require.extensions.(anonymous function) [as .js] (/ProjectA/node_modules/babel-register/lib/node.js:140:7)
    at Module.load (module.js:344:32)
    at Function.Module._load (module.js:301:12)
    at Module.require (module.js:354:17)
    at require (internal/module.js:12:17)
    at /ProjectA/node_modules/mocha/lib/mocha.js:219:27
    at Array.forEach (native)
    at Mocha.loadFiles (/ProjectA/node_modules/mocha/lib/mocha.js:216:14)
    at Mocha.run (/ProjectA/node_modules/mocha/lib/mocha.js:468:10)
    at Object.<anonymous> (/ProjectA/node_modules/mocha/bin/_mocha:403:18)
    at Module._compile (module.js:398:26)
    at Object.Module._extensions..js (module.js:405:10)
    at Module.load (module.js:344:32)
    at Function.Module._load (module.js:301:12)
    at Function.Module.runMain (module.js:430:10)
    at startup (node.js:141:18)
    at node.js:980:3

Here is my test command from package.json:

"test": "mocha --compilers js:babel-core/register '+(test|src)/**/*Spec.js'"

This StackOverflow post is similar but doesn't offer a solution for my use of the command line: import a module from node_modules with babel but failed

Answer 1

For Babel <6

The easiest way to solve this problem is:

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

2. Add .babelrc to the root of the project with contents:

   {
    "presets": [ "es2015" ]
   }
   

Ensure that you are running mocha with the "--compilers js:babel-core/register" parameter.

For Babel6/7+

1. npm install @babel/preset-env --save-dev

2. Add .babelrc to the root of the project with contents:

   {
    "presets": [ "@babel/preset-env" ]
   }
   

Ensure that you are running mocha with the --compilers js:babel-register (Babel 6) or --compilers js:@babel/register (Babel 7) parameter

For mocha version 7 or later, use --require babel-register or --require @babel/register respectively.

Answer 2

It seems the only solution is to explicitly include:

require('babel-core/register')({
  ignore: /node_modules/(?!ProjectB)/
}); 

in a test helper file, and pass that along to mocha in my test command:

mocha --require ./test/testHelper.js...

---

The final solution:

Add registerBabel.js: a separate file whose job is to require babel-core/register...

require('babel-core/register')({
  ignore: /node_modules/(?!ProjectB)/
});

Add an entry.js if your application also relies on babel-node. This acts as a wrapper for your es6 containing application.

require('./registerBabel');
require('./server'); // this file has some es6 imports

You would then run your application with node entry

For mocha testing, testHelper.js should require registerBabel.js as well to initialize babel support at run time.

require('./registerBabel');

And run your mocha tests with mocha --require ./testHelper.js '+(test)/**/*Spec.js'

This will recursively test any file ending in "Spec.js" within "./test". Substitute the pattern with one matching the specs in your project.

Answer 3

Well sure you will have that issue, you are using ES6 that mocha don't know

So you are using babel but you don't use it in your test...

Few Solutions:

A. if you running with NPM use

"test": "mocha --compilers js:babel-core/register test*.js"

B. I'm using

"test": "./node_modules/.bin/mocha --compilers js:babel-core/register **/*spec.jsx"

C. From cli:

mocha --compilers js:babel-core/register test*.js

You can read more at http://www.pauleveritt.org/articles/pylyglot/es6_imports/

Answer 4

I ran into that same issue. Having tried every other solution on stackoverflow and beyond, adding this simple config on package.json did it for me:

  "babel": {
    "presets": [
      "es2015"
    ]
  }

All my ES6 imports worked after that. By the way, I had this same configuration inside webpack.config.js, but apparently this was the only way to make it work for mocha testing as well.

Hope this helps someone.