使用create-react-app开发时，导入JSX文件需加后缀的问题咨询

嘿，我之前用Create React App（CRA）的时候也碰到过一模一样的问题！咱们来拆解下原因和解决办法：

为什么会出现这个报错？ #

最近版本的CRA（比如react-scripts 5.x及以上）在配置上更贴近ES模块的标准规范——ES模块要求导入文件时必须显式指定文件后缀，而旧版CRA会自动帮你补全.jsx这类后缀，所以现在突然需要加后缀会让人有点不适应。你的App.jsx文件确实存在，但编译器默认只会查找不带后缀的App.js，自然就报错了。

两种解决办法供你选： #

1. 继续显式指定.jsx后缀（推荐）

这其实是符合ES模块规范的写法，虽然多敲几个字符，但能让代码更清晰，也不用折腾配置。就像你现在做的那样：

import App from './App.jsx';

团队协作的时候，这种写法也能避免因为配置差异导致的问题，非常稳妥。

2. 修改配置让Webpack自动识别.jsx后缀

如果你实在不想每次都加后缀，可以通过craco（Create React App Configuration Override）来修改隐藏的Webpack配置（不推荐用eject，因为不可逆）：

• 第一步，安装craco：

  npm install @craco/craco --save-dev
  

• 第二步，在项目根目录创建craco.config.js文件，添加以下配置：

  module.exports = {
    webpack: {
      configure: {
        resolve: {
          // 把.jsx加到自动解析的后缀列表里
          extensions: ['.js', '.jsx', '.json'],
        },
      },
    },
  };
  

• 第三步，修改package.json里的脚本命令，把原来的react-scripts替换成craco：

  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test"
  }
  

之后重启开发服务器，你就可以直接写import App from './App';而不会报错啦。

总结 #

如果追求简单规范，就用第一种方法保持显式后缀；如果想省事儿，就用craco修改配置。两种方式都能解决你的问题～

内容的提问来源于stack exchange，提问作者zooes