Symfony+Webpack Encore开发React：如何避免重复导入React？

针对Symfony + Webpack Encore的React项目，要实现无需在每个.jsx文件手动导入React，核心是利用React 17+的自动JSX转换特性，通过配置Babel来自动处理导入逻辑，步骤如下：

1. 确认依赖版本（可选） #

确保你的React版本在17.x及以上（旧版本不支持自动runtime特性，需先升级）：

yarn list react react-dom

2. 配置Babel的React预设 #

Webpack Encore已默认集成@babel/core、babel-loader等核心依赖，无需重复安装，只需修改Babel配置，让@babel/preset-react启用automatic runtime模式即可。

方式一：修改Webpack Encore配置文件（webpack.config.js） #

在文件中添加或调整Babel配置：

Encore.configureBabel((babelConfig) => {
  // 查找已存在的@babel/preset-react预设
  const reactPreset = babelConfig.presets.find(preset => 
    Array.isArray(preset) && preset[0] === '@babel/preset-react'
  );

  if (reactPreset) {
    // 更新预设配置，启用自动runtime
    reactPreset[1] = { ...(reactPreset[1] || {}), runtime: 'automatic' };
  } else {
    // 如果未添加过该预设，直接添加并配置
    babelConfig.presets.push(['@babel/preset-react', { runtime: 'automatic' }]);
  }
});

方式二：使用独立的Babel配置文件（推荐） #

在项目根目录创建babel.config.json文件，内容如下：

{
  "presets": [
    "@babel/preset-env",
    ["@babel/preset-react", { "runtime": "automatic" }]
  ]
}

Webpack Encore会自动读取这个配置文件，无需修改webpack.config.js。

3. 验证效果 #

删除任意.jsx文件中的import React from 'react'语句，然后运行：

yarn encore dev

如果项目能正常编译并运行，说明配置生效，后续所有.jsx文件都无需手动导入React。

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