Unable to build react-native-windows app (new Architecture) with react-native-svg

[pcprinz]

Description

react-native-svg prevents react-native-windows apps with the new architecture from building. I tested it with [email protected] and [email protected] both with the cpp-app template from rnw which implements the new architecture. Then I installed the most recent version of react-native-svg (15.9.0) and the react-native-windows app doesn't build any more:

 i Build configuration: Debug
 i Build platform: x64
 × Building Solution: C:\dev\RNWTests\node_modules\react-native-svg\windows\RNSVG\Fabric.idl(164): error MIDL2011...
 × Build failed with message 2:10>C:\dev\RNWTests\node_modules\react-native-svg\windows\RNSVG\Fabric.idl(18): error MIDL2011: [msg]unresolved type declaration [context]: Microsoft.ReactNative.Composition.CreateCompositionComponentViewArgs [ Parameter 'args' of Procedure 'SvgView' ( RuntimeClass 'RNSVG.SvgView' ) ] [C:\dev\RNWTests\node_modules\react-native-svg\windows\RNSVG\RNSVG.vcxproj]. Check your build configuration.
Command failed. Re-run the command with --logging for more information.
error Command failed with exit code 2302.

Detailed error message

3>C:\dev\RNWTests\node_modules\react-native-svg\windows\RNSVG\Fabric.idl(18): error MIDL2011: [msg]unresolved type declaration [context]: Microsoft.ReactNative.Composition.CreateCo
       mpositionComponentViewArgs [ Parameter 'args' of Procedure 'SvgView' ( RuntimeClass 'RNSVG.SvgView' ) ] [C:\dev\RNWTests\node_modules\react-native-svg\windows\RNSVG\RNSVG.vcxproj 
       ]
     3>C:\dev\RNWTests\node_modules\react-native-svg\windows\RNSVG\Fabric.idl(28): error MIDL2011: [msg]unresolved type declaration [context]: Microsoft.ReactNative.CreateComponentViewA 
       rgs [ Parameter 'args' of Procedure 'RenderableView' ( RuntimeClass 'RNSVG.RenderableView' ) ] [C:\dev\RNWTests\node_modules\react-native-svg\windows\RNSVG\RNSVG.vcxproj]
     3>C:\dev\RNWTests\node_modules\react-native-svg\windows\RNSVG\Fabric.idl(38): error MIDL2011: [msg]unresolved type declaration [context]: Microsoft.ReactNative.CreateComponentViewA 
       rgs [ Parameter 'args' of Procedure 'RectView' ( RuntimeClass 'RNSVG.RectView' ) ] [C:\dev\RNWTests\node_modules\react-native-svg\windows\RNSVG\RNSVG.vcxproj]
     3>C:\dev\RNWTests\node_modules\react-native-svg\windows\RNSVG\Fabric.idl(45): error MIDL2011: [msg]unresolved type declaration [context]: Microsoft.ReactNative.CreateComponentViewA 
       rgs [ Parameter 'args' of Procedure 'CircleView' ( RuntimeClass 'RNSVG.CircleView' ) ] [C:\dev\RNWTests\node_modules\react-native-svg\windows\RNSVG\RNSVG.vcxproj]
     3>C:\dev\RNWTests\node_modules\react-native-svg\windows\RNSVG\Fabric.idl(52): error MIDL2011: [msg]unresolved type declaration [context]: Microsoft.ReactNative.CreateComponentViewA 
       rgs [ Parameter 'args' of Procedure 'EllipseView' ( RuntimeClass 'RNSVG.EllipseView' ) ] [C:\dev\RNWTests\node_modules\react-native-svg\windows\RNSVG\RNSVG.vcxproj]
     3>C:\dev\RNWTests\node_modules\react-native-svg\windows\RNSVG\Fabric.idl(59): error MIDL2011: [msg]unresolved type declaration [context]: Microsoft.ReactNative.CreateComponentViewA 
       rgs [ Parameter 'args' of Procedure 'LineView' ( RuntimeClass 'RNSVG.LineView' ) ] [C:\dev\RNWTests\node_modules\react-native-svg\windows\RNSVG\RNSVG.vcxproj]
     3>C:\dev\RNWTests\node_modules\react-native-svg\windows\RNSVG\Fabric.idl(66): error MIDL2011: [msg]unresolved type declaration [context]: Microsoft.ReactNative.CreateComponentViewA 
       rgs [ Parameter 'args' of Procedure 'PathView' ( RuntimeClass 'RNSVG.PathView' ) ] [C:\dev\RNWTests\node_modules\react-native-svg\windows\RNSVG\RNSVG.vcxproj]
     3>C:\dev\RNWTests\node_modules\react-native-svg\windows\RNSVG\Fabric.idl(73): error MIDL2011: [msg]unresolved type declaration [context]: Microsoft.ReactNative.CreateComponentViewA 
       rgs [ Parameter 'args' of Procedure 'UseView' ( RuntimeClass 'RNSVG.UseView' ) ] [C:\dev\RNWTests\node_modules\react-native-svg\windows\RNSVG\RNSVG.vcxproj]
     3>C:\dev\RNWTests\node_modules\react-native-svg\windows\RNSVG\Fabric.idl(80): error MIDL2011: [msg]unresolved type declaration [context]: Microsoft.ReactNative.CreateComponentViewA 
       rgs [ Parameter 'args' of Procedure 'ImageView' ( RuntimeClass 'RNSVG.ImageView' ) ] [C:\dev\RNWTests\node_modules\react-native-svg\windows\RNSVG\RNSVG.vcxproj]
     3>C:\dev\RNWTests\node_modules\react-native-svg\windows\RNSVG\Fabric.idl(87): error MIDL2011: [msg]unresolved type declaration [context]: Microsoft.ReactNative.CreateComponentViewA 
       rgs [ Parameter 'args' of Procedure 'GroupView' ( RuntimeClass 'RNSVG.GroupView' ) ] [C:\dev\RNWTests\node_modules\react-native-svg\windows\RNSVG\RNSVG.vcxproj]
     3>C:\dev\RNWTests\node_modules\react-native-svg\windows\RNSVG\Fabric.idl(94): error MIDL2011: [msg]unresolved type declaration [context]: Microsoft.ReactNative.CreateComponentViewA 
       rgs [ Parameter 'args' of Procedure 'TextView' ( RuntimeClass 'RNSVG.TextView' ) ] [C:\dev\RNWTests\node_modules\react-native-svg\windows\RNSVG\RNSVG.vcxproj]
     3>C:\dev\RNWTests\node_modules\react-native-svg\windows\RNSVG\Fabric.idl(101): error MIDL2011: [msg]unresolved type declaration [context]: Microsoft.ReactNative.CreateComponentView 
       Args [ Parameter 'args' of Procedure 'TSpanView' ( RuntimeClass 'RNSVG.TSpanView' ) ] [C:\dev\RNWTests\node_modules\react-native-svg\windows\RNSVG\RNSVG.vcxproj]
     3>C:\dev\RNWTests\node_modules\react-native-svg\windows\RNSVG\Fabric.idl(108): error MIDL2011: [msg]unresolved type declaration [context]: Microsoft.ReactNative.CreateComponentView 
       Args [ Parameter 'args' of Procedure 'DefsView' ( RuntimeClass 'RNSVG.DefsView' ) ] [C:\dev\RNWTests\node_modules\react-native-svg\windows\RNSVG\RNSVG.vcxproj]
     3>C:\dev\RNWTests\node_modules\react-native-svg\windows\RNSVG\Fabric.idl(115): error MIDL2011: [msg]unresolved type declaration [context]: Microsoft.ReactNative.CreateComponentView 
       Args [ Parameter 'args' of Procedure 'SymbolView' ( RuntimeClass 'RNSVG.SymbolView' ) ] [C:\dev\RNWTests\node_modules\react-native-svg\windows\RNSVG\RNSVG.vcxproj]
     3>C:\dev\RNWTests\node_modules\react-native-svg\windows\RNSVG\Fabric.idl(122): error MIDL2011: [msg]unresolved type declaration [context]: Microsoft.ReactNative.CreateComponentView 
       Args [ Parameter 'args' of Procedure 'ClipPathView' ( RuntimeClass 'RNSVG.ClipPathView' ) ] [C:\dev\RNWTests\node_modules\react-native-svg\windows\RNSVG\RNSVG.vcxproj]
     3>C:\dev\RNWTests\node_modules\react-native-svg\windows\RNSVG\Fabric.idl(129): error MIDL2011: [msg]unresolved type declaration [context]: Microsoft.ReactNative.CreateComponentView 
       Args [ Parameter 'args' of Procedure 'MarkerView' ( RuntimeClass 'RNSVG.MarkerView' ) ] [C:\dev\RNWTests\node_modules\react-native-svg\windows\RNSVG\RNSVG.vcxproj]
     3>C:\dev\RNWTests\node_modules\react-native-svg\windows\RNSVG\Fabric.idl(136): error MIDL2011: [msg]unresolved type declaration [context]: Microsoft.ReactNative.CreateComponentView 
       Args [ Parameter 'args' of Procedure 'MaskView' ( RuntimeClass 'RNSVG.MaskView' ) ] [C:\dev\RNWTests\node_modules\react-native-svg\windows\RNSVG\RNSVG.vcxproj]
     3>C:\dev\RNWTests\node_modules\react-native-svg\windows\RNSVG\Fabric.idl(143): error MIDL2011: [msg]unresolved type declaration [context]: Microsoft.ReactNative.CreateComponentView 
       Args [ Parameter 'args' of Procedure 'BrushView' ( RuntimeClass 'RNSVG.BrushView' ) ] [C:\dev\RNWTests\node_modules\react-native-svg\windows\RNSVG\RNSVG.vcxproj]
     3>C:\dev\RNWTests\node_modules\react-native-svg\windows\RNSVG\Fabric.idl(150): error MIDL2011: [msg]unresolved type declaration [context]: Microsoft.ReactNative.CreateComponentView 
       Args [ Parameter 'args' of Procedure 'LinearGradientView' ( RuntimeClass 'RNSVG.LinearGradientView' ) ] [C:\dev\RNWTests\node_modules\react-native-svg\windows\RNSVG\RNSVG.vcxproj 
       ]
     3>C:\dev\RNWTests\node_modules\react-native-svg\windows\RNSVG\Fabric.idl(157): error MIDL2011: [msg]unresolved type declaration [context]: Microsoft.ReactNative.CreateComponentView 
       Args [ Parameter 'args' of Procedure 'RadialGradientView' ( RuntimeClass 'RNSVG.RadialGradientView' ) ] [C:\dev\RNWTests\node_modules\react-native-svg\windows\RNSVG\RNSVG.vcxproj 
       ]
     3>C:\dev\RNWTests\node_modules\react-native-svg\windows\RNSVG\Fabric.idl(164): error MIDL2011: [msg]unresolved type declaration [context]: Microsoft.ReactNative.CreateComponentView 
       Args [ Parameter 'args' of Procedure 'PatternView' ( RuntimeClass 'RNSVG.PatternView' ) ] [C:\dev\RNWTests\node_modules\react-native-svg\windows\RNSVG\RNSVG.vcxproj]

