'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

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.