Question

我已经发布了一个NPM程序包，并将其导入到我正在从事的另一个项目中。在这个包中，我正在使用Webpack，并且在我正在使用的React组件中使用了多个SVG文件。使用此软件包时，出现与SVG图片有关的404 not found错误。

GET https://localhost:8080/apps/abc/jspm_packages/npm/@myScope/package_name@1.2.3/lib/assets/icons/menu-button.svg.js 404 (Not Found)

请注意，这是一个svg文件，似乎是作为javascript文件传入的，这可能是我不想要的行为。

有趣的是，当我加载仅使用此程序包的Create React App时，它会正确加载。

我的Webpack配置继续以下模块块：

module: {
rules: [    
  {
    test: /\.jpe?g$|\.gif$|\.png$|^(?!.*\.inline\.svg$).*\.svg$/,
    loader: 'url'
  },
  {
    test: /\.css$/,
    use: [ 'style-loader', 'css-loader' ]
  },
  {
    use: "babel-loader",
    test: /\.js$/,
    exclude: /node_modules/
  },
  {
    use: ["file-loader"],
    test: /\.(png|jpg|gif)$/
  },
  {
    use: ["url-loader"],
    test: /\.(eot|ttf|woff|woff2)$/
  }
]

}

我试图将svg包含在url-loader和文件加载器中，但没有成功。

此软件包中有一个主要的react组件，它由包含svg文件的其他组件组成。我导入程序包并使用此组件。该应用程序将不会加载并抛出svg 404错误，如上所示。此外，控制台中也有此错误消息：

system.src.js:5123 Uncaught (in promise) Error: (SystemJS) Error: XHR error (404 Not Found) loading https://localhost:8080/apps/abc/jspm_packages/npm/@myScope/package_name@1.2.3/lib/assets/icons/menu-button.svg.js
Error loading https://localhost:8080/apps/abc/jspm_packages/npm/@myScope/package_name@1.2.3/lib/assets/icons/menu-button.svg.js as "../../assets/icons/menu-button.svg" from https://localhost:8080/apps/abc/jspm_packages/npm/@myScope/package_name@1.2.3/lib/react/components/SomeReactComponent.js

这可能是我在包含svg的React组件中使用的路径存在问题。该组件会像这样接收svg（因为我将所有svg文件都保留在自己的资产文件夹中）：

var MenuButtonImg = require('../../assets/icons/menu-button.svg');

这个相对路径似乎是一个问题，但是我不确定这是否是我问题的根本原因。我想知道如何消除此404错误并成功将组件加载到项目中。

从导入的NPM包中找不到SVG文件

0 个答案: