Getting Unexpected Token Export
JavascriptEcmascript 6WebpackBabeljsJavascript Problem Overview
I am trying to run some ES6 code in my project but I am getting an unexpected token export error.
export class MyClass {
constructor() {
console.log("es6");
}
}
Javascript Solutions
Solution 1 - Javascript
Updated for 2022
You are using ES6 Module syntax.
This means your environment (e.g. node v14.13.0 or newer) must support ESM (Ecmascript Module Syntax).
NodeJS since v14.13.0 supports EcmaScript Module Syntax but it must be enabled by adding the property "type":"module"
to package.json
. NodeJS versions prior to v14.13.0 uses CommonJS Module syntax by default (module.exports
), not ES6 module syntax (export
keyword).
Solutions:
- Enable module support in
package.json
as outlined above, if - Refactor with CommonJS syntax (for older versions of NodeJS)
- Accept that TypeScript is just better and write
.ts
files along withts-node
orts-node-dev
npm package - (deprecated) Use
babel
npm package to transpile your ES6 to acommonjs
target
Javascript Module standards have changed a lot in recent years, so it can be a bit confusing.
Solution 2 - Javascript
In case you get this error, it might also be related to how you included the JavaScript file into your html page. When loading modules, you have to explicitly declare those files as such. Here's an example:
//module.js:
function foo(){
return "foo";
}
var bar = "bar";
export { foo, bar };
When you include the script like this:
<script src="module.js"></script>
You will get the error:
> Uncaught SyntaxError: Unexpected token export
You need to include the file with a type attribute set to "module":
<script type="module" src="module.js"></script>
then it should work as expected and you are ready to import your module in another module:
import { foo, bar } from "./module.js";
console.log( foo() );
console.log( bar );
Solution 3 - Javascript
My two cents
Export
ES6
> myClass.js
export class MyClass1 {
}
export class MyClass2 {
}
> other.js
import { MyClass1, MyClass2 } from './myClass';
CommonJS Alternative
> myClass.js
class MyClass1 {
}
class MyClass2 {
}
module.exports = { MyClass1, MyClass2 }
// or
// exports = { MyClass1, MyClass2 };
> other.js
const { MyClass1, MyClass2 } = require('./myClass');
Export Default
ES6
> myClass.js
export default class MyClass {
}
> other.js
import MyClass from './myClass';
CommonJS Alternative
> myClass.js
module.exports = class MyClass1 {
}
> other.js
const MyClass = require('./myClass');
Hope this helps
Solution 4 - Javascript
I fixed this by making an entry point file like.
// index.js
require = require('esm')(module)
module.exports = require('./app.js')
and any file I imported inside app.js
and beyond worked with imports/exports
now you just run it like node index.js
Note: if app.js
uses export default
, this becomes require('./app.js').default
when using the entry point file.
Solution 5 - Javascript
There is no need to use Babel at this moment (JS has become very powerful) when you can simply use the default JavaScript module exports. Check full tutorial
Message.js
module.exports = 'Hello world';
app.js
var msg = require('./Messages.js');
console.log(msg); // Hello World
Solution 6 - Javascript
To use ES6 add babel-preset-env
and in your .babelrc
:
{
"presets": ["@babel/preset-env"]
}
Answer updated thanks to @ghanbari comment to apply babel 7.
Solution 7 - Javascript
Install the babel packages @babel/core
and @babel/preset
which will convert ES6 to a commonjs target as node js doesn't understand ES6 targets directly
npm install --save-dev @babel/core @babel/preset-env
Then you need to create one configuration file with name .babelrc
in your project's root directory and add this code there.
{ "presets": ["@babel/preset-env"] }
Solution 8 - Javascript
I got the unexpected token export error also when I was trying to import a local javascript module in my project. I solved it by declaring a type as a module when adding a script tag in my index.html file.
<script src = "./path/to/the/module/" type = "module"></script>
Solution 9 - Javascript
Using ES6 syntax does not work in node, unfortunately, you have to have babel apparently to make the compiler understand syntax such as export or import.
npm install babel-cli --save
Now we need to create a .babelrc file, in the babelrc file, we’ll set babel to use the es2015 preset we installed as its preset when compiling to ES5.
At the root of our app, we’ll create a .babelrc file. $ npm install babel-preset-es2015 --save
At the root of our app, we’ll create a .babelrc file.
{ "presets": ["es2015"] }
Hope it works ... :)
Solution 10 - Javascript
In the latest versions of Nodejs (v17?) you can use top-level "import", "async", "await" by using the .mjs file extension - instead of transpiling or workarounds.
// > node my.mjs
import {MyClass} from 'https://someurl'
async func () {
// return some promise
}
await func ()
Solution 11 - Javascript
I actually want to add simple solution. use const
and backticks(`).
const model = `<script type="module" src="/"></<script>`