SSR App but client only loadable-components v5

I have a working Razzle (Razzle next with babel 7) app and just added loadable-components v5 to it. But only on the client side, I haven’t set up the server part of it.

When I import a component like this:

import loadable from '@loadable/component';

...

const AsyncComp = loadable(comp => import(`./../../components/${comp.id}`));

I get the following babel error:

ERROR in ./src/app/containers/PageContainer/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
TypeError: Property params expected type of array but got null
    at validate (/Users/demo/app_test/node_modules/@babel/types/lib/definitions/utils.js:161:13)
    at Object.validate (/Users/demo/app_test/node_modules/@babel/types/lib/definitions/utils.js:172:7)
    at validate (/Users/demo/app_test/node_modules/@babel/types/lib/validators/validate.js:17:9)
    at builder (/Users/demo/app_test/node_modules/@babel/types/lib/builders/builder.js:46:27)
    at ObjectMethod (/Users/demo/app_test/node_modules/@babel/types/lib/builders/generated/index.js:368:31)
    at /Users/demo/app_test/node_modules/@loadable/babel-plugin/lib/properties/chunkName.js:133:14
    at /Users/demo/app_test/node_modules/@loadable/babel-plugin/lib/index.js:71:18
    at Array.map (<anonymous>)
    at PluginPass.CallExpression (/Users/demo/app_test/node_modules/@loadable/babel-plugin/lib/index.js:70:67)
    at newFn (/Users/demo/app_test/node_modules/@babel/traverse/lib/visitors.js:193:21)
    at NodePath._call (/Users/demo/app_test/node_modules/@babel/traverse/lib/path/context.js:53:20)
    at NodePath.call (/Users/demo/app_test/node_modules/@babel/traverse/lib/path/context.js:40:17)
    at NodePath.visit (/Users/demo/app_test/node_modules/@babel/traverse/lib/path/context.js:88:12)
    at TraversalContext.visitQueue (/Users/demo/app_test/node_modules/@babel/traverse/lib/context.js:118:16)
    at TraversalContext.visitSingle (/Users/demo/app_test/node_modules/@babel/traverse/lib/context.js:90:19)
    at TraversalContext.visit (/Users/demo/app_test/node_modules/@babel/traverse/lib/context.js:146:19)
 @ ./src/app/routes/index.js 1:0-56 10:13-26 15:13-26 20:13-26
 @ ./src/client.js
 @ multi ./node_modules/razzle/config/polyfills.js ./node_modules/razzle-dev-utils/webpackHotDevClient.js ./src/client

My .babelrc file looks like this:

{
  "presets": [
    [
      "@babel/preset-env", {
        "modules": false,
        "useBuiltIns": "usage",
        "debug": false
      }
    ],
    "razzle/babel"
  ],
  "plugins": [
    "@babel/plugin-syntax-dynamic-import",
    "@babel/plugin-transform-runtime",
    "@loadable/babel-plugin"
  ]
}

Before I do more testing and wire up the SSR for loadable-components, my question is this supposed to work without the SSR part set up?

[helly0d]

@radum Yes, I still seem to have the same error as you do, even though I am actually having the code more or else copy-pasted from the docs, not trying to do anything fishy.

@neoziro I might be having babel-plugins in conflict or something in the webpack config, because otherwise everything should be working perfectly according to your docs and most of the guys using it.

I will try to debug it further, but unfortunately I am a bit behind schedule with some tasks and it will take a few days to come back with an answer.

[gregberge]

I think it is not a bug, your function was not correctly written. I close it. Thanks for your time!