Dont allow import {ReactComponent} from "./svg"

vercel · Jun 3, 2021 · 4feec9b · 4feec9b
1 parent bd02321
commit 4feec9b
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 55 deletions.
diff --git a/packages/next-codemod/lib/cra-to-next/global-css-transform.ts b/packages/next-codemod/lib/cra-to-next/global-css-transform.ts
@@ -3,7 +3,7 @@ import { API, FileInfo, Options } from 'jscodeshift'
 
 export const globalCssContext = {
   cssImports: new Set<string>(),
-  hasReactSvgImport: false,
+  reactSvgImports: new Set<string>(),
 }
 const globalStylesRegex = /(?<!\.module)\.(css|scss|sass)$/i
 
@@ -51,7 +51,7 @@ export default function transformer(
           })
 
           if (isComponentImport) {
-            globalCssContext.hasReactSvgImport = true
+            globalCssContext.reactSvgImports.add(file.path)
           }
         }
       }

diff --git a/packages/next-codemod/transforms/cra-to-next.ts b/packages/next-codemod/transforms/cra-to-next.ts
@@ -131,10 +131,15 @@ class CraTransform {
     await this.createNextConfig()
     await this.updateGitIgnore()
 
-    // TODO: should we create .babelrc even if {ReactComponent} svg import
-    // isn't used?
-    if (globalCssContext.hasReactSvgImport) {
-      await this.createBabelrc()
+    if (globalCssContext.reactSvgImports.size > 0) {
+      // This de-opts webpack 5 since svg/webpack doesn't support webpack 5 yet,
+      // so we don't support this automatically
+      fatalMessage(
+        `Error: import {ReactComponent} from './logo.svg' is not supported, please use normal SVG imports to continue.\n` +
+          `React SVG imports found in:\n${[
+            ...globalCssContext.reactSvgImports,
+          ].join('\n')}`
+      )
     }
     await this.createPages()
   }
@@ -398,18 +403,6 @@ export default function Page(props) {
         name: 'next',
         version: 'latest',
       },
-      ...(globalCssContext.hasReactSvgImport
-        ? [
-            {
-              name: 'babel-plugin-named-asset-import',
-              version: 'latest',
-            },
-            {
-              name: '@svgr/webpack',
-              version: 'latest',
-            },
-          ]
-        : []),
     ]
     const packageName = this.isCra ? 'react-scripts' : 'vite'
     const packagesToRemove = {
@@ -505,35 +498,6 @@ export default function Page(props) {
     this.logModify('.gitignore')
   }
 
-  private async createBabelrc() {
-    if (!this.isDryRun) {
-      await fs.promises.writeFile(
-        path.join(this.appDir, '.babelrc'),
-        JSON.stringify(
-          {
-            presets: ['next/babel'],
-            plugins: [
-              [
-                'babel-plugin-named-asset-import',
-                {
-                  loaderMap: {
-                    svg: {
-                      ReactComponent:
-                        '@svgr/webpack?-svgo,+titleProp,+ref![path]',
-                    },
-                  },
-                },
-              ],
-            ],
-          },
-          null,
-          2
-        )
-      )
-    }
-    this.logCreate('.babelrc')
-  }
-
   private async createNextConfig() {
     if (!this.isDryRun) {
       const { proxy, homepage } = this.packageJsonData
@@ -562,15 +526,9 @@ module.exports = craCompat({${
         }
   env: {
     PUBLIC_URL: '${homepagePath === '/' ? '' : homepagePath || ''}'
-  },${
-    globalCssContext.hasReactSvgImport
-      ? `
-  // @svgr/webpack does not support webpack 5 yet
-  // remove the custom .babelrc to enable the below config`
-      : ''
-  }
+  },
   future: {
-    webpack5: ${JSON.stringify(!globalCssContext.hasReactSvgImport)}
+    webpack5: true
   }
 })
 `