SyntaxError: Unexpected token import

💬 Questions and Help

I am following the guide for the SSR, I arrived at the moment to split in chunks my views.

import loadable from '@loadable/component';
const App = loadable(() => import('../components/App'));
const Home = loadable(() => import('../components/Home'));
const About = loadable(() => import('../components/About'));

export default [
  {
    ...App,
    routes: [
      {
        ...Home,
        path: '/',
        exact: true
      },
      {
        ...About,
        path: '/about'
      }
    ]
  }
];

My first doubt was if I need to install @babel/plugin-syntax-dynamic-import or it is not needed. But I get a runtime error in both cases

return import(… SyntaxError: Unexpected token import

I guess it is because babel is not working well, but if i remove this the loadable components is creating just one build (like it should be).

Above my .babelrc

  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ],
  "plugins": [
    "@loadable/babel-plugin",
    // "@babel/plugin-syntax-dynamic-import",
    "@babel/plugin-transform-runtime",
    "@babel/plugin-proposal-export-default-from",
    "@babel/plugin-proposal-export-namespace-from"
  ]
}

My pacakeges:

     "@babel/cli": "^7.2.3",
    "@babel/core": "^7.2.2",
    "@babel/node": "^7.2.2",
    "@babel/plugin-proposal-export-default-from": "^7.2.0",
    "@babel/plugin-proposal-export-namespace-from": "^7.2.0",
    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
    "@babel/plugin-transform-runtime": "^7.2.0",
    "@babel/preset-env": "^7.2.3",
    "@babel/preset-react": "^7.0.0",
    "@loadable/babel-plugin": "^5.2.2",
    "@loadable/component": "^5.2.2",
    "@loadable/webpack-plugin": "^5.2.2",
    "@loadable/server": "^5.3.0",
    "babel-eslint": "^10.0.1",
    "babel-loader": "^8.0.5",

I run my server like this: "serve": "NODE_ENV=development nodemon --exec babel-node --inspect src/server/index.js",

Any ideas?

thanks!

[gregberge]

As I said, if you have to add babel-plugin-dynamic-import-node, it is because your dynamic import is called server-side. It should not be the case with Loadable Components, on server-side it does a synchronous call.

[ericgio]

I had a similar issue while trying to use SSR and the problem for me was that node couldn’t handle dynamic imports. I tried a few solutions, including adding babel-plugin-dynamic-import-webpack to my .babelrc. That sort of worked, but caused other problems. What finally worked for me was adding babel-plugin-dynamic-import-node only to my @babel/register call:

// In my index.js, which is called by node...
require('@babel/register')({
  plugins: [
    'dynamic-import-node',
  ]
});

Note that adding this plugin to my .babelrc did not work, since both my server- and client-side code call that. With the above, only node is affected.

I’m honestly kind of surprised more people haven’t run into this, though I see at least one other issue mentioning the problem and solution. @neoziro: it might be worth mentioning this plugin in the SSR docs?