SVG Next Error 您可能需要适当的加载程序来处理此文件类型，目前没有配置加载程序来处理此文件答案

【问题标题】：SVG Next Error You may need an appropriate loader to handle this file type, currently no loaders are configured to process this fileSVG Next Error 您可能需要适当的加载程序来处理此文件类型，目前没有配置加载程序来处理此文件
【发布时间】：2021-12-11 15:45:09
【问题描述】：

我的应用程序有问题，在我运行 npm run audit fix force 之前一切正常，然后当我在此之后运行我的应用程序时，我收到以下与 svg 文件相关的错误消息。

您可能需要适当的加载程序来处理此文件类型，目前没有配置加载程序来处理此文件。我不明白出了什么问题。

有人可以帮帮我吗？

package.json

{
  "name": "myskillreactapp",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@babel/preset-env": "^7.15.8",
    "bootstrap": "^5.0.0-beta3",
    "bootstrap-dark-5": "^1.1.3",
    "font-awesome": "^4.7.0",
    "next": "^10.0.4",
    "next-images": "^1.8.1",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "react-icons": "^4.3.1",
    "react-placeholder": "^4.1.0"
  },
  "devDependencies": {
    "babel-plugin-inline-react-svg": "^2.0.1",
    "eslint": "7.32.0",
    "eslint-config-next": "^0.2.4",
    "file-loader": "^6.2.0",
    "sass": "^1.43.3"
  }
}

next-config.js

const webpack = require('webpack');

module.exports = {
  reactStrictMode: true,
  entry: './src/index.js',
  module: {
    rules: [
      //...
      {
        test: /\.(png|jp(e*)g|svg|gif)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: 'images/[hash]-[name].[ext]',
            },
          },
        ],
      },
    ],
  },
  //...
};

_app.js

//import 'bootstrap/dist/css/bootstrap.css';
//import '/node_modules/bootstrap/scss/bootstrap.scss';
import '../styles/globals.scss';
import '../styles/Home.module.scss';
import 'font-awesome/css/font-awesome.min.css';



function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

export default MyApp

【问题讨论】：

标签： reactjs npm svg next.js

【解决方案1】：

再次运行 npm run audit fix force 解决了这个问题，它恢复了正常。希望它可以帮助某人。谢谢狮子座

【讨论】：