'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

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

Answer 2

I got this error when I was missing a closing bracket.

Simplified recreation:

const foo = () => {
  return (
    'bar'
  );
}; <== this bracket was missing

export default foo;

Answer 3

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.