React v17+Ruby Rails环境中EZGrid DataGrid报错：无法解析react/jsx-runtime

问题根源 #

你之前修改的是Storybook的Webpack配置，但实际报错来自项目构建流程，应该修改Rails项目的主Webpack配置文件。错误本质是：EZGrid的代码以严格ES模块方式导入react/jsx-runtime，但React v17中该文件带.js后缀，Webpack在严格ES模块解析规则下无法自动补全扩展名，导致找不到模块。

解决方案步骤 #

1. 找到正确的Webpack配置文件 #

Rails项目的主Webpack配置位于config/webpack/environment.js，这是你需要修改的核心配置文件。

2. 添加别名配置 #

打开config/webpack/environment.js，添加别名映射，将无扩展名的请求指向带.js后缀的实际文件：

const { environment } = require('@rails/webpacker');
const webpack = require('webpack');

// 添加别名配置
environment.config.set('resolve.alias', {
  ...environment.config.get('resolve.alias'),
  'react/jsx-runtime': require.resolve('react/jsx-runtime.js'),
  'react/jsx-dev-runtime': require.resolve('react/jsx-dev-runtime.js')
});

module.exports = environment;

3. 检查Babel配置（可选） #

确保Babel已配置React v17的JSX转换插件，打开项目根目录的babel.config.js（或.babelrc），确认包含以下配置：

module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['@rails/webpacker/babel'],
    plugins: [
      ['@babel/plugin-transform-react-jsx', { runtime: 'automatic' }]
    ]
  };
};

4. 清理缓存并重启服务 #

执行以下命令清理Webpack缓存，然后重启开发服务器：

bin/webpacker clean
bin/webpacker dev-server

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