'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\

Answer 1

'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']
      }
    }]
  }
};

Answer 2

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

Answer 3

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.

Answer 4

I got this error when I was missing a closing brace in a component method:

const Whoops = props => {
  const wonk = () => {props.wonk();      // <- note missing } brace!
  return (
    <View onPress={wonk} />
  )
}

Answer 5

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.

Answer 6

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",