Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Error of dynamic component and "Loading chunk * failed" #4642

Closed
comus opened this issue Jun 21, 2018 · 4 comments · Fixed by #4639
Closed

Error of dynamic component and "Loading chunk * failed" #4642

comus opened this issue Jun 21, 2018 · 4 comments · Fixed by #4639

Comments

@comus
Copy link

comus commented Jun 21, 2018

Bug report

you may see the video first: https://cl.ly/1Y0g0J43273y

Describe the bug

each page has a dynamic component.
link to one of other pages, and the dynamic component load failed

To Reproduce

example: https://github.com/comus/with-dynamic-import

  1. rm -rf .next (clear build cache first)
  2. yarn dev
  3. go to localhost:3000/
  4. click link "hello2"
  5. error

Expected behavior

go to every page without error

Screenshots

https://cl.ly/1Y0g0J43273y

System information

  • OS: mac
  • Browser (if applies) chrome
  • Version of Next.js: 6.0.3

Additional context

none

@comus
Copy link
Author

comus commented Jun 21, 2018

@timneutkens any thoughts?

@comus
Copy link
Author

comus commented Jun 21, 2018

above is next@6.0.3

shows error: "GET http://localhost:3000/_next/webpack/6-undefined.js 404 (Not Found)"

below i try next@6.0.4-canary.8

also have errors but a little bit different

shows: "GET http://localhost:3000/_next/webpack/6.js 404 (Not Found)", without undefined hash string

screenshot:
https://www.dropbox.com/s/mnflngnxckszilg/Screenshot%202018-06-21%2017.38.06.png?dl=0

@stramel
Copy link
Contributor

stramel commented Jun 21, 2018

Duplicate of #3775

@comus
Copy link
Author

comus commented Jun 21, 2018

thx.

finally, my temporary solution for development environment:

  1. create /lib/common.js and dynamic-import all the dynamic components
const dynamics = () => [
  import('../components/hello1'),
  import('../components/hello2'),
  import('../components/hello3'),
  import('../components/hello4')
]
  1. i don't use above function, but every page import common.js file
import '../lib/common'

Thats it. the common.js file helps webpack/bootstrap to create a correct chunks mapping list during development environment, so temporary say bye to those errors

script.src = __webpack_require__.p + "" + ({"0":"main.js","1":"bundles/pages/_error.js","2":"bundles/pages/_app.js","4":"chunks/components_hello1_2118a1d2a4935c3fb995190faa8dbd95","5":"chunks/components_hello4_4c239e4dc0cd2618c3e111f41c791a1c","6":"chunks/components_hello3_693127fc8d6e8d58856e50574974e451","7":"chunks/components_hello2_23440136ce0953a1f9b2387ab3c13db4","8":"bundles/pages/index.js"}[chunkId]||chunkId) + ".js";

for production, just comment out import '../lib/common' or just leave it here

@lock lock bot locked as resolved and limited conversation to collaborators Jul 24, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants