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

[valorloff]

💬 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?

[domilin]

babelrc's setting

plugins: [
'@babel/plugin-syntax-dynamic-import',
'@loadable/babel-plugin'
]

[theKashey]

This is a major issue of __webpack's__ dependency - acorn.

• https://github.com/webpack/webpack/issues/8656
• https://npm.community/t/packages-with-peerdependencies-are-incorrectly-hoisted/4794

It, actually, should work with 4.28.4, but something went wrong.
In short - wipe your yarn.lock, should help.

[valorloff]

Thank a lot, but it's going hard :(
don't help,
wait for best times

[theKashey]

Try to locate your caches(/node_modules/.cache/), or enforce babel-loader to have those - and then wipe without mercy.

[valorloff]

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!

[gregberge]

Hmm, yes it could be needed but you should not need it. Because on the server, we call requireSync and not requireAsync.

[valorloff]

Maybe, but it works

[ericgio]

@valorloff: I had the same (or very similar) issue and adding babel-plugin-dynamic-import-node solved my problem as well.

[gregberge]

The syntax should just be fine, if you got this issue you are probably doing something wrong. I repeat babel-plugin-dynamic-import-node is not required to run Loadable Components.

[valorloff]

in my opinion, you can't do SSR with Routes without "dynamic-import-node" (node only) in babel config

[gregberge]

You should build your server-side code with webpack, then it will take care of replacing dynamic import by require for you. Most of time this is better to build your code with webpack because you import assets in your code.

[valorloff]

did you mean "build your server-side code with babel" ?

[valorloff]

if you look at SSR example's:

"scripts": {
    "dev": "nodemon src/server/main.js",

this code unbabelised, perhaps this is why an error
SyntaxError: Unexpected token import occurs

[gregberge]

Nop, build your server-side code with webpack.

[gregberge]

https://github.com/smooth-code/loadable-components/blob/master/examples/server-side-rendering/webpack.config.babel.js#L50

There is no dynamic import in the server, just in the client part, builded by webpack for client and for node. Two targets.

[valorloff]

as soon as you import routes with dynamic imported components on server,
above error occurs. Why I can't use "dynamic-import-node" in this case?
Could you show what you mean about "You should build your server-side code with webpack" ?

[gregberge]

I shown you in the previous comment. But if it works fine with the babel plugin, then it is fine.

[valorloff]

no, without dynamic-import-node routes on server with dynamic components don't works. I mean app, based on this SSR example

[gregberge]

The example works without the plugin, it is a fact. It also works in all web applications we are building at Smooth Code. So it is an issue on your side. I close it.