fix(webpack): fix webpack 5 behaviour with url-loader

gregberge · Nov 12, 2021 · 1a8cc98 · 1a8cc98
1 parent a857bb1
commit 1a8cc98
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 40 deletions.
diff --git a/packages/webpack/src/__snapshots__/index.test.ts.snap b/packages/webpack/src/__snapshots__/index.test.ts.snap
@@ -1,6 +1,31 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`webpack loader should convert file (babel: false) 1`] = `
+exports[`webpack loader supports url-loader 1`] = `
+"var _svg;
+
+import * as React from \\"react\\";
+
+var SvgIcon = function SvgIcon() {
+  return _svg || (_svg = /*#__PURE__*/React.createElement(\\"svg\\", {
+    width: 88,
+    height: 88,
+    xmlns: \\"http://www.w3.org/2000/svg\\"
+  }, /*#__PURE__*/React.createElement(\\"g\\", {
+    stroke: \\"#063855\\",
+    strokeWidth: 2,
+    fill: \\"none\\",
+    fillRule: \\"evenodd\\",
+    strokeLinecap: \\"square\\"
+  }, /*#__PURE__*/React.createElement(\\"path\\", {
+    d: \\"M51 37 37 51M51 51 37 37\\"
+  }))));
+};
+
+export { SvgIcon as ReactComponent };
+export default \\"data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iODhweCIgaGVpZ2h0PSI4OHB4IiB2aWV3Qm94PSIwIDAgODggODgiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDQ2LjIgKDQ0NDk2KSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT5EaXNtaXNzPC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGRlZnM+PC9kZWZzPgogICAgPGcgaWQ9IkJsb2NrcyIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCIgc3Ryb2tlLWxpbmVjYXA9InNxdWFyZSI+CiAgICAgICAgPGcgaWQ9IkRpc21pc3MiIHN0cm9rZT0iIzA2Mzg1NSIgc3Ryb2tlLXdpZHRoPSIyIj4KICAgICAgICAgICAgPHBhdGggZD0iTTUxLDM3IEwzNyw1MSIgaWQ9IlNoYXBlIj48L3BhdGg+CiAgICAgICAgICAgIDxwYXRoIGQ9Ik01MSw1MSBMMzcsMzciIGlkPSJTaGFwZSI+PC9wYXRoPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+Cg==\\""
+`;
+
+exports[`webpack loader transforms file (babel: false) 1`] = `
 "import * as React from \\"react\\";
 
 const SvgIcon = () => /*#__PURE__*/React.createElement(\\"svg\\", {
@@ -20,7 +45,7 @@ const SvgIcon = () => /*#__PURE__*/React.createElement(\\"svg\\", {
 export default SvgIcon;"
 `;
 
-exports[`webpack loader should convert file (typescript: true) 1`] = `
+exports[`webpack loader transforms file (typescript: true) 1`] = `
 "var _g;
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
@@ -46,7 +71,7 @@ var SvgIcon = function SvgIcon(props) {
 export default SvgIcon;"
 `;
 
-exports[`webpack loader should convert file 1`] = `
+exports[`webpack loader transforms file 1`] = `
 "var _svg;
 
 import * as React from \\"react\\";
@@ -70,7 +95,7 @@ var SvgIcon = function SvgIcon() {
 export default SvgIcon;"
 `;
 
-exports[`webpack loader should convert file 2`] = `
+exports[`webpack loader transforms file 2`] = `
 "var _svg;
 
 import * as React from \\"react\\";
@@ -93,27 +118,3 @@ var SvgIcon = function SvgIcon() {
 
 export default SvgIcon;"
 `;
-
-exports[`webpack loader should support url-loader 1`] = `
-"var _svg;
-
-import * as React from \\"react\\";
-
-var SvgIcon = function SvgIcon() {
-  return _svg || (_svg = /*#__PURE__*/React.createElement(\\"svg\\", {
-    width: 88,
-    height: 88,
-    xmlns: \\"http://www.w3.org/2000/svg\\"
-  }, /*#__PURE__*/React.createElement(\\"g\\", {
-    stroke: \\"#063855\\",
-    strokeWidth: 2,
-    fill: \\"none\\",
-    fillRule: \\"evenodd\\",
-    strokeLinecap: \\"square\\"
-  }, /*#__PURE__*/React.createElement(\\"path\\", {
-    d: \\"M51 37 37 51M51 51 37 37\\"
-  }))));
-};
-
-export { SvgIcon as ReactComponent };"
-`;
diff --git a/packages/webpack/src/index.test.ts b/packages/webpack/src/index.test.ts
@@ -33,7 +33,7 @@ function compile(rules: ModuleOptions['rules']) {
 }
 
 describe('webpack loader', () => {
-  it('should convert file (typescript: true)', async () => {
+  it('transforms file (typescript: true)', async () => {
     const source = await compile([
       {
         test: /\.svg$/,
@@ -49,9 +49,9 @@ describe('webpack loader', () => {
     ])
 
     expect(source).toMatchSnapshot()
-  }, 15000)
+  })
 
-  it('should convert file', async () => {
+  it('transforms file', async () => {
     const source = await compile([
       {
         test: /\.svg$/,
@@ -67,9 +67,9 @@ describe('webpack loader', () => {
     ])
 
     expect(source).toMatchSnapshot()
-  }, 15000)
+  })
 
-  it('should convert file', async () => {
+  it('transforms file', async () => {
     const source = await compile([
       {
         test: /\.svg$/,
@@ -85,9 +85,9 @@ describe('webpack loader', () => {
     ])
 
     expect(source).toMatchSnapshot()
-  }, 15000)
+  })
 
-  it('should support url-loader', async () => {
+  it('supports url-loader', async () => {
     const source = await compile([
       {
         test: /\.svg$/,
@@ -104,9 +104,9 @@ describe('webpack loader', () => {
     ])
 
     expect(source).toMatchSnapshot()
-  }, 15000)
+  })
 
-  it('should convert file (babel: false)', async () => {
+  it('transforms file (babel: false)', async () => {
     const source = await compile([
       {
         test: /\.svg$/,
@@ -130,5 +130,5 @@ describe('webpack loader', () => {
     ])
 
     expect(source).toMatchSnapshot()
-  }, 15000)
+  })
 })
diff --git a/packages/webpack/src/index.ts b/packages/webpack/src/index.ts
@@ -83,8 +83,17 @@ function svgrLoader(
     tranformSvg(contents, options, state, callback)
   } else {
     this.fs.readFile(this.resourcePath, (err, result) => {
-      if (err) callback(err)
-      else tranformSvg(String(result), options, state, callback)
+      if (err) {
+        callback(err)
+        return
+      }
+      tranformSvg(String(result), options, state, (err, content) => {
+        if (err) {
+          callback(err)
+          return
+        }
+        callback(null, `${content}\n${previousExport}`)
+      })
     })
   }
 }