full dynamic import ssr not working

🐛 Bug Report

I encountered the Invariant Violation: loadable: cannot find {chunk-name} in stats while trying to use full dynamic import with loadable import on server side

To Reproduce

const AsyncText = loadable((props) => import('./brands/${props.brand}/DynamicText'));

and in another file

<AsyncText brand="af" />

Expected behavior

I expected the component at ./brands/af/DynamicText to render on server side.

Link to repl or repo (highly encouraged)

https://github.com/lauterry/perfect-react-app/tree/full-dynamic-import-ssr

Run BRAND=af npm run build then BRAND=af npm run start

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

Paste the results here:

## System:
 - OS: macOS 10.14.3
 - CPU: (8) x64 Intel(R) Core(TM) i7-4770HQ CPU @ 2.20GHz
 - Memory: 615.75 MB / 16.00 GB
 - Shell: 5.3 - /bin/zsh
## Binaries:
 - Node: 8.10.0 - /usr/local/bin/node
 - Yarn: 1.13.0 - /usr/local/bin/yarn
 - npm: 6.4.1 - /usr/local/bin/npm
 - Watchman: 4.9.0 - /usr/local/bin/watchman
## npmPackages:
 - @loadable/babel-plugin: ^5.7.0 => 5.7.0 
 - @loadable/component: ^5.7.0 => 5.7.0 
 - @loadable/server: ^5.7.0 => 5.7.0 
 - @loadable/webpack-plugin: ^5.7.0 => 5.7.0 

[lauterry]

Ok I found the problem thank to this article https://wanago.io/2018/08/20/webpack-4-course-part-eight-dynamic-imports-with-prefetch-and-preload/

I replace

const AsyncText = loadable((props) => import('./brands/${props.brand}/DynamicText'));

with

const AsyncText = loadable((props) => import('./brands/${props.path}'));

and

<AsyncText brand="af" />

with

<AsyncText brand="af/DynamicText" />

and it works as expected.

Hope it will helps anyone who misunderstand how webpack deals with full dynamic import.

Best

[lauterry]

@revskill10 This article should help you 😃

https://engineering.thetrainline.com/optimising-js-bundles-for-internationalisation-378cb28b835e