“unexpected token import” in Nodejs5 and babel?

“unexpected token import” in Nodejs5 and babel?

In js file, i used import to instead of require
import co from ‘co’;

And tried to run it directly by nodejs since it said import is ‘shipping features’ and support without any runtime flag (https://nodejs.org/en/docs/es6/), but i got an error
import co from ‘co’;
^^^^^^

SyntaxError: Unexpected token import

Then i tried to use babel
npm install -g babel-core
npm install -g babel-cli
npm install babel-core //install to babel locally, is it necessary?

and run by
babel-node js.js

still got same error, unexpected token import?
How could I get rid of it?

Solutions/Answers:

Solution 1:

From the babel 6 Release notes:

Since Babel is focusing on being a platform for JavaScript tooling and not an ES2015 transpiler, we’ve decided to make all of the plugins opt-in. This means when you install Babel it will no longer transpile your ES2015 code by default.

In my setup I installed the es2015 preset

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

or with yarn

yarn add babel-preset-es2015 --dev

and enabled the preset in my .babelrc

{
  "presets": ["es2015"]
}

Solution 2:

Until modules are implemented you can use the Babel “transpiler” to run your code:

npm install --save babel-cli babel-preset-node6

and then

./node_modules/babel-cli/bin/babel-node.js --presets node6 ./your_script.js

If you dont want to type --presets node6 you can save it .babelrc file by:

{
  "presets": [
    "node6"
  ]
}

See https://www.npmjs.com/package/babel-preset-node6 and https://babeljs.io/docs/usage/cli/

Related:  Use jQuery to scroll to the bottom of a div with lots of text

Solution 3:

  1. Install packages: babel-core, babel-polyfill, babel-preset-es2015
  2. Create .babelrc with contents: { "presets": ["es2015"] }
  3. Do not put import statement in your main entry file, use another file eg: app.js and your main entry file should required babel-core/register and babel-polyfill to make babel works separately at the first place before anything else. Then you can require app.js where import statement.

Example:

index.js

require('babel-core/register');
require('babel-polyfill');
require('./app');

app.js

import co from 'co';

It should works with node index.js.

Solution 4:

babel-preset-es2015 is now deprecated and you’ll get a warning if you try to use Laurence’s solution.

To get this working with Babel 6.24.1+, use babel-preset-env instead:

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

Then add env to your presets in your .babelrc:

{
  "presets": ["env"]
}

See the Babel docs for more info.

Solution 5:

It may be that you’re running uncompiled files. Let’s start clean!

In your work directory create:

  • Two folders. One for precompiled es2015 code. The other for babel’s
    output. We’ll name them “src” and “lib” respectively.
  • A package.json file with the following object:

    { 
      "scripts": {
          "transpile-es2015": "babel src -d lib"
      },
      "devDependencies": {
          "babel-cli": "^6.18.0",
          "babel-preset-latest": "^6.16.0"
      }
    }
    
  • A file named “.babelrc” with the following instructions:
    {"presets": ["latest"]}

  • Lastly, write test code in your src/index.js file. In your case:
    import co from 'co'.

Through your console:

  • Install your packages:
    npm install
  • Transpile your source directory to your output directory with the -d (aka –out-dir) flag as, already, specified in our package.json:
    npm run transpile-es2015
  • Run your code from the output directory!
    node lib/index.js

Solution 6:

if you use the preset for react-native it accepts the import

npm i babel-preset-react-native --save-dev

and put it inside your .babelrc file

{
  "presets": ["react-native"]
}

in your project root directory

Related:  How to use Typeahead.js 0.10 step-by-step / remote / prefetch / local

https://www.npmjs.com/package/babel-preset-react-native