From b73232c00454306890aeaf8f6765dcd5b0958cef Mon Sep 17 00:00:00 2001
From: Artem Malko <artem.malko@gmail.com>
Date: Fri, 11 Feb 2022 23:17:26 +0700
Subject: [PATCH 1/2] docs(guides): clarify some caveats about dynamic import
 manual preload via script tag webpack/webpack/issues/14874

---
 src/content/guides/code-splitting.mdx | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

diff --git a/src/content/guides/code-splitting.mdx b/src/content/guides/code-splitting.mdx
index 7f73c30b4b97..86fde9979247 100644
--- a/src/content/guides/code-splitting.mdx
+++ b/src/content/guides/code-splitting.mdx
@@ -34,6 +34,7 @@ contributors:
   - Adarah
   - atesgoral
   - snitin315
+  - artem-malko
 related:
   - title: <link rel="prefetch/preload" /> in webpack
     url: https://medium.com/webpack/link-rel-prefetch-preload-in-webpack-51a52358f84c
@@ -425,6 +426,23 @@ When a page which uses the `ChartComponent` is requested, the charting-library-c
 
 T> Using `webpackPreload` incorrectly can actually hurt performance, so be careful when using it.
 
+Sometimes you need to have your own control over preload. For example, preload of any dynamic import can be done via async script. This can be useful in case of streamming server side rendering.
+
+```js
+const lazyComp = () => import('DynamicComponent').catch((error) => {
+  // Do something with the error. For example, we can retry the request in case of any net error
+});
+```
+
+If the script loading will fail before webpack starts loading of that script by itself (webpack just creates a script tag to load its code, if that script is not on a page), that catch handler won't start till [chunkLoadTimeout](/configuration/output/#outputchunkloadtimeout) is not passed. This behavior can be unexpected. But it's explainable — webpack can not throw any error, cause webpack doesn't know, that script failed. Webpack will add onerror handler to the script right after the error has happen.
+
+To prevent such problem you can add your own onerror handler, which removes the script in case of any error:
+
+```js
+<script src="https://example.com/dist/dynamicComponent.js" async onerror="this.remove()"></script>
+```
+In that case, errored script will be removed. Webpack will create its own script and any error will be processed without any timeouts.
+
 ## Bundle Analysis
 
 Once you start splitting your code, it can be useful to analyze the output to check where modules have ended up. The [official analyze tool](https://github.com/webpack/analyse) is a good place to start. There are some other community-supported options out there as well:

From 2da413130a458ffcaaaf57e643be8d3168d5a2f3 Mon Sep 17 00:00:00 2001
From: Artem Malko <artem.malko@gmail.com>
Date: Sat, 12 Feb 2022 01:15:00 +0700
Subject: [PATCH 2/2] docs(guides): fix lint errors

---
 src/content/guides/code-splitting.mdx | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

diff --git a/src/content/guides/code-splitting.mdx b/src/content/guides/code-splitting.mdx
index 86fde9979247..2274d1568489 100644
--- a/src/content/guides/code-splitting.mdx
+++ b/src/content/guides/code-splitting.mdx
@@ -429,18 +429,25 @@ T> Using `webpackPreload` incorrectly can actually hurt performance, so be caref
 Sometimes you need to have your own control over preload. For example, preload of any dynamic import can be done via async script. This can be useful in case of streamming server side rendering.
 
 ```js
-const lazyComp = () => import('DynamicComponent').catch((error) => {
-  // Do something with the error. For example, we can retry the request in case of any net error
-});
+const lazyComp = () =>
+  import('DynamicComponent').catch((error) => {
+    // Do something with the error.
+    // For example, we can retry the request in case of any net error
+  });
 ```
 
 If the script loading will fail before webpack starts loading of that script by itself (webpack just creates a script tag to load its code, if that script is not on a page), that catch handler won't start till [chunkLoadTimeout](/configuration/output/#outputchunkloadtimeout) is not passed. This behavior can be unexpected. But it's explainable — webpack can not throw any error, cause webpack doesn't know, that script failed. Webpack will add onerror handler to the script right after the error has happen.
 
 To prevent such problem you can add your own onerror handler, which removes the script in case of any error:
 
-```js
-<script src="https://example.com/dist/dynamicComponent.js" async onerror="this.remove()"></script>
+```html
+<script
+  src="https://example.com/dist/dynamicComponent.js"
+  async
+  onerror="this.remove()"
+></script>
 ```
+
 In that case, errored script will be removed. Webpack will create its own script and any error will be processed without any timeouts.
 
 ## Bundle Analysis