Gatsby SSR error. Failed Building static HTML for pages

🐛 Bug Report

During gatsby build get an error:

  failed Building static HTML for pages

  4 | export default function About() {
  5 |   const path = 'CustomLoaded';
> 6 |   const ModuleComponent = loadable(() => import(`../component/${path}`));
    |                                   ^
  7 | 
  8 |   return (
  9 |     <div>


  WebpackError: TypeError: Cannot read property 'call' of undefined
  
  - about.js:6 
    src/pages/about.js:6:35
  
  - loadable.esm.js:205 
    node_modules/@loadable/component/dist/loadable.esm.js:205:1
  
  - loadable.esm.js:141 
    node_modules/@loadable/component/dist/loadable.esm.js:141:1

To Reproduce

gatsby build

Expected behavior

Build without errors.

Link to repl or repo (highly encouraged)

Please, find minimal working example here: https://github.com/MaxBoltik/loadable-components-bug

Run npx envinfo --system --binaries --npmPackages @loadable/component,@loadable/server,@loadable/webpack-plugin,@loadable/babel-plugin --markdown --clipboard

## System:
 - OS: Linux 5.4 Ubuntu 18.04.4 LTS (Bionic Beaver)
 - CPU: (4) x64 Intel(R) Core(TM) i7-4510U CPU @ 2.00GHz
 - Memory: 317.04 MB / 7.66 GB
 - Container: Yes
 - Shell: 4.4.20 - /bin/bash
## Binaries:
 - Node: 14.0.0 - ~/.nvm/versions/node/v14.0.0/bin/node
 - npm: 6.14.4 - ~/.nvm/versions/node/v14.0.0/bin/npm
 - Watchman: 20200802.200524.0 - /usr/local/bin/watchman
## npmPackages:
 - @loadable/babel-plugin: ^5.13.0 => 5.13.0 
 - @loadable/component: ^5.13.1 => 5.13.1 
 - @loadable/server: ^5.13.1 => 5.13.1 
 - @loadable/webpack-plugin: ^5.13.0 => 5.13.0 

[theKashey]

So there are good news and bad news:

Good news

• you are using loadable in a little bit “wrong” way, and it’s more or less expected to fail

// create it once
const LoadableComponent = loadable(({name}) => import(`../component/${name}`));

const componentName = 'SomeLoadableComponent';
export default function About() {

  return (
    <div>
      <h1>About</h1>
      // use specify the component name here
      <LoadableComponent name={componentName} />
    </div>
  );
}

Bad news

Look like “full dynamic import” is just working as expected with Gatsby, and chunks referred using it just not included. I’ve checked module cache, and components are not there.

[theKashey]

What do you mean?

That the “run time” problem in #618 is your problem.

do you have some workarounds to fix the problem

I don’t have a solution unless I have a problem. The minimal use case you’ve provided should be enough to find the root cause and fix it. But it would be not today.