fix(react): fix SVG imports from CSS modules

nrwl · Dec 19, 2022 · 241a0fd · 241a0fd
1 parent 915dc25
commit 241a0fd
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 31 deletions.
diff --git a/packages/react/plugins/webpack.ts b/packages/react/plugins/webpack.ts
@@ -5,40 +5,21 @@ import ReactRefreshPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
 export function getWebpackConfig(config: Configuration) {
   config.module.rules.push({
     test: /\.svg$/,
-    oneOf: [
-      // If coming from JS/TS or MDX file, then transform into React component using SVGR.
+    issuer: /\.(js|ts|md)x?$/,
+    use: [
       {
-        issuer: /\.(js|ts|md)x?$/,
-        use: [
-          {
-            loader: require.resolve('@svgr/webpack'),
-            options: {
-              svgo: false,
-              titleProp: true,
-              ref: true,
-            },
-          },
-          {
-            loader: require.resolve('url-loader'),
-            options: {
-              limit: 10000, // 10kB
-              name: '[name].[hash:7].[ext]',
-              esModule: false,
-            },
-          },
-        ],
+        loader: require.resolve('@svgr/webpack'),
+        options: {
+          svgo: false,
+          titleProp: true,
+          ref: true,
+        },
       },
-      // Fallback to plain URL loader.
       {
-        use: [
-          {
-            loader: require.resolve('url-loader'),
-            options: {
-              limit: 10000, // 10kB
-              name: '[name].[hash:7].[ext]',
-            },
-          },
-        ],
+        loader: require.resolve('file-loader'),
+        options: {
+          name: '[name].[hash].[ext]',
+        },
       },
     ],
   });

diff --git a/scripts/depcheck/missing.ts b/scripts/depcheck/missing.ts
@@ -96,6 +96,7 @@ const IGNORE_MATCHES_IN_PACKAGE = {
     'babel-plugin-emotion',
     'babel-plugin-styled-components',
     'css-loader',
+    'file-loader',
     'less-loader',
     'react-refresh',
     'rollup',