在终端上找不到模块错误

Question

我正在构建一个 react-django 应用程序，为此我创建了一个 css 文件夹以将外部 css 添加到我的组件和一个图像文件夹，其中包含组件中所需的所有图像，但是当我运行应用程序时，我得到了这个我的终端出现错误，显示未找到模块：

ERROR in ./src/components/HomePage.js 5:0-39
Module not found: Error: Can't resolve './images/insta.png' in 'C:\Users\Kuldeep P\Desktop\RAMAN\GymWebsite\frontend\src\components'
resolve './images/insta.png' in 'C:\Users\Kuldeep P\Desktop\RAMAN\GymWebsite\frontend\src\components'
  using description file: C:\Users\Kuldeep P\Desktop\RAMAN\GymWebsite\frontend\package.json (relative path: ./src/components)
    Field 'browser' doesn't contain a valid alias configuration
    using description file: C:\Users\Kuldeep P\Desktop\RAMAN\GymWebsite\frontend\package.json (relative path: ./src/components/images/insta.png)
      no extension
        Field 'browser' doesn't contain a valid alias configuration
        C:\Users\Kuldeep P\Desktop\RAMAN\GymWebsite\frontend\src\components\images\insta.png doesn't exist
      .js
        Field 'browser' doesn't contain a valid alias configuration
        C:\Users\Kuldeep P\Desktop\RAMAN\GymWebsite\frontend\src\components\images\insta.png.js doesn't exist
      .json
        Field 'browser' doesn't contain a valid alias configuration
        C:\Users\Kuldeep P\Desktop\RAMAN\GymWebsite\frontend\src\components\images\insta.png.json doesn't exist
      .wasm
        Field 'browser' doesn't contain a valid alias configuration
        C:\Users\Kuldeep P\Desktop\RAMAN\GymWebsite\frontend\src\components\images\insta.png.wasm doesn't exist
      as directory
        C:\Users\Kuldeep P\Desktop\RAMAN\GymWebsite\frontend\src\components\images\insta.png doesn't exist
 @ ./src/components/App.js 3:0-34 10:90-98
 @ ./src/index.js 1:0-35

