import and export may only appear at the top level

Question

I m using webpack with vuejs  Webpack does its thing  but when I look at the outputted app js file  it gives me this error        import  and  export  may only appear at the top level   I m assuming it s a problem with babel not converting the code  Because I m getting this in the browser when viewing the application      Unexpected token import   Here s my entry js for my vuejs application     jshint esversion  6    import Vue from  vue   import App from    App vue   import VueRouter from  vue-router   Vue use VueRouter   require    css style scss        Export the vue router export var router   new VueRouter     hashbang  false    root           history  true         Set up routing and match routes to components router map                component  require    components home Home vue               Redirect to the home route if any routes are unmatched router redirect                      Start the app on the  app div router start App    app      Here s my webpack config js   var ExtractTextPlugin   require  extract-text-webpack-plugin    var path   require  path     module exports       entry     src entry js     output          filename     public js app js         devtool   source-map     plugins        new ExtractTextPlugin    public css style css          module        preLoaders             test     js             exclude   node modules           loader   jshint-loader              loaders             test     scss            loader  ExtractTextPlugin extract               style                css sass                                  test     vue            loader   vue                       test     js            exclude   node modules           include              path resolve   dirname   src services                       loader   babel-loader           query              presets    es2015                             Here s my packages json file        name    test-webpack      version    1 0 0      description    Myapp      main    entry js      scripts          watch    webpack-dev-server  --host  IP --port  PORT  --hot --inline --config webpack config js        dev    webpack        build              author    Dev      license    ISC      devDependencies          babel-core     6 9 1        babel-loader     6 2 4        babel-plugin-transform-class-properties     6 10 2        babel-plugin-transform-runtime     6 9 0        babel-preset-es2015     6 9 0        babel-runtime     6 9 2        css-loader     0 23 1        extract-text-webpack-plugin     1 0 1        jshint     2 9 2        jshint-loader     0 8 3        node-sass     3 8 0        path     0 12 7        sass-loader     3 2 0        style-loader     0 13 1        vue-hot-reload-api     1 3 2        vue-html-loader     1 2 2        vue-loader     8 5 2        vue-style-loader     1 0 0        webpack     1 13 1        webpack-dev-server     1 14 1          dependencies          vue     1 0 25        vue-router     0 7 13

User · Answer

I got this error after upgrading to webpack 4.29.x. It turned out that webpack 4.29.x triggered npm's peerDependency bug. And according to them, the bug is not going to get fixed soon. Here's the workaround from sokra

add "acorn": "^6.0.5" to your application package.json.
Switch to yarn. It doesn't have this bug.
npm update acorn --depth 20 npm dedupe (works only in some cases)
rm package-lock.json npm i (works only in some cases)
update all other packages that depend on an older version for acorn (works only in some cases)
lock webpack at 4.28.4 in your package.json

Update

According to comment below, this bug doesn't exist anymore after 4.36.0

User · Answer

I am using Webpack 2 2 0 to bundle my React JS modules    Encountered a similar issue while importing modules in my main app js file   After 30 minutes of headbanging I updated the RegEx for testing the file types in my webpack config js      Carefully notice the   symbol in test RegEx query          test     js         exclude    node modules        loader   react-hot-loader      It worked for me

User · Answer

Using webpack 4 14 0 and babel-cli 6 26 I had to install this Babel plugin to fix the SyntaxError   import  and  export  may only appear at the top level error  babel-plugin-syntax-dynamic-import  It was linked through from the Webpack Code Splitting Docs

User · Answer

I had the same issue using webpack4  i was missing the file  babelrc in the root folder           presets    env    react         plugins              syntax-dynamic-import            From package json      babel-core     6 26 3    babel-loader     7 1 5    babel-plugin-syntax-dynamic-import     6 18 0    babel-polyfill     6 26 0    babel-preset-env     1 7 0    babel-preset-react     6 24 1

User · Answer

Make sure you have a  babelrc file that declares what Babel is supposed to be transpiling  I spent like 30 minutes trying to figure this exact error  After I copied a bunch of files over to a new folder and found out I didn t copy the  babelrc file because it was hidden        presets    es2015      or something along those lines is what you are looking for inside your  babelrc file

User · Answer

I got this error when I was missing a closing brace in a component method   const Whoops   props   gt      const wonk        gt   props wonk             lt - note missing   brace    return        lt View onPress  wonk    gt

User · Answer

This is not direct answer to the original question but I hope this suggestion helps someones with similar error    When using a newer web-api with Webpack Babel for transpiling and you get    Module parse failed   import  and  export  may only appear at the top level  then you probably forgot to import a polyfill     For example  when using fetch   api and targeting for es2015  you should     add whatwg-fetch polyfill to package json add import  fetch  from  whatwg-fetch

User · Answer

import  and  export  may only appear at the top level   This means that webpack is bundling the non-transpiled ES6 code  which is why these import export statements are being found  babel-loader must therefore not be transpiling what you expect   If you simply remove the include and exclude rules from its loader config  the default behavior of transpiling everything besides what s in node modules will kick in  For some reason or another  the current rules are causing some all files to be skipped   module exports       entry     src entry js     output        filename     public js app js         devtool   source-map     plugins        new ExtractTextPlugin    public css style css          module        preLoaders           test     js           exclude   node modules         loader   jshint-loader              loaders           test     scss          loader  ExtractTextPlugin extract           style            css sass                              test     vue          loader   vue                     test     js          loader   babel-loader         query            presets    es2015

User · Answer

For me  this was caused by a reference to module in a hot module replacement implementation   constructor       if  module  amp  amp  module hot        module hot status status   gt          if  status      dispose             this webSocket close

User · Answer

I do not know how to solve this problem differently  but this is solved simply  The loader babel should be placed at the beginning of the array and everything works

User · Answer

Vue supports async components   Source   https   vueschool io articles vuejs-tutorials async-vuejs-components    lt script gt  export default     data       gt     show  false       components        Tooltip       gt  import    Tooltip           lt  script gt    Good Luck

User · Answer

Maybe you re missing some plugins  try   npm i --save-dev babel-plugin-transform-vue-jsx  npm i --save-dev babel-plugin-transform-runtime  npm i --save-dev babel-plugin-syntax-dynamic-import    If using  Webpack config js        If using   babelrc   see answer in this link

User · Answer

I got this error when I was missing a closing bracket   Simplified recreation   const foo        gt      return        bar           lt    this bracket was missing  export default foo

User · Answer

Look out for a double opening bracket syntax error as well    which can cause this error message to appear

User · Answer

My error is caused by a System import  xxx js   statment  After replacing it with import xxx from  xxx js   the error solved   I think it is because require  xxx scss   also caused a dynamic import   For the case in the question description  in my opinion  dynamic imports is not necessary  so the problem should be solved by just replacing all requires with import     from       For some case which dynamic imports are necessary  you may need  babel plugin-syntax-dynamic-import as other answers in this question

[webpack] 'import' and 'export' may only appear at the top level

Examples related to webpack

Examples related to vue.js

Examples related to babeljs