Loadable-components: SSR App but client only loadable-components v5

[radum]

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?

[gregberge]

Hello @radum, I think it is a bug in the loadable babel plugin, I will try to fix it! Thanks!

[gregberge]

And yes it should work without the SSR part set up.

[gregberge]

@radum I can't reproduce the bug.

I set up a repo with your babel config, I copy pasted your code in it and it does not work.

Can you give me your whole file input?

[radum]

@neoziro Yeah let me strip it down. I will get back to you ASAP.

[radum]

@neoziro Thank you for your help. I actually realised where my problem was:

addComponent = comp => {
    console.log(`Loading ${comp} component...`);

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

    this.setState({
        components: this.state.components.concat(AsyncComp)
    });
};

componentDidMount() {
    const compTest = 'Header';
    const components = [compTest];
    components.map(comp => this.addComponent(comp));
}

I was loading the component using the code above and that was triggering the error, if I rewrite the function like this addComponent(comp) { works just fine.

I am basically loading components dynamically from a data prop and then render them on the page like this:

const componentsElements = components.map(Component => (
    <Component
        key={nanoid()}
    />
));

if (data) {
    return(
        <Fragment>
            {componentsElements}
        </Fragment>
    );
}

The code I had before using a normal import(./../../components/${comp}).then(component => worked fine but with loadable failed because on how I have written the function.

Not sure if this is still a bug or not.

[gregberge]

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

[helly0d]

Hi,

I am actually struggling with the same error, and same log, just that I use my own wbpack and babel configs, but they are inspired from razzle.

module.exports = () => {
  return {
    presets: [
      [require.resolve("@babel/preset-env"), { modules: false }],
      [require.resolve("@babel/preset-react"), { development: env !== "production" }],
    ],
    plugins: [
      // TC39 Stage 2
      require.resolve("@babel/plugin-proposal-export-namespace-from"),
      // TC39 Stage 3
      require.resolve("@babel/plugin-syntax-dynamic-import"),
      require.resolve("@babel/plugin-syntax-import-meta"),
      require.resolve("@babel/plugin-proposal-class-properties"),
      require.resolve("@babel/plugin-proposal-json-strings"),

      require.resolve("@loadable/babel-plugin"),

      ...(env === "production" ? [require.resolve("babel-plugin-transform-react-remove-prop-types")] : []),

    ],
  };
};

Sample code:

import React, { Component } from "react";
import loadable from "@loadable/component";


const Page = loadable((props) => import(`./${props.page}`));

export default class Routes extends Component {
  render() {
    return (
      <div>
        <Page page="notFound" />
      </div>
    );
  }
}

Error:

./routes/index.jsx
Module build failed (from /home/helly0d/my-project/node_modules/babel-loader/lib/index.js):
TypeError: Property params expected type of array but got null
    at validate (/home/helly0d/my-project/node_modules/@babel/core/node_modules/@babel/types/lib/definitions/utils.js:161:13)
    at Object.validate (/home/helly0d/my-project/node_modules/@babel/core/node_modules/@babel/types/lib/definitions/utils.js:172:7)
    at validate (/home/helly0d/my-project/node_modules/@babel/core/node_modules/@babel/types/lib/validators/validate.js:17:9)
    at builder (/home/helly0d/my-project/node_modules/@babel/core/node_modules/@babel/types/lib/builders/builder.js:46:27)
    at ObjectMethod (/home/helly0d/my-project/node_modules/@babel/core/node_modules/@babel/types/lib/builders/generated/index.js:372:31)
    at /home/helly0d/my-project/node_modules/@loadable/babel-plugin/lib/properties/chunkName.js:136:14
    at /home/helly0d/my-project/node_modules/@loadable/babel-plugin/lib/index.js:71:18
    at Array.map (<anonymous>)
    at PluginPass.CallExpression (/home/helly0d/my-project/node_modules/@loadable/babel-plugin/lib/index.js:70:67)
    at newFn (/home/helly0d/my-project/node_modules/@babel/core/node_modules/@babel/traverse/lib/visitors.js:193:21)
    at NodePath._call (/home/helly0d/my-project/node_modules/@babel/core/node_modules/@babel/traverse/lib/path/context.js:53:20)
    at NodePath.call (/home/helly0d/my-project/node_modules/@babel/core/node_modules/@babel/traverse/lib/path/context.js:40:17)
    at NodePath.visit (/home/helly0d/my-project/node_modules/@babel/core/node_modules/@babel/traverse/lib/path/context.js:88:12)
    at TraversalContext.visitQueue (/home/helly0d/my-project/node_modules/@babel/core/node_modules/@babel/traverse/lib/context.js:118:16)
    at TraversalContext.visitSingle (/home/helly0d/my-project/node_modules/@babel/core/node_modules/@babel/traverse/lib/context.js:90:19)
    at TraversalContext.visit (/home/helly0d/my-project/node_modules/@babel/core/node_modules/@babel/traverse/lib/context.js:146:19)
 @ ./mainApp/index.jsx 24:0-29 71:46-53
 @ ./entryPoints/server/appShell.jsx
 @ ./entryPoints/server/server.jsx
 @ ./entryPoints/server/index.js

I have to say that I did set-up SSR as in the docs.
Until a few days ago I had loadable-components v2.2.3, and I have upgraded to v5 and then this happened. I tried to downgrade to v4 and v3, but the same error is being thrown.
This might help not only me, but the razzle fans out there.

[gregberge]

Hello @radum, thanks for the bug, I will try to reproduce it as soon as I have a moment.

[gregberge]

I tried to reproduce the bug, I installed all babel plugins and specify a configuration like yours, I tried to run babel on your file and I don't have any bug. Any help is welcome.

[radum]

@neoziro I will try to make time to pull out a demo, but the code should work like this.

You have an array of strings (they are actually the name of your React components) and using a for loop you dynamic import all of them based on that array to load them on top of each other.

Imagine there is an API that gives you the components you need to load on a page as an array of strings. And then you dynamic import them based on that string and render them all.

PS: It was @helly0d that said he has the same error. I solved mine differently by refactoring to load those dynamic components using another method.

[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.

[helly0d]

It is a very weird case, at least for me.

I managed to make it work, but it seems that @loadable/babel-plugin uses the context from where it is being required, because otherwise I can't understand why it behaves like this.

So, I have babel-preset.js that looks like this:

module.exports = () => {
  return {
    presets: [
      [require.resolve("@babel/preset-env"), { modules: false }],
      [require.resolve("@babel/preset-react"), { development: env !== "production" }],
    ],
    plugins: [
      // TC39 Stage 2
      require.resolve("@babel/plugin-proposal-export-namespace-from"),
      // TC39 Stage 3
      require.resolve("@babel/plugin-syntax-dynamic-import"),
      require.resolve("@babel/plugin-syntax-import-meta"),
      require.resolve("@babel/plugin-proposal-class-properties"),
      require.resolve("@babel/plugin-proposal-json-strings"),

      require.resolve("@loadable/babel-plugin"),

      ...(env === "production" ? [require.resolve("babel-plugin-transform-react-remove-prop-types")] : []),

    ],
  };
};

and a webpack config file where I do this:

const babelPreset = require("../babel-preset")();

return {
  // ...options options and more options
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        use: [
          {
            loader: require.resolve("babel-loader"),
            options: {
              babelrc: false,
              plugins: [
                ...babelPreset.plugins,
                ...(target === "node" ? [require.resolve("babel-plugin-dynamic-import-node")] : []),
              ]
            },
          },
        ],
      },
 // ....

If I remove require.resolve("@loadable/babel-plugin") from babel-preset.js and manualy place here:

              plugins: [
                ...babelPreset.plugins,
                require.resolve("@loadable/babel-plugin"),
                ...(target === "node" ? [require.resolve("babel-plugin-dynamic-import-node")] : []),
              ]

everything works.

I can't explain why. I initially thought it was because of babel cache, but i redid all the steps with disabled cache and received the error again.

I got to this part by trial and error after analyzing the razzle example, but it still doesn't make no sense to me.

@radum I think you can close the bug, because it seems to be a bad config on my side, even though I think it's kind of weird of why this is the solution to my particular problem.

[gregberge]

Yeah I think it is more a babel config problem than a problem in this library! Thanks for your explanation.