Repository: gregberge/svgr (ts)

Issue:
@svgr/rollup 6 with breaks the default import handled by another plugin
<!-- Love SVGR? Please consider supporting our collective: 👉  https://opencollective.com/svgr/donate -->

## 🐛 Bug Report

Hey, since the version 6 update I'm facing the following issue:

This error is being raised when used with `rollup`, since version 6, following the Rollup and `@rollup/plugin-url` [documentation](https://react-svgr.com/docs/rollup/#using-with-rollupplugin-url)

```bash
[!] Error: 'default' is not exported by cart.svg, imported by index.js
https://rollupjs.org/guide/en/#error-name-is-not-exported-by-module
index.js (1:7)
1: import cartUrl, { ReactComponent as Cart } from './cart.svg';
          ^
2: 
3: export { cartUrl, Cart };
Error: 'default' is not exported by cart.svg, imported by index.js
    at error (/home/pierredo/Dev/svg-import-named/node_modules/rollup/dist/shared/rollup.js:158:30)
    at Module.error (/home/pierredo/Dev/svg-import-named/node_modules/rollup/dist/shared/rollup.js:12382:16)
    at Module.traceVariable (/home/pierredo/Dev/svg-import-named/node_modules/rollup/dist/shared/rollup.js:12767:29)
    at Module.getVariableForExportName (/home/pierredo/Dev/svg-import-named/node_modules/rollup/dist/shared/rollup.js:12558:35)
    at Module.includeAllExports (/home/pierredo/Dev/svg-import-named/node_modules/rollup/dist/shared/rollup.js:12612:39)
    at Graph.includeStatements (/home/pierredo/Dev/svg-import-named/node_modules/rollup/dist/shared/rollup.js:22901:36)
    at Graph.build (/home/pierredo/Dev/svg-import-named/node_modules/rollup/dist/shared/rollup.js:22816:14)
    at async rollupInternal (/home/pierredo/Dev/svg-import-named/node_modules/rollup/dist/shared/rollup.js:23423:9)
    at async build (/home/pierredo/Dev/svg-import-named/node_modules/rollup/dist/bin/rollup:1546:20)
    at async runRollup (/home/pierredo/Dev/svg-import-named/node_modules/rollup/dist/bin/rollup:1730:21)

```

## To Reproduce

- Update to `@svgr/rollup` v6
- Setup the configuration per https://react-svgr.com/docs/rollup/#using-with-rollupplugin-url
- `rollup -c`

Specifying `exportType: 'named'` as an option doesn't change anything.

Works as expected with `"@svgr/rollup": "^5.0.0",`. Breaks with `"@svgr/rollup": "^6.0.0",`

## Expected behavior

The bundle should be generated the same way it was with version 5.

## Link to repl or repo (highly encouraged)

https://github.com/Pierre-Do/svg-import-named

## Run `npx envinfo --system --binaries --npmPackages @svgr/core,@svgr/cli,@svgr/webpack,@svgr/rollup --markdown --clipboard`

```bash
## System:
 - OS: Linux 5.15 Linux Mint 20.2 (Uma)
 - CPU: (8) x64 Intel(R) Core(TM) i7-8550U CPU @ 1.80GHz
 - Memory: 11.40 GB / 31.09 GB
 - Container: Yes
 - Shell: 5.8 - /bin/zsh
## Binaries:
 - Node: 16.13.0 - ~/.nvm/versions/node/v16.13.0/bin/node
 - Yarn: 1.22.15 - /usr/bin/yarn
 - npm: 8.1.0 - ~/.nvm/versions/node/v16.13.0/bin/npm
## npmPackages:
 - @svgr/rollup: ^6.0.0 => 6.0.0 
```


Pull request:
fix: fix previous export system
Fixes #635


Patch:
diff --git a/packages/babel-plugin-transform-svg-component/src/types.ts b/packages/babel-plugin-transform-svg-component/src/types.ts
index b463435..8c1c665 100644
--- a/packages/babel-plugin-transform-svg-component/src/types.ts
+++ b/packages/babel-plugin-transform-svg-component/src/types.ts
@@ -6,7 +6,7 @@ export interface TemplateVariables {
   interfaces: t.TSInterfaceDeclaration[]
   props: (t.ObjectPattern | t.Identifier)[]
   imports: t.ImportDeclaration[]
-  exports: (t.VariableDeclaration | t.ExportDeclaration)[]
+  exports: (t.VariableDeclaration | t.ExportDeclaration | t.Statement)[]
   jsx: t.JSXElement
 }
 
diff --git a/packages/babel-plugin-transform-svg-component/src/variables.ts b/packages/babel-plugin-transform-svg-component/src/variables.ts
index 54f24ce..844e638 100644
--- a/packages/babel-plugin-transform-svg-component/src/variables.ts
+++ b/packages/babel-plugin-transform-svg-component/src/variables.ts
@@ -1,4 +1,4 @@
-import { types as t } from '@babel/core'
+import { types as t, template } from '@babel/core'
 import type { Options, TemplateVariables, JSXRuntimeImport } from './types'
 
 const tsOptionalPropertySignature = (
@@ -98,7 +98,8 @@ export const getVariables = ({
   const interfaces: t.TSInterfaceDeclaration[] = []
   const props: (t.Identifier | t.ObjectPattern)[] = []
   const imports: t.ImportDeclaration[] = []
-  const exports: (t.VariableDeclaration | t.ExportDeclaration)[] = []
+  const exports: (t.VariableDeclaration | t.ExportDeclaration | t.Statement)[] =
+    []
   const ctx = {
     importSource: opts.importSource ?? defaultImportSource,
     exportIdentifier: t.identifier(opts.state.componentName),
@@ -234,6 +235,14 @@ export const getVariables = ({
         t.exportSpecifier(ctx.exportIdentifier, t.identifier(opts.namedExport)),
       ]),
     )
+    if (opts.state.caller?.previousExport) {
+      const previousExportAst = template.ast(opts.state.caller.previousExport)
+      exports.push(
+        ...(Array.isArray(previousExportAst)
+          ? previousExportAst
+          : [previousExportAst]),
+      )
+    }
   } else {
     exports.push(t.exportDefaultDeclaration(ctx.exportIdentifier))
   }
diff --git a/packages/rollup/src/index.ts b/packages/rollup/src/index.ts
index 7d0438f..753f5ee 100644
--- a/packages/rollup/src/index.ts
+++ b/packages/rollup/src/index.ts
@@ -41,6 +41,7 @@ export interface Options extends Config {
 }
 
 const plugin: PluginImpl<Options> = (options = {}) => {
+  const EXPORT_REGEX = /(module\.exports *= *|export default)/
   const filter = createFilter(options.include || '**/*.svg', options.exclude)
   const { babel = true } = options
 
@@ -52,11 +53,7 @@ const plugin: PluginImpl<Options> = (options = {}) => {
 
       const load = fs.readFileSync(id, 'utf8')
 
-      const exportMatches =
-        data.match(/^module.exports\s*=\s*(.*)/) ||
-        data.match(/export\sdefault\s(.*)/)
-
-      const previousExport = exportMatches ? data : null
+      const previousExport = EXPORT_REGEX.test(data) ? data : null
 
       const jsCode = await transform(load, options, {
         filePath: id,


Test patch:
diff --git a/packages/babel-plugin-transform-svg-component/src/__snapshots__/index.test.ts.snap b/packages/babel-plugin-transform-svg-component/src/__snapshots__/index.test.ts.snap
index a11759b..a5d510b 100644
--- a/packages/babel-plugin-transform-svg-component/src/__snapshots__/index.test.ts.snap
+++ b/packages/babel-plugin-transform-svg-component/src/__snapshots__/index.test.ts.snap
@@ -119,7 +119,10 @@ exports[`plugin javascript with "namedExport" option and "previousExport" state
 
 const SvgComponent = () => <svg><g /></svg>;
 
-export { SvgComponent as Component };"
+export { SvgComponent as Component };
+var img = new Image();
+img.src = '...';
+export default img;"
 `;
 
 exports[`plugin javascript with "native" and "expandProps" option adds import from "react-native-svg" and adds props 1`] = `
@@ -336,7 +339,10 @@ exports[`plugin typescript with "namedExport" option and "previousExport" state
 
 const SvgComponent = () => <svg><g /></svg>;
 
-export { SvgComponent as Component };"
+export { SvgComponent as Component };
+var img = new Image();
+img.src = '...';
+export default img;"
 `;
 
 exports[`plugin typescript with "native" and "expandProps" option adds import from "react-native-svg" and adds props 1`] = `
diff --git a/packages/babel-plugin-transform-svg-component/src/index.test.ts b/packages/babel-plugin-transform-svg-component/src/index.test.ts
index f4e5f89..61d67c9 100644
--- a/packages/babel-plugin-transform-svg-component/src/index.test.ts
+++ b/packages/babel-plugin-transform-svg-component/src/index.test.ts
@@ -158,7 +158,9 @@ describe('plugin', () => {
         const { code } = testPlugin(language)('<svg><g /></svg>', {
           state: {
             componentName: 'SvgComponent',
-            caller: { previousExport: 'export default "logo.svg";' },
+            caller: {
+              previousExport: `var img = new Image(); img.src = '...'; export default img;`,
+            },
           },
           namedExport: 'Component',
         })
diff --git a/packages/rollup/src/__snapshots__/index.test.ts.snap b/packages/rollup/src/__snapshots__/index.test.ts.snap
index 0bc11c9..00a1d3a 100644
--- a/packages/rollup/src/__snapshots__/index.test.ts.snap
+++ b/packages/rollup/src/__snapshots__/index.test.ts.snap
@@ -27,7 +27,10 @@ exports[`rollup loader should convert file with previousExport of image plugin 1
 
 const SvgFile = props => <svg width={48} height={1} xmlns=\\"http://www.w3.org/2000/svg\\" {...props}><path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" /></svg>;
 
-export { SvgFile as ReactComponent };"
+export { SvgFile as ReactComponent };
+var img = new Image();
+img.src = 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iNDhweCIgaGVpZ2h0PSIxcHgiIHZpZXdCb3g9IjAgMCA0OCAxIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCA0Ni4yICg0NDQ5NikgLSBodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2ggLS0+CiAgICA8dGl0bGU+UmVjdGFuZ2xlIDU8L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CiAgICA8ZGVmcz48L2RlZnM+CiAgICA8ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0iMTktU2VwYXJhdG9yIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTI5LjAwMDAwMCwgLTE1Ni4wMDAwMDApIiBmaWxsPSIjMDYzODU1Ij4KICAgICAgICAgICAgPGcgaWQ9IkNvbnRyb2xzL1NldHRpbmdzIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg4MC4wMDAwMDAsIDAuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICA8ZyBpZD0iQ29udGVudCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMC4wMDAwMDAsIDY0LjAwMDAwMCkiPgogICAgICAgICAgICAgICAgICAgIDxnIGlkPSJHcm91cCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjQuMDAwMDAwLCA1Ni4wMDAwMDApIj4KICAgICAgICAgICAgICAgICAgICAgICAgPGcgaWQ9Ikdyb3VwLTIiPgogICAgICAgICAgICAgICAgICAgICAgICAgICAgPHJlY3QgaWQ9IlJlY3RhbmdsZS01IiB4PSIyNSIgeT0iMzYiIHdpZHRoPSI0OCIgaGVpZ2h0PSIxIj48L3JlY3Q+CiAgICAgICAgICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPgo=';
+export default img;"
 `;
 
 exports[`rollup loader should convert file with previousExport of url plugin 1`] = `
@@ -35,7 +38,8 @@ exports[`rollup loader should convert file with previousExport of url plugin 1`]
 
 const SvgFile = props => <svg width={48} height={1} xmlns=\\"http://www.w3.org/2000/svg\\" {...props}><path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" /></svg>;
 
-export { SvgFile as ReactComponent };"
+export { SvgFile as ReactComponent };
+export default \\"data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20width%3D%2248px%22%20height%3D%221px%22%20viewBox%3D%220%200%2048%201%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%20%20%20%20%20%20%20%20%3Ctitle%3ERectangle%205%3C%2Ftitle%3E%20%20%20%20%3Cdesc%3ECreated%20with%20Sketch.%3C%2Fdesc%3E%20%20%20%20%3Cdefs%3E%3C%2Fdefs%3E%20%20%20%20%3Cg%20id%3D%22Page-1%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%20%20%20%20%20%20%20%20%3Cg%20id%3D%2219-Separator%22%20transform%3D%22translate%28-129.000000%2C%20-156.000000%29%22%20fill%3D%22%23063855%22%3E%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20id%3D%22Controls%2FSettings%22%20transform%3D%22translate%2880.000000%2C%200.000000%29%22%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20id%3D%22Content%22%20transform%3D%22translate%280.000000%2C%2064.000000%29%22%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20id%3D%22Group%22%20transform%3D%22translate%2824.000000%2C%2056.000000%29%22%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20id%3D%22Group-2%22%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Crect%20id%3D%22Rectangle-5%22%20x%3D%2225%22%20y%3D%2236%22%20width%3D%2248%22%20height%3D%221%22%3E%3C%2Frect%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fg%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fg%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fg%3E%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fg%3E%20%20%20%20%20%20%20%20%3C%2Fg%3E%20%20%20%20%3C%2Fg%3E%3C%2Fsvg%3E\\";"
 `;
 
 exports[`rollup loader should convert file without babel 1`] = `
diff --git a/packages/webpack/src/__snapshots__/index.test.ts.snap b/packages/webpack/src/__snapshots__/index.test.ts.snap
index fbf7d19..1750e3a 100644
--- a/packages/webpack/src/__snapshots__/index.test.ts.snap
+++ b/packages/webpack/src/__snapshots__/index.test.ts.snap
@@ -22,6 +22,7 @@ var SvgIcon = function SvgIcon() {
 };
 
 export { SvgIcon as ReactComponent };
+export default \\"data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iODhweCIgaGVpZ2h0PSI4OHB4IiB2aWV3Qm94PSIwIDAgODggODgiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDQ2LjIgKDQ0NDk2KSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT5EaXNtaXNzPC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGRlZnM+PC9kZWZzPgogICAgPGcgaWQ9IkJsb2NrcyIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCIgc3Ryb2tlLWxpbmVjYXA9InNxdWFyZSI+CiAgICAgICAgPGcgaWQ9IkRpc21pc3MiIHN0cm9rZT0iIzA2Mzg1NSIgc3Ryb2tlLXdpZHRoPSIyIj4KICAgICAgICAgICAgPHBhdGggZD0iTTUxLDM3IEwzNyw1MSIgaWQ9IlNoYXBlIj48L3BhdGg+CiAgICAgICAgICAgIDxwYXRoIGQ9Ik01MSw1MSBMMzcsMzciIGlkPSJTaGFwZSI+PC9wYXRoPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+Cg==\\";
 export default \\"data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iODhweCIgaGVpZ2h0PSI4OHB4IiB2aWV3Qm94PSIwIDAgODggODgiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDQ2LjIgKDQ0NDk2KSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT5EaXNtaXNzPC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGRlZnM+PC9kZWZzPgogICAgPGcgaWQ9IkJsb2NrcyIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCIgc3Ryb2tlLWxpbmVjYXA9InNxdWFyZSI+CiAgICAgICAgPGcgaWQ9IkRpc21pc3MiIHN0cm9rZT0iIzA2Mzg1NSIgc3Ryb2tlLXdpZHRoPSIyIj4KICAgICAgICAgICAgPHBhdGggZD0iTTUxLDM3IEwzNyw1MSIgaWQ9IlNoYXBlIj48L3BhdGg+CiAgICAgICAgICAgIDxwYXRoIGQ9Ik01MSw1MSBMMzcsMzciIGlkPSJTaGFwZSI+PC9wYXRoPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+Cg==\\""
 `;