Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

@loadable/babel-plugin not support webpack magic comments

See original GitHub issue

🐛 Bug Report

@loadable/babel-plugin、Module not found

As long as I remove @loadable/babel-plugin from babel.config.json it compiles correctly.

ERROR in ./src/components/router/index.tsx
Module not found: Error: Can't resolve '@/pages/' in 'D:\htdocs\react\react-app\src\components\router'
 @ ./src/components/router/index.tsx 54:13-44 26:11-30:15
 @ ./src/components/application/index.tsx
 @ ./src/server.tsx

The code reporting the error is:

const Page = loadable((props: any) => import(/* webpackChunkName: "pages/[request]" */`@/pages/${props.path}`), {
  cacheKey: props => props.path
});

I configured resolve.alias in webpack, The error persists even though I use relative path.

To Reproduce

react-app.

git clone -b 3.x https://github.com/kaysonwu/react-app.git

yarn install && yarn build:server

Expected behavior

Compile correctly

Link to repl or repo (highly encouraged)

react-app.

## System:
 - OS: Windows 10 10.0.18363
 - CPU: (8) x64 Intel(R) Core(TM) i5-8250U CPU @ 1.60GHz
 - Memory: 1.74 GB / 7.89 GB
## Binaries:
 - Node: 12.13.1
 - Yarn: 1.21.1
 - npm: 6.13.4
## npmPackages:
 - @loadable/babel-plugin: ^5.12.0 => 5.12.0 
 - @loadable/component: ^5.12.0 => 5.12.0
 - @loadable/server: ^5.12.0 => 5.12.0
 - @loadable/webpack-plugin: ^5.12.0 => 5.12.0

Issue Analytics

State:
Created 4 years ago
Comments:14 (10 by maintainers)

Top GitHub Comments

1reaction

theKasheycommented, Mar 15, 2020

/* webpackChunkName: "pages/[request]" */ is the issue. Remove it and it would be ok. Probably this is what babel plugin is breaking by a some reason.

PS: add modules:false to your babel config.

0reactions

kaysonwucommented, Mar 23, 2020

@gregberge @theKashey Who can evaluate it? Thank you!

Top Results From Across the Web

Babel plugin - Loadable Components

Magic comments. To gives you flexibility and portability, the babel plugin supports magic comment. This way you can create portable "load" functions. To...

angular8.0 dynamic import not support webpack magic ...

It's working when you build for development mode only. Make sure to set the flag namedChunks in Angular.json to true before building. build:...

Fixing WebpackChunkName for Dynamic Imports - Time to Hack

Are the Webpack Magic Comments webpackChunkName not effective and working with Babel? See how to Fix it and Tips to avoid related problems....

Module Methods - webpack

Version 2 of webpack supports ES6 module syntax natively, meaning you can use ... For a full list of these magic comments see...

babel-plugin-smart-webpack-import: Documentation - Openbase

Keeps other magic comments from Webpack in-tact while adding our ones. ... "plugins": [ "babel-plugin-smart-webpack-import", "@loadable/babel-plugin" ].