CODEWITHSUNDEEP
javascriptreactjswebpacknext.jsreact-lazy-load
Sharanya M
Sharanya M

Reputation: 31

Chunk js file failing (404 Not found) for initial load only

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

Upvotes: 3

Views: 2934

Answers (0)

Related Questions