[...]

× Building Solution
 × Build failed with message 3:10>C:\dev\RNWTests\node_modules\react-native-svg\windows\RNSVG\Fabric.idl(18): error MIDL2011: [msg]unresolved type declaration [context]: Microsoft.ReactNative.Composition.CreateCompositionComponentViewArgs [ Parameter 'args' of Procedure 'SvgView' ( RuntimeClass 'RNSVG.SvgView' ) ] [C:\dev\RNWTests\node_modules\react-native-svg\windows\RNSVG\RNSVG.vcxproj]. Check your build configuration.
 i Gathering MSBuild data for telemetry.
 i Loading properties from msbuildproperties.g.json
Command failed with error MSBuildError: 3:10>C:\dev\RNWTests\node_modules\react-native-svg\windows\RNSVG\Fabric.idl(18): error MIDL2011: [msg]unresolved type declaration [context]: Microsoft.ReactNative.Composition.CreateCompositionComponentViewArgs [ Parameter 'args' of Procedure 'SvgView' ( RuntimeClass 'RNSVG.SvgView' ) ] [C:\dev\RNWTests\node_modules\react-native-svg\windows\RNSVG\RNSVG.vcxproj]
Your telemetry sessionId was 5e32dd50e98abbc4069b97edcac1608c
error Command failed with exit code 2302.

Repos:

• https://github.com/pcprinz/react-native-windows-tests/tree/0.76-failing-rn-svg
• https://github.com/pcprinz/react-native-windows-tests/tree/0.75-failing-rn-svg

Steps to reproduce

1. install react-native at Version 0.75+
2. install react-native-windows at the same version but with --template cpp-app
3. install react-native-svg at Version 15.9.0
4. run npx react-native run-windows

Snack or a link to a repository

https://github.com/pcprinz/react-native-windows-tests/tree/0.75-failing-rn-svg

SVG version

15.9.0

React Native version

0.75.4

Platforms

Android, iOS, macOS, Web

JavaScript runtime

Hermes

Workflow

React Native

Architecture

Fabric (New Architecture)

Build type

None

Device

None

Device model

No response

Acknowledgements

Yes