npm run dev 启动脚本为什么找不到 React 组件？

慕容综敏提问于 2026-03-12 15:52:20 阅读 35

工具

我在项目里用 npm run dev 启动本地开发服务器，但控制台报错说找不到 App 组件，可我明明已经写了啊。之前用 create-react-app 没这问题，这次是自己配的 webpack + React。

尝试过检查文件路径、重新安装依赖，甚至把组件写成函数式了还是不行。这是我的入口文件代码：

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

我来解答赞 10 收藏

反馈

2 条解答

ლ东芳 Lv1

试试这个方法，先检查一下你的 Webpack 配置文件，确保它正确地解析了 JSX 文件和导入的 React 组件。有时候路径配置或者模块规则没设置好会导致找不到组件。

你可以在 Webpack 配置文件里检查一下 resolve.extensions 是否包含了 .js 和 .jsx，比如这样：

resolve: {

    extensions: ['.js', '.jsx'],

},

还有，看看 module.rules 里是否有正确的规则来处理 .jsx 文件，类似这样：

module: {

    rules: [

        {

            test: /.jsx?$/,

            exclude: /node_modules/,

            use: {

                loader: 'babel-loader',

                options: {

                    presets: ['@babel/preset-env', '@babel/preset-react']

                }

            }

        },

    ],

},

确保 Babel 和相关的预设都正确安装并且版本兼容。有时候版本不匹配也会导致奇怪的问题。检查一下 package.json 里的依赖版本，特别是 babel-loader、@babel/core 和 @babel/preset-react。

最后，确认你的 App.jsx 文件确实存在于 ./App 路径下，并且文件名大小写一致，因为 Webpack 对路径区分大小写。有时候文件名大小写不对也会导致找不到模块。

2026-03-21 22:12

Good“付敏 Lv1

这个问题基本可以确定是你 webpack 配置漏了关键东西。

最常见的原因是 webpack 的扩展名解析配置不对。你需要在 webpack.config.js 里加上 resolve.extensions：

module.exports = {

  resolve: {

    extensions: ['.js', '.jsx', '.ts', '.tsx'],

  },

  // ...其他配置

};

如果你的 App 组件是 App.jsx 或者 App.tsx，但配置里没有写 .jsx，那 webpack 找文件的时候就会报找不到。

另一个可能：babel 配置里没有启用 react 的 JSX 转换。检查一下 babel.config.js 或者 .babelrc：

// babel.config.js

module.exports = {

  presets: [

    '@babel/preset-env',

    ['@babel/preset-react', { runtime: 'automatic' }],

  ],

};

还有一个小坑：如果你的 App 组件文件名是 App.jsx，但 import 写的是 import App from './App'（没写扩展名），resolve.extensions 的顺序也很重要，把常用的放前面。

顺便提一句，这种自定义配置的项目，配置文件最好做个版本管理，不然哪天电脑挂了或者换台机器，配起来挺耽误时间的。依赖版本也要锁死，防止别人跑起来和你本地不一致。

2026-03-12 16:03