'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

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