Compile error with dynamic import : Module parse failed: Unexpected token

[gloriaJun]

Version

"webpack": "^4.29.0",
"@babel/cli": "^7.2.3",
"@babel/core": "7.0.0",
"@babel/plugin-transform-runtime": "^7.2.0",
"@loadable/component": "^5.9.0",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-router-dom": "^5.0.0",

npm v 6.7.0
node v11.12.0

Test Scenario

import React from 'react';
import { Redirect, Route, Switch } from 'react-router-dom';
import lazy from '@loadable/component';

const Top = lazy(() => import('@components/Top'));
const Login = lazy(() => import('@components/Login'));
const SignUp = lazy(() => import('@components/SignUp'));
const PinCode = lazy(() => import('@components/common/PinCode'));
const DebitCard = lazy(() => import('@components/DebitCard'));
const TermDeposit = lazy(() => import('@components/TermDeposit'));

const App = () => {
  return (
    <Switch>
      <Route path="/login" component={Login} />
      <Route path="/signup" component={SignUp} />
      <Route path="/termdeposit" component={TermDeposit} />
      <Route path="/debitcard" component={DebitCard} />
      <Route path="/pincode" component={PinCode} />

      <Route path="/" component={Top} />
      <Redirect exact from="/" to="/" />
    </Switch>
  );
};

export default App;

Error Log

ERROR in ./src/components/App.js 5:9
Module parse failed: Unexpected token (5:9)
You may need an appropriate loader to handle this file type.
| import lazy from '@loadable/component';
| var Top = lazy(function () {
>   return import('@components/Top');
| });
| var Login = lazy(function () {
 @ ./src/client/client.js 9:0-34 18:66-69

Cause

• It caused by a hoist in npm modules.
  You can check details in Parsing of import() fails in 4.29.0 (Compilation issue, related to dynamic import) webpack/webpack#8656 (comment)

Solution

For solving this problem, you can have three options.

• using yarn instead of npm.
• Install acorn

1. add acorn@^6.1.1

yarn add -D acorn@^6.1.1
# or 
npm install -D acorn@^6.1.1

2. clean previous package history

rm -rf node_modules yarn.lock package-lock.json

• update npm to v6.8.0-next.2+ (https://github.com/npm/cli/releases/tag/v6.8.0-next.2)
  • 91314e77b npm.community#4794 Fix hoisting of packages with peerDeps. (@sokra)
  • It was reverted. (Revert "install/dedupe: fix hoisting of packages with peerDeps (#147)" npm/cli#152)

Install package

Reference

• Parsing of import() fails in 4.29.0 (Compilation issue, related to dynamic import) webpack/webpack#8656 (comment)
• https://npm.community/t/packages-with-peerdependencies-are-incorrectly-hoisted/4794