From 1a8cc9885874dca204e5d62037bf8df546f76b42 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Greg=20Berg=C3=A9?= Date: Fri, 12 Nov 2021 08:50:08 +0100 Subject: [PATCH] fix(webpack): fix webpack 5 behaviour with url-loader --- .../src/__snapshots__/index.test.ts.snap | 57 ++++++++++--------- packages/webpack/src/index.test.ts | 20 +++---- packages/webpack/src/index.ts | 13 ++++- 3 files changed, 50 insertions(+), 40 deletions(-) diff --git a/packages/webpack/src/__snapshots__/index.test.ts.snap b/packages/webpack/src/__snapshots__/index.test.ts.snap index f2d6ea96..fbf7d199 100644 --- 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 index ddea406b..59b9bf66 100644 --- 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 index 62c6efe5..778940c7 100644 --- 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}`) + }) }) } }