"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; const headings = [{ "data": { "id": "the-dilemma", "hProperties": { "id": "the-dilemma" } }, "depth": 2, "value": "The dilemma" }, { "data": { "id": "the-solution", "hProperties": { "id": "the-solution" } }, "depth": 2, "value": "The solution" }, { "data": { "id": "create-the-wrapper", "hProperties": { "id": "create-the-wrapper" } }, "depth": 3, "value": "Create the wrapper" }, { "data": { "id": "handle-the-retries", "hProperties": { "id": "handle-the-retries" } }, "depth": 3, "value": "Handle the retries" }, { "data": { "id": "handle-the-refreshes", "hProperties": { "id": "handle-the-refreshes" } }, "depth": 3, "value": "Handle the refreshes" }, { "data": { "id": "multiple-lazy-components-on-the-same-page", "hProperties": { "id": "multiple-lazy-components-on-the-same-page" } }, "depth": 3, "value": "Multiple lazy components on the same page" }, { "data": { "id": "conclusion", "hProperties": { "id": "conclusion" } }, "depth": 2, "value": "Conclusion" }]; const readingTime = { "minutes": 3, "words": 915, "text": "3 min read" }; const frontmatter = undefined; function _createMdxContent(props) { const _components = { a: "a", code: "code", h2: "h2", h3: "h3", li: "li", p: "p", pre: "pre", span: "span", ul: "ul", ..._provideComponents(), ...props.components }, {Info} = _components; if (!Info) _missingMdxReference("Info", true); return _jsxs(_Fragment, { children: [_jsxs(_components.h2, { id: "the-dilemma", children: ["The dilemma", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#the-dilemma", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Nowadays, software development is moving faster under the popular \"move fast and break things\" philosophy. No judgment here - it's just the way things are. However, this fast pace can sometimes lead to issues, especially when it comes to loading components in React." }), "\n", _jsxs(_components.p, { children: ["If you are working on a project that uses ", _jsx(_components.a, { href: "https://react.dev/reference/react/lazy", children: "React.lazy" }), " to load components on demand, you might have encountered some issues like ", _jsx(_components.code, { children: "ChunkLoadError" }), " and ", _jsx(_components.code, { children: "Loading chunk failed" }), ". Here are some possible reasons:"] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "There's a network issue, for example, the user's internet connection is slow or unstable." }), "\n", _jsx(_components.li, { children: "The user is on an obsolete version of the app, and the browser is trying to load a chunk that doesn't exist anymore." }), "\n"] }), "\n", _jsx(_components.p, { children: "Usually, a simple refresh of the page can solve the problem, but it's not a great experience for the user. Imagine if a white screen appears when the user is navigating to another route - it's not a good look for your app." }), "\n", _jsx(_components.p, { children: "Can we balance the need for speed with the need for a smooth user experience? Sure. Let me show you how (with TypeScript, of course)." }), "\n", _jsxs(_components.h2, { id: "the-solution", children: ["The solution", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#the-solution", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "A brute force solution can be to save all the versions of the chunks in the server, thus no more the \"missing chunk\" issue. As your app grows, this solution can become unfeasible due to increasing disk space requirements, and it still doesn't solve the network issue." }), "\n", _jsxs(_components.p, { children: ["Given the fact that a retry or a refresh can solve the problem, we can implement these solutions in our code. Since the issue usually happens when the user is navigating to another route, we can solve it even without the user noticing. All we need to do is to build a wrapper around the ", _jsx(_components.code, { children: "React.lazy" }), " function that will handle the retries and the refreshes."] }), "\n", _jsx(_components.p, { children: "There are already some great articles on how to implement this kind of solution, so I'll focus on the idea and inner workings of the solution." }), "\n", _jsx(Info, { children: _jsxs(_components.p, { children: ["The final code is available in this ", _jsx(_components.a, { href: "https://github.com/silverhand-io/react-safe-lazy", children: "GitHub\nrepository" }), " and the ", _jsx(_components.code, { children: "react-safe-lazy" }), " package is\navailable on ", _jsx(_components.a, { href: "https://www.npmjs.com/package/react-safe-lazy", children: "NPM" }), ". The package is fully tested,\nextremely portable (minzipped ~700B), and ready to be used in your project."] }) }), "\n", _jsxs(_components.h3, { id: "create-the-wrapper", children: ["Create the wrapper", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#create-the-wrapper", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["The first step is to create a wrapper around the ", _jsx(_components.code, { children: "React.lazy" }), " function:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-ts", children: "import { lazy, type ComponentType } from 'react';\n\n// Use generic for the sake of a correct type inference\nconst safeLazy = (importFunction: () => Promise<{ default: ComponentType }>) => {\n return lazy(async () => {\n return await importFunction();\n });\n};\n" }) }), "\n", _jsxs(_components.h3, { id: "handle-the-retries", children: ["Handle the retries", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#handle-the-retries", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["For network issues, we can handle the retries by wrapping the ", _jsx(_components.code, { children: "importFunction" }), " in a ", _jsx(_components.code, { children: "tryImport" }), " function:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-ts", children: "const safeLazy = (importFunction: () => Promise<{ default: ComponentType }>) => {\n let retries = 0;\n const tryImport = async () => {\n try {\n return await importFunction();\n } catch (error) {\n // Retry 3 times max\n if (retries < 3) {\n retries++;\n return tryImport();\n }\n throw error;\n }\n };\n\n return lazy(async () => {\n return await tryImport();\n });\n};\n" }) }), "\n", _jsxs(_components.p, { children: ["Looks simple, right? You can also implement the ", _jsx(_components.a, { href: "https://en.wikipedia.org/wiki/Exponential_backoff", children: "exponential backoff" }), " algorithm to handle the retries more efficiently."] }), "\n", _jsxs(_components.h3, { id: "handle-the-refreshes", children: ["Handle the refreshes", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#handle-the-refreshes", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "For the obsolete version issue, we can handle the refreshes by catching the error and refreshing the page:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-ts", children: "const safeLazy = (importFunction: () => Promise<{ default: ComponentType }>) => {\n // ...tryImport function\n\n return lazy(async () => {\n try {\n return await tryImport();\n } catch (error) {\n window.location.reload();\n // Return a dummy component to match the return type of React.lazy\n return { default: () => null };\n }\n });\n};\n" }) }), "\n", _jsxs(_components.p, { children: ["However, this implementation is very dangerous, as it may cause an infinite loop of refreshes when the error cannot be solved by a refresh. Meanwhile, the app state will be lost during the refresh. So we need the help of ", _jsx(_components.code, { children: "sessionStorage" }), " to store the message that we've tried to refresh the page:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-ts", children: "const safeLazy = (importFunction: () => Promise<{ default: ComponentType }>) => {\n // ...tryImport function\n\n return lazy(async () => {\n try {\n const component = await tryImport();\n\n // Clear the sessionStorage when the component is loaded successfully\n sessionStorage.removeItem('refreshed');\n\n return component;\n } catch (error) {\n if (!sessionStorage.getItem('refreshed')) {\n sessionStorage.setItem('refreshed', 'true');\n window.location.reload();\n return { default: () => null };\n }\n\n // Throw the error if the component cannot be loaded after a refresh\n throw error;\n }\n });\n};\n" }) }), "\n", _jsxs(_components.p, { children: ["Now, when we catch the error from the ", _jsx(_components.code, { children: "safeLazy" }), " function, we know it is something that cannot be solved by a refresh."] }), "\n", _jsxs(_components.h3, { id: "multiple-lazy-components-on-the-same-page", children: ["Multiple lazy components on the same page", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#multiple-lazy-components-on-the-same-page", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["There's still a hidden pitfall with the current implementation. If you have multiple lazy components on the same page, the infinite loop of refreshes can still happen because other components may reset the ", _jsx(_components.code, { children: "sessionStorage" }), " value. To solve this issue, we can use a unique key for each component:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-ts", children: "const safeLazy = (importFunction: () => Promise<{ default: ComponentType }>) => {\n // ...tryImport function\n\n // The key can be anything unique for each component\n const storageKey = importFunction.toString();\n return lazy(async () => {\n try {\n const component = await tryImport();\n\n // Clear the sessionStorage when the component is loaded successfully\n sessionStorage.removeItem(storageKey);\n\n return component;\n } catch (error) {\n if (!sessionStorage.getItem(storageKey)) {\n sessionStorage.setItem(storageKey, 'true');\n window.location.reload();\n return { default: () => null };\n }\n\n // Throw the error if the component cannot be loaded after a refresh\n throw error;\n }\n });\n};\n" }) }), "\n", _jsxs(_components.p, { children: ["Now, each component will have its own ", _jsx(_components.code, { children: "sessionStorage" }), " key, and the infinite loop of refreshes will be avoided. We can continue to nitpick the solution, for example:"] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Gather all the keys in an array, thus only one storage key is needed." }), "\n", _jsx(_components.li, { children: "Set a refresh limit to refresh the page more than one time before throwing an error." }), "\n"] }), "\n", _jsxs(_components.p, { children: ["But I think you get the idea. A comprehensive TypeScript solution with tests and configurations is available in the ", _jsx(_components.a, { href: "https://github.com/silverhand-io/react-safe-lazy", children: "GitHub repository" }), ". I've also published the ", _jsx(_components.code, { children: "react-safe-lazy" }), " package on ", _jsx(_components.a, { href: "https://www.npmjs.com/package/react-safe-lazy", children: "NPM" }), ", so you can use it in your project right away."] }), "\n", _jsxs(_components.h2, { id: "conclusion", children: ["Conclusion", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#conclusion", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["Software development is a delicate work, and even the smallest details can take effort to resolve. I hope this article can help you to gracefully handle the issues with ", _jsx(_components.code, { children: "React.lazy" }), " and improve the user experience of your app."] })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = { ..._provideComponents(), ...props.components }; return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { headings, readingTime, frontmatter, default: MDXContent }; function _missingMdxReference(id, component) { throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); }