ERROR in ./src/components/css/Homepage.css (./node_modules/css-loader/dist/cjs.js!./src/components/css/Homepage.css) 5:36-149
Module not found: Error: Can't resolve '"C:UsersKuldeep PÞsktopRAMANGymWebsite☼rontendsrc♀omponentspublicSergi2.jpeg"' in 'C:\Users\Kuldeep
P\Desktop\RAMAN\GymWebsite\frontend\src\components\css'
resolve '"C:UsersKuldeep PÞsktopRAMANGymWebsite☼rontendsrc♀omponentspublicSergi2.jpeg"' in 'C:\Users\Kuldeep P\Desktop\RAMAN\GymWebsite\frontend\src\components\css'
  Parsed request is a module
  using description file: C:\Users\Kuldeep P\Desktop\RAMAN\GymWebsite\frontend\package.json (relative path: ./src/components/css)
    using description file: C:\Users\Kuldeep P\Desktop\RAMAN\GymWebsite\frontend\package.json (relative path: ./src/components/css/"C:UsersKuldeep PÞsktopRAMANGymWebsite☼rontendsrc♀omponentspublicSergi2.jpeg")
      no extension
        C:\Users\Kuldeep P\Desktop\RAMAN\GymWebsite\frontend\src\components\css\"C:UsersKuldeep PÞsktopRAMANGymWebsite☼rontendsrc♀omponentspublicSergi2.jpeg" doesn't exist
      as directory
        C:\Users\Kuldeep P\Desktop\RAMAN\GymWebsite\frontend\src\components\css\"C:UsersKuldeep PÞsktopRAMANGymWebsite☼rontendsrc♀omponentspublicSergi2.jpeg" doesn't exist
    resolve as module
      C:\Users\Kuldeep P\Desktop\RAMAN\GymWebsite\frontend\src\components\css\node_modules doesn't exist or is not a directory
      C:\Users\Kuldeep P\Desktop\RAMAN\GymWebsite\frontend\src\components\node_modules doesn't exist or is not a directory
      C:\Users\Kuldeep P\Desktop\RAMAN\GymWebsite\frontend\src\node_modules doesn't exist or is not a directory
      looking for modules in C:\Users\Kuldeep P\Desktop\RAMAN\GymWebsite\frontend\node_modules
        single file module
          using description file: C:\Users\Kuldeep P\Desktop\RAMAN\GymWebsite\frontend\package.json (relative path: ./node_modules/"C:UsersKuldeep PÞsktopRAMANGymWebsite☼rontendsrc♀omponentspublicSergi2.jpeg")
            no extension
              C:\Users\Kuldeep P\Desktop\RAMAN\GymWebsite\frontend\node_modules\"C:UsersKuldeep PÞsktopRAMANGymWebsite☼rontendsrc♀omponentspublicSergi2.jpeg" doesn't exist
        C:\Users\Kuldeep P\Desktop\RAMAN\GymWebsite\frontend\node_modules\"C:UsersKuldeep PÞsktopRAMANGymWebsite☼rontendsrc♀omponentspublicSergi2.jpeg" doesn't exist
      C:\Users\Kuldeep P\Desktop\RAMAN\GymWebsite\node_modules doesn't exist or is not a directory
      C:\Users\Kuldeep P\Desktop\RAMAN\node_modules doesn't exist or is not a directory
      C:\Users\Kuldeep P\Desktop\node_modules doesn't exist or is not a directory
      C:\Users\Kuldeep P\node_modules doesn't exist or is not a directory
      C:\Users\node_modules doesn't exist or is not a directory
      C:\node_modules doesn't exist or is not a directory
 @ ./src/components/css/Homepage.css 8:6-108 22:17-24 26:0-78 26:0-78 27:22-29 27:33-47 27:50-64
 @ ./src/components/HomePage.js 4:0-28
 @ ./src/components/App.js 3:0-34 10:90-98
 @ ./src/index.js 1:0-35

webpack 5.68.0 compiled with 2 errors and 1 warning in 9118 ms

我已经下载了一些加载器，如 image-webpack-loader、file-loader 和 url-loader 来渲染这些文件，但我没有在我的 webpack.config.js 文件中配置这些加载器，因为我不知道合适的方式配置它 这是我的 webpack.confog.js 文件：

const path = require("path");
const webpack = require("webpack");

module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "./static/frontend"),
    filename: "[name].js",
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
        },
      },
      //additional configuration to handle *.ccs files
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
  optimization: {
    minimize: true,
  },
  plugins: [
    new webpack.DefinePlugin({
      "process.env": {
        // This has effect on the react lib size
        NODE_ENV: JSON.stringify("production"),
      },
    }),
  ],
};

这是我收到错误的 homepage.css 文件：

#Homepgbtn1{
    position: absolute;
    align-items: center;
    left: 50%;
    right: 50%;
    top: 50%;
    bottom: 50%;
}
#Homepgbtn2{
    position: absolute;
    align-items: center;
    left: 48.5%;
    right: 50%;
    top: 57%;
    bottom: 50%;
    white-space: nowrap;
}
body{
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
    background-size: cover;
    background-color: dimgrey;
    background-image:url('"C:\Users\Kuldeep P\Desktop\RAMAN\GymWebsite\frontend\src\components\public\Sergi2.jpeg"');
}

Answer 1

答案在这里

C:\node_modules 不存在或不是目录

它说您的node_modules 目录不在目录中。我对 react 了解不多，但我 100% 确定 react 正在 C:\ 中搜索 node_modules 目录。
检查您的node_modules 路径。

在您的反应配置文件中，您可以找到node_modules 目录或类似的东西。我对反应一无所知，所以我不能向你推荐任何文章或指南。如果您不喜欢该解决方案，您可以在C:\ 目录中重新安装node_modules 文件。