Getting Unexpected Token Export

Question

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

User · Answer

You are using ES6 Module syntax   This means your environment  e g  node js  must support ES6 Module syntax   NodeJS uses CommonJS Module syntax  module exports  not ES6 module syntax  export keyword    Solution    Use babel npm package to transpile your ES6 to a commonjs target   or   Refactor with CommonJS syntax    Examples of CommonJS syntax are  from flaviocopes com commonjs      exports uppercase   str   gt  str toUpperCase   exports a   1

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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  quot foo quot      var bar    quot bar quot    export   foo  bar     When you include the script like this   lt script src  quot module js quot  gt  lt  script gt   You will get the error   Uncaught SyntaxError  Unexpected token export  You need to include the file with a type attribute set to  quot module quot    lt script type  quot module quot  src  quot module js quot  gt  lt  script gt   then it should work as expected and you are ready to import your module in another module  import   foo  bar   from   quot   module js quot    console log  foo      console log  bar

User · Answer

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

User · Answer

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

User · Answer

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   lt script src    quot   path to the module  quot  type    quot module quot  gt  lt  script gt

User · Answer

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

[javascript] Getting Unexpected Token Export

Examples related to javascript

Examples related to ecmascript-6

Examples related to webpack

Examples related to babeljs