Babel ES6 import error, SyntaxError: Unexpected token import

Question

I am trying to set up a basic modular program, however I seem to be running into issues with importing modules. I attempt to import my custom module, I get the following error:

(function (exports, require, module, __filename, __dirname) { import testStep from 'testStep'; ^^^^^^ SyntaxError: Unexpected token import

The code that is causing the issue:

testcase.js

import testStep from 'testStep'; testStep.hello();

testStep.js

var testStep = { hello: hello, }; var hello = () => { console.log('hello world'); }; export default {testStep};

package.json

{ "name": "rebuild-poc", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC", "devDependencies": { "babel-polyfill": "^6.23.0", "babel-preset-env": "^1.6.0" }, "dependencies": {} }

.babelrc

{ "presets": [ "env" ] }

I have already tried several other fixes, such as setting testStep as a class, as well as using require('./testStep.js'), however neither of those seem to have worked.

Do I have something set up incorrectly with babel or in one of my files?

***Edit: I am running testCase.js with node testCase.js.

looks like there is an extra bracket or the extra comma in testStep — Matthew
– Matthew, Commented Jul 25, 2017 at 3:19
@Matthew in es6 trailing comma's are allowed, but i tried it with it removed and it did not fix the issue. — Graeham Broda
– Graeham Broda, Commented Jul 25, 2017 at 3:33
@JaromandaX could you clarify on that point a bit more? to the best of my knowledge, the import is not inside of a function. It is just in the script, but maybe i am misunderstanding — Graeham Broda
– Graeham Broda, Commented Jul 25, 2017 at 3:33
it's inside in IIFE (according to the error message) .... Import declarations are only allowed at the top level of module scope ... I may be misunderstanding the error output you are getting though now that I've looked more closely at the code in the question — Jaromanda X
– Jaromanda X, Commented Jul 25, 2017 at 3:34

danbruegge · Accepted Answer · 2017-07-25 06:45:05Z

Please install babel-cli and call your file with: ./node_modules/.bin/babel-node testcase.js

It will fail. Now we have to fix your code.

testStep.js should look like:

var hello = () => { console.log('hello world'); }; var testStep = { hello: hello, }; export default testStep;

Then, it will work. ;)

This first introduction on https://babeljs.io/ is, that you should install babel-cli and babel-preset-env. ;)

You can also write your testStep.js like this:

var testStep = { hello: hello, }; function hello () { console.log('hello world'); }; export default testStep;

This keeps the hoisting in mind. Like Jacob said in his first point.

Jijo Paulose · Accepted Answer · 2018-06-26 13:13:29Z

From the babel 6 Release notes:

Plugin Presets

$ npm install --save-dev babel-preset-env

save it .babelrc file

{ presets: ["env"] }

Note: https://babeljs.io/docs/en/babel-preset-env#docsNav

sfy · Accepted Answer · 2017-07-25 04:19:44Z

You need to define hello with function, using var, you will not have function hoisting, so when declaring testStep, hello is undefined.
If you want to use es module, you can use babel-register or babel-node. In your code, node can not handle es module.

Babel-register

With bebel-register, all your module will be handled by babel when they are imported.

First,yarn add babel-register babel-cli --dev or npm install babel-register babel-cli -dev Then create an entry file:

// entry.js require('babel-register') require('testcase')

In your testcase, you can use es module now.

Edit you package.json:

"scripts": { "test": "node entry.js" },

you can run yarn test or npm run test in terminal.

You don't need babel-polyfill, that is for browsers, not for node.

Collectives™ on Stack Overflow

Babel ES6 import error, SyntaxError: Unexpected token import

3 Answers 3

Comments

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Linked

Related