2

I'm trying to implement code splitting using react JS + Next JS to reduce Initial load time of the page. But when I start my UI Service and try to run the webpage, a chunk file is created successfully with 200 status code but immediately another file ending with .hot-update.js is created and failing with status : 404 not found and started reloading the page. After page reload only js chunk file is created successfully and .hot-update.js is not created and page is working as expected.

enter image description here

Unhandled Runtime Error ChunkLoadError: Loading hot update chunk libs_ui-featured-components_components_src_index_ts-_f2550 failed. (error: http://localhost:3000/_next/static/webpack/libs_ui-featured-components_components_src_index_ts-_f2550.da2dad3d316b2229.hot-update.js)

const Dropdown = React.lazy(() => import("path to component").then(({ Dropdown }) => ({ default: Dropdown })))

What is the reason behind this and is there any way to not let that chunk file fail in initial load.

Note: I don't have any webpack config file created in my project

Sharanya M
  • 21
  • 4
  • See if this solution works for you: https://stackoverflow.com/a/67659159/3202440 – kavigun Sep 08 '22 at 06:30
  • If this doesn't work, you could also try the solutions listed down in this article: https://rollbar.com/blog/javascript-chunk-load-error/ Hope this helps. Happy coding! :) – kavigun Sep 08 '22 at 06:35
  • @kavigun I have already gone through both the links. But it didn't resolve the issue – Sharanya M Sep 08 '22 at 06:59
  • Does the same issue happen if you use [`next/dynamic`](https://nextjs.org/docs/advanced-features/dynamic-import#example) to dynamically load the component instead? – juliomalves Sep 09 '22 at 23:26
  • Yes. This is happening for both next/dynamic & React.lazy – Sharanya M Sep 12 '22 at 05:49

0 Answers0