fix(webpack): fix webpack crash when an error in Linaria happens (#1035)

fixes #1029
callstack · Aug 1, 2022 · 008a5d1 · 008a5d1
1 parent 50bc0c7
commit 008a5d1
Show file tree

Hide file tree

Showing 3 changed files with 90 additions and 73 deletions.
diff --git a/.changeset/popular-trainers-kneel.md b/.changeset/popular-trainers-kneel.md
@@ -0,0 +1,7 @@
+---
+'@linaria/webpack4-loader': patch
+'@linaria/webpack5-loader': patch
+'@linaria/webpack-loader': patch
+---
+
+Fix webpack crash when an error in Linaria happens. (fixes #1029)
diff --git a/packages/webpack4-loader/src/index.ts b/packages/webpack4-loader/src/index.ts
@@ -76,43 +76,48 @@ export default function webpack4Loader(
       preprocessor,
     },
     asyncResolve
-  ).then(async (result: Result) => {
-    if (result.cssText) {
-      let { cssText } = result;
-
-      if (sourceMap) {
-        cssText += `/*# sourceMappingURL=data:application/json;base64,${Buffer.from(
-          result.cssSourceMapText || ''
-        ).toString('base64')}*/`;
+  ).then(
+    async (result: Result) => {
+      if (result.cssText) {
+        let { cssText } = result;
+
+        if (sourceMap) {
+          cssText += `/*# sourceMappingURL=data:application/json;base64,${Buffer.from(
+            result.cssSourceMapText || ''
+          ).toString('base64')}*/`;
+        }
+
+        await Promise.all(
+          result.dependencies?.map((dep) =>
+            asyncResolve(dep, this.resourcePath)
+          ) ?? []
+        );
+
+        getCacheInstance(cacheProvider)
+          .then((cacheInstance) =>
+            cacheInstance.set(this.resourcePath, cssText)
+          )
+          .then(() => {
+            const request = `${outputFileName}!=!${outputCssLoader}?cacheProvider=${encodeURIComponent(
+              cacheProvider ?? ''
+            )}!${this.resourcePath}`;
+            const stringifiedRequest = loaderUtils.stringifyRequest(
+              this,
+              request
+            );
+
+            return this.callback(
+              null,
+              `${result.code}\n\nrequire(${stringifiedRequest});`,
+              castSourceMap(result.sourceMap)
+            );
+          })
+          .catch((err: Error) => this.callback(err));
+        return;
       }
 
-      await Promise.all(
-        result.dependencies?.map((dep) =>
-          asyncResolve(dep, this.resourcePath)
-        ) ?? []
-      );
-
-      getCacheInstance(cacheProvider)
-        .then((cacheInstance) => cacheInstance.set(this.resourcePath, cssText))
-        .then(() => {
-          const request = `${outputFileName}!=!${outputCssLoader}?cacheProvider=${encodeURIComponent(
-            cacheProvider ?? ''
-          )}!${this.resourcePath}`;
-          const stringifiedRequest = loaderUtils.stringifyRequest(
-            this,
-            request
-          );
-
-          return this.callback(
-            null,
-            `${result.code}\n\nrequire(${stringifiedRequest});`,
-            castSourceMap(result.sourceMap)
-          );
-        })
-        .catch((err: Error) => this.callback(err));
-      return;
-    }
-
-    this.callback(null, result.code, castSourceMap(result.sourceMap));
-  });
+      this.callback(null, result.code, castSourceMap(result.sourceMap));
+    },
+    (err: Error) => this.callback(err)
+  );
 }
diff --git a/packages/webpack5-loader/src/index.ts b/packages/webpack5-loader/src/index.ts
@@ -89,44 +89,49 @@ const webpack5Loader: Loader = function webpack5LoaderPlugin(
       preprocessor,
     },
     asyncResolve
-  ).then(async (result: Result) => {
-    if (result.cssText) {
-      let { cssText } = result;
-
-      if (sourceMap) {
-        cssText += `/*# sourceMappingURL=data:application/json;base64,${Buffer.from(
-          result.cssSourceMapText || ''
-        ).toString('base64')}*/`;
-      }
+  ).then(
+    async (result: Result) => {
+      if (result.cssText) {
+        let { cssText } = result;
+
+        if (sourceMap) {
+          cssText += `/*# sourceMappingURL=data:application/json;base64,${Buffer.from(
+            result.cssSourceMapText || ''
+          ).toString('base64')}*/`;
+        }
 
-      await Promise.all(
-        result.dependencies?.map((dep) =>
-          asyncResolve(dep, this.resourcePath)
-        ) ?? []
-      );
-
-      getCacheInstance(cacheProvider)
-        .then((cacheInstance) => cacheInstance.set(this.resourcePath, cssText))
-        .then(() => {
-          const request = `${outputFileName}!=!${outputCssLoader}?cacheProvider=${encodeURIComponent(
-            typeof cacheProvider === 'string' ? cacheProvider : ''
-          )}!${this.resourcePath}`;
-          const stringifiedRequest = JSON.stringify(
-            this.utils.contextify(this.context || this.rootContext, request)
-          );
-
-          return this.callback(
-            null,
-            `${result.code}\n\nrequire(${stringifiedRequest});`,
-            result.sourceMap ?? undefined
-          );
-        })
-        .catch((err: Error) => this.callback(err));
-      return;
-    }
+        await Promise.all(
+          result.dependencies?.map((dep) =>
+            asyncResolve(dep, this.resourcePath)
+          ) ?? []
+        );
+
+        getCacheInstance(cacheProvider)
+          .then((cacheInstance) =>
+            cacheInstance.set(this.resourcePath, cssText)
+          )
+          .then(() => {
+            const request = `${outputFileName}!=!${outputCssLoader}?cacheProvider=${encodeURIComponent(
+              typeof cacheProvider === 'string' ? cacheProvider : ''
+            )}!${this.resourcePath}`;
+            const stringifiedRequest = JSON.stringify(
+              this.utils.contextify(this.context || this.rootContext, request)
+            );
+
+            return this.callback(
+              null,
+              `${result.code}\n\nrequire(${stringifiedRequest});`,
+              result.sourceMap ?? undefined
+            );
+          })
+          .catch((err: Error) => this.callback(err));
+        return;
+      }
 
-    this.callback(null, result.code, result.sourceMap ?? undefined);
-  });
+      this.callback(null, result.code, result.sourceMap ?? undefined);
+    },
+    (err: Error) => this.callback(err)
+  );
 };
 
 export default webpack5Loader;