loadable-components: requireAsync: () => import() SyntaxError: Unexpected token import

đź’¬ Questions and Help

Thanks for your SSR example! But as soon as i added to main.js import routes from '../client/routes.js'; with

import loadable from '@loadable/component';
const Cat = loadable(() => import('./Cat.jsx'));
export default [
    {
        path: '/cat',
        exact: true,
        component: Cat
    },
]

immediately get error:

...............................
[nodemon] starting `babel-node src/server/main.js`
/home/....../loadable-components/examples/server-side-rendering/src/client/routes.js:32
  requireAsync: () => import(
                      ^^^^^^
SyntaxError: Unexpected token import
  • Read carefully the README of the project ?

yes

  • Search if your answer has already been answered in old issues?

yes, and webpack has been upgraded to “webpack”: “4.28.4”:

"@babel/cli": "^7.1.2",
    "@babel/core": "^7.3.4",
    "@babel/node": "^7.0.0",
    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
    "@babel/preset-env": "^7.3.4",
    "@babel/preset-react": "^7.0.0",
    "@loadable/babel-plugin": "^5.6.0",
    "@loadable/webpack-plugin": "^5.5.0",
    "babel-loader": "^8.0.4",
    "css-loader": "^2.1.0",
    "mini-css-extract-plugin": "^0.5.0",
    "nodemon": "^1.18.5",
    "npm-run-all": "^4.1.5",
    "webpack": "4.28.4",
    "webpack-cli": "^3.1.2",
    "webpack-dev-middleware": "^3.4.0",
    "webpack-node-externals": "^1.7.2"

May I ask you a more complex example with routes?

About this issue

  • Original URL
  • State: closed
  • Created 5 years ago
  • Comments: 19 (7 by maintainers)

Most upvoted comments

cache manipulations don’t help…

The above error went away after I added to “plugins”: "dynamic-import-node" from airbnb/babel-plugin-dynamic-import-node Updated webpack to latest, voila! it’s works!