Javascript 我在react中使用npm命令时遇到错误&引用；未找到主模块中的错误：错误：Can'；“我不能解决……”；

我一直在学习django react教程，但在使用npm run dev命令时遇到了问题。我认为这是网页包文件的问题，但可能不是

[error message][1]
[webpack file][2]
[package.json][3]
[file structure and app.js][4]
[index.js][5]

这是我收到的错误：

[1]: https://i.stack.imgur.com/vCK8g.png
(django_venv) C:\Users\bostm\Documents\CodingProjects\React-Django
\music_controller\frontend>npm run dev

> frontend@1.0.0 dev
> webpack --mode development --watch

[webpack-cli] Compilation starting...
[webpack-cli] Compilation finished
asset main.js 0 bytes [compared for emit] [minimized] (name: main)

ERROR in main
Module not found: Error: Can't resolve './src/index.js' in 'C:\Users\bostm
\Documents\CodingProjects\React-Django\music_controller\frontend'

webpack 5.10.2 compiled with 1 error in 136 ms
[webpack-cli] watching files for updates...

这是网页包文件。我认为问题出在这里，因为错误消息说它无法解析前端目录路径中的“/src/index.js”，该目录是src/index所在的webapp文件夹的名称。我尝试使用另一篇文章中的解决方案，方法是使用path.resolve（\uu dirname，/path/）。它不工作，所以这是我原来的

[2]
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",
        },
      },
    ],
  },
  optimization: {
    minimize: true,
  },
  plugins: [
    new webpack.DefinePlugin({
      "process.env": {
        // This has effect on the react lib size
        NODE_ENV: JSON.stringify("production"),
      },
    }),
  ],
};

这是package.json文件。我只为“dev”和“build”添加了几行

这是我的app.js文件，其中包含的屏幕截图主要是为了让你看到文件目录是如何设置的，我不确定如何将其作为文本包含在帖子中

[4]: https://i.stack.imgur.com/dLBXd.png

最后是index.js文件，它只是从组件导入应用程序的单行

[5]
import App from "./components/App";

---

对不起，如果我的问题有任何不清楚的地方，请告诉我是否可以澄清任何问题。如有任何帮助或建议，将不胜感激。我真的不确定哪里出了错。我一直在考虑回去，只是使用npx create react app[appName]创建react应用程序，但我想知道如何手动设置它，以防将来我想使用babel和webpack以外的东西。再次感谢。

错误在

main.js

；根据屏幕截图，从那里到index.js的路径是

。/src/index.js

。（您在

frontend

文件夹中有一个

frontend

文件夹，可能是出于偶然？此外，当您发布关于教程的文章时，请始终提供一个链接，以便我们可以对照教程检查您的代码）这是指向视频的链接：这是github:static中的第二个frontend文件夹是故意的。我还尝试在网页包文件中将路径更改为“./src/index.js”。谢谢您错误在

main.js

；根据屏幕截图，从那里到index.js的路径是

。/src/index.js

。（您在

frontend

文件夹中有一个

frontend

文件夹，可能是出于偶然？此外，当您发布关于教程的文章时，请始终提供一个链接，以便我们可以对照教程检查您的代码）这是指向视频的链接：这是github:static中的第二个frontend文件夹是故意的。我还尝试在网页包文件中将路径更改为“./src/index.js”。非常感谢。

[5]
import App from "./components/App";