"unexpected token import" in Nodejs5 and babel?
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/
Solution 3
- Install packages:
babel-core
,babel-polyfill
,babel-preset-es2015
- Create
.babelrc
with contents:{ "presets": ["es2015"] }
- Do not put
import
statement in your main entry file, use another file eg:app.js
and your main entry file should requiredbabel-core/register
andbabel-polyfill
to make babel works separately at the first place before anything else. Then you can requireapp.js
whereimport
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
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 videos on Youtube
johugz
Updated on July 31, 2022Comments
-
johugz almost 2 years
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?
-
Scott Sauyet about 8 years@FelixKling: Although the answer at the linked question does certainly also answer this question, it's hard to see this question as a duplicate of that one. In any case, I was glad to have this one here, as Google brought me directly here because the described syntax error exactly matched what I saw. I'm honestly glad that the OP posted this rather than searched for a somewhat related question with an answer that happened to fit.
-
ChuckJHardy about 8 years
npm i --save-dev babel-cli
Fixed it for me... -
T.W.R. Cole almost 8 yearsI vote to unmark this as a duplicate, I feel this is a separate question.
-
Dan Dascalescu over 7 yearsThis is not a duplicate. One other solution I would like to post is to double check you have this plugin in
.babelrc
:"transform-es2015-modules-commonjs"
. -
Stijn de Witt about 7 yearsDuplicates are (should be) ok. It's an important part of how humans work. What @ScottSauyet says is one of the reasons. Different explanations with different perspectives is another. This whole 'duplicate hunt' feels very unhelpful to me as a reguar visitor for years. I wish it would stop.
-
Natesh bhat over 5 yearsFor newer versions of react , use the new babel modules : stackoverflow.com/a/53927497/6665568 . It has better error messages and supports new features of react.
-
-
Jagtesh Chadha over 8 yearsGood answer. Unfortunately, you still need to use require() and can't use import for npm packages.
-
FuzzY over 8 yearsI use
babel-node
together withes2015
andreact
presets. Same error. -
Scott Sauyet about 8 yearsI'm not sure if things have changed in the last few months. But it worked fine for me.
-
still_dreaming_1 almost 8 yearsDosn't work. Yes that is needed, but it doesn't make import work.
-
joezen777 over 7 yearsFor me it was a simple fix. I was caught in tunnel vision trying to adapt code from one react/babel project into another es5 project and upgrade to es6 syntax at the same time. In my package.json under scripts, I forgot to replace "node run" with "babel-node run.js". Yeah, I feel sheepish. :)
-
a0s over 7 yearsnpm install babel-preset-latest --save-dev; echo '{ "presets": ["latest"] }' > .babelrc
-
rodrigo-silveira over 7 yearsWorks as prescribed. Node
v6.2.9
, babel-cliv6.18.0
-
omerts over 7 yearsFor those of you that it doesn't work for, don't forget to install the preset: npm install babel-preset-es2015 --save-dev
-
Sylver about 7 yearssorry, but doesn't work. with
babel-presets-*
installed in devDependencies and.babelrc
configured to use them -
ronen about 7 yearslatest recommendation from the babel folks is to use babel-preset-env which detects which polyfills to run, rather than
babel-preset-node*
. In.babelrc
use:{ "presets": [ ["env", { "targets": { "node": "current" } }] ] }
-
Joe Heyming about 7 yearsDon't forget to tell them to update babel-preset-es2015. 6.18.0 did not work for me, but 6.24 does
-
Jonas Drotleff almost 7 yearsThis is an easy workaround that can be used for development. Although for production you should always compile your es5 code.
-
dipole_moment almost 7 yearsDid not work unfortunatley.
Unexpected token import
. -
Craig Gjerdingen almost 7 yearsI know this is going to sound too simple, but if you have tried everything and it still isn't working, double check the spelling of everything. Pretty easy to call it .bablerc, instead of .babelrc of some such mistake! And you will continue to get the “unexpected token import” message.
-
Dmytro almost 7 yearswait... is this what i think it is? a few months ago i had this dream that javascript/perl/any language could be extended without updates by custom extra parsing of the existing language in the same language. Is this what's going on here???
-
Maksim Yegorov almost 7 yearsMake sure that the
babel
command is in your search path. Here's a slight variation.package.json
: { "scripts": { "transpile": "./node_modules/.bin/babel src -d lib" }, "devDependencies": { "babel-cli": "^6.24.1", "babel-preset-env": "^1.6.0" } }.babelrc
: { "presets": ["env"] } -
Rodrigo over 6 yearsJS ecosystem is so easy
-
A. K. over 6 yearsAfter this I started getting the error (unrecognized token '<'): server.js:
Unexpected token (37:12) 35 | const initialState = store.getState(); 36 | const componentHTML = renderToString( > 37 | <Provider store={store}> | ^ 38 | <RouterContext {...props} /> 39 | </Provider>, 40 | );
-
gkarthiks almost 6 yearsExcellent answer. But in the scripts, you can put something like below. So you can use in any file. "scripts": { "build": "babel src -d dist", "start": "node dist/index.js" }
-
jcollum about 5 yearsIs there a way to do this with the CLI?