react-native - 将 svg 与 webpack 和故事书一起使用时出错

Question

将 svg 与 webpack 和 storybook 一起使用时，出现此错误。

Error in storybook

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

import type {ResolvedAssetSource} from './AssetSourceResolver'; | | let _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 来说，它是一个有效的导入吗？或者有人遇到过同样的问题吗？

Answer 1

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

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

原因描述为here .