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

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

工具

我在项目里用 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 />);

我来解答赞 0 收藏

反馈

1 条解答

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