react-native-svg模块解析错误：运行yarn storybook时报错

环境信息 #

• react-native-web-linear-gradient版本：^1.1.2
• 依赖的react-native-svg版本：^13.8.0

错误详情 #

ModuleNotFoundError: Module not found: Error: Can't resolve 'react-native/Libraries/NativeComponent/NativeComponentRegistry' in '<project-root>/node_modules/react-native-svg/lib/module/fabric'
    at <project-root>/node_modules/webpack/lib/Compilation.js:2016:28

解决方案 #

方案1：配置Storybook的Webpack别名 #

在.storybook/main.js（或.storybook/main.ts）中添加Webpack别名，将fabric相关模块重定向到web兼容的实现：

module.exports = {
  webpackFinal: async (config) => {
    config.resolve.alias = {
      ...config.resolve.alias,
      'react-native/Libraries/NativeComponent/NativeComponentRegistry': 'react-native-web/dist/exports/NativeComponent',
      'react-native-svg/lib/module/fabric': 'react-native-svg/lib/module/index',
    };
    return config;
  },
};

方案2：降级react-native-svg版本 #

react-native-svg@13.x引入了fabric相关的新依赖，而react-native-web-linear-gradient@^1.1.2可能未适配该版本。尝试降级到更兼容的版本：

yarn add react-native-svg@^12.3.0

方案3：检查react-native-web版本兼容性 #

确保项目中react-native-web的版本与react-native-svg、react-native-web-linear-gradient兼容，若版本过低，可尝试升级到匹配的版本。

内容的提问来源于stack exchange，提问作者Ian