Babel ES6 import error, SyntaxError: Unexpected token import

5
votes

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.

3
javascriptnode.jsbabeljs
looks like there is an extra bracket or the extra comma in testStep – Matthew
import can not be inside a function – Jaromanda X
@Matthew in es6 trailing comma's are allowed, but i tried it with it removed and it did not fix the issue. – Graeham Broda
@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
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

3 Answers

5
votes

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.

3
votes

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

0
votes

  1. You need to define hello with function, using var, you will not have function hoisting, so when declaring testStep, hello is undefined.

  2. 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.