Repository: gregberge/svgr
Pull request #663 (2022-01-07 08:49:12)

breaking-change(plugin-svgo): handle potential errors from optimize
## Summary

`svg.optimize()` can in [some cases](https://github.com/svg/svgo/blob/700f2031699e35da29efc19da74b8765aea127e6/lib/svgo.js#L36) return error, when passed SVG is invalid. There are some cases also, for instance when removing some namespace attributes that the SVG is invalid as a cause of that. When this happens `data` returned from plugin-svgo will be undefined, [causing this](https://github.com/gregberge/svgr/blob/main/packages/core/src/transform.ts#L13) to be undefined in the following iteration of the loop. This again causes obscure errors in some cases when running the following plugins. 

This depends on fixing the types for svgo: https://github.com/DefinitelyTyped/DefinitelyTyped/pull/58031 


Note: Marked this as breaking-change as it explicitly throws an error. There are other ways to handle this (propagate error etc), but feels like showing error here is better than just ignoring it.

This PR does not fix consumers of `plugin-svgo` to handle error.

## Test plan

Added test case to ensure invalid svg throws error.

vercel[bot]: This pull request is being automatically deployed with Vercel ([learn more](https://vercel.link/github-learn-more)).  
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: [https://vercel.com/gregberge/svgr/3hmLWE2pwyVsYzQxa5SENBeyd7FZ](https://vercel.com/gregberge/svgr/3hmLWE2pwyVsYzQxa5SENBeyd7FZ)  
✅ Preview: *In Progress*


gregberge: Hello @mikaelbr, I don't think it is a real breaking change here.

Patch:
diff --git a/packages/plugin-svgo/src/index.ts b/packages/plugin-svgo/src/index.ts
index 38a1e26..f36c58b 100644
--- a/packages/plugin-svgo/src/index.ts
+++ b/packages/plugin-svgo/src/index.ts
@@ -5,8 +5,13 @@ import type { Plugin } from '@svgr/core'
 const svgoPlugin: Plugin = (code, config, state) => {
   if (!config.svgo) return code
   const svgoConfig = getSvgoConfig(config, state)
-  const { data } = optimize(code, { ...svgoConfig, path: state.filePath })
-  return data
+  const result = optimize(code, { ...svgoConfig, path: state.filePath })
+
+  if (result.modernError) {
+    throw result.modernError
+  }
+
+  return result.data
 }
 
 export default svgoPlugin


Test patch:
diff --git a/packages/plugin-svgo/src/index.test.ts b/packages/plugin-svgo/src/index.test.ts
index 63e2c71..ca1dd4f 100644
--- a/packages/plugin-svgo/src/index.test.ts
+++ b/packages/plugin-svgo/src/index.test.ts
@@ -51,6 +51,21 @@ describe('svgo', () => {
     expect(result).toMatchSnapshot()
   })
 
+  it('throws error on invalid svg input', () => {
+    const errorSvg = `<?xml version="1.0" encoding="UTF-8"?>
+  <svg width="88px" height="88px" viewBox="0 0 88 88" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <path d=M51,37 L37,51" id="Shape" class="shape"></path>
+  </svg>`
+
+    expect(() =>
+      svgo(
+        errorSvg,
+        { svgo: true, runtimeConfig: true },
+        { ...state, filePath: path.join(__dirname, '../__fixtures__/svgo') },
+      ),
+    ).toThrowError()
+  })
+
   it('uses `state.filePath` to detect configuration', () => {
     const result = svgo(
       baseSvg,