0

我正在构建一个 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"');
}
4

1 回答 1

0

答案在这里

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

它说您的 node_modules 目录不在目录中。我不知道反应,但我 100% 认为反应是在 c 中搜索 node_modules 目录:
检查你的 node_modules 路径。

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

匹斯:)

于 2022-02-18T19:43:18.973 回答