将 svg 与 webpack 和 storybook 一起使用时出错答案

【问题标题】：Error using svg with webpack and storybook将 svg 与 webpack 和 storybook 一起使用时出错
【发布时间】：2022-01-13 06:02:37
【问题描述】：

将 svg 与 webpack 和 storybook 一起使用时，我收到此错误。

Error in storybook

./node_modules/react-native/Libraries/Image/resolveAssetSource.js 中的错误 18:12 模块解析失败：意外令牌 (18:12) 您可能需要适当的加载程序来处理此文件类型，目前没有配置加载程序来处理此文件。见https://webpack.js.org/concepts#loaders | const AssetSourceResolver = require('./AssetSourceResolver'); |

从'./AssetSourceResolver'导入类型{ResolvedAssetSource}； | |让 _customSourceTransformer, _serverURL, _scriptURL;

我尝试通过 npm i react-native-svg-web 安装，并将其添加到 webpack 配置中：Added line in webpack.config

module.exports = async ({ config }) => { config.resolve.alias = { 'react-native$': 'react-native-web', 'react-native-svg'：'react-native-svg-web' };

对于 webpack，它是有效的导入，还是有人遇到过同样的问题？

【问题讨论】：

标签： react-native svg webpack storybook

【解决方案1】：

在 webpack.config.js 文件中，添加以下行为我修复了它：

module.exports = ({config}) => {
  // ...
  config.resolve.extensions.unshift('.web.js'); // added this line
  // ...
  return config;
};

原因描述为here。

【讨论】：