升级Rails/React应用后yarn start报错：找不到./src入口模块

问题概述 #

• 完成版本升级：Node 12 → 16、Rails 5 → 6、Webpack 3 → 4
• 执行yarn start时报错，提示无法找到./src入口文件，但项目实际入口为app/javascripts/packs/application.js
• 执行./bin/webpack-dev-server可正常启动，无异常

错误信息：

ERROR in Entry module not found: Error: Can't resolve './src' in '/Users/nicolascarroll/nomad_2_app'

ERROR in multi (webpack)-dev-server/client?http://localhost:8080 (webpack)/hot/dev-server.js ./src
Module not found: Error: Can't resolve './src' in '/Users/nicolascarroll/nomad_2_app'
 @ multi (webpack)-dev-server/client?http://localhost:8080 (webpack)/hot/dev-server.js ./src main[2]

问题根源 #

yarn start里的命令是直接调用webpack-dev-server --hot --inline，没有指定项目的自定义Webpack配置文件，导致webpack-dev-server使用默认规则，默认查找./src/index.js作为入口。而./bin/webpack-dev-server是Rails Webpacker提供的脚本，会自动加载config/webpack目录下的自定义配置，所以能正确识别你的项目入口。

另外，你的webpacker.yml中source_path配置为app/javascript，但实际入口目录是app/javascripts，这也会导致Webpacker无法正确扫描入口文件，需要同步修正。

解决步骤 #

1. 修正package.json的start脚本 #

选择以下两种方式之一：

方式一：指定Webpack配置文件

修改package.json中的scripts字段，让webpack-dev-server加载你的开发环境配置：

"scripts": {
  "lint": "eslint .",
  "test": "jest",
  "start": "webpack-dev-server --hot --inline --config config/webpack/development.js"
}

方式二：直接使用Webpacker的启动脚本

替换为Webpacker提供的启动命令，确保行为和./bin/webpack-dev-server一致：

"scripts": {
  "lint": "eslint .",
  "test": "jest",
  "start": "./bin/webpack-dev-server"
}

2. 修正webpacker.yml的source_path #

将webpacker.yml中的source_path改为实际的入口根目录app/javascripts：

default: &default
  source_path: app/javascripts
  source_entry_path: packs
  # 其他配置保持不变

3. 确认开发环境Webpack配置 #

检查config/webpack/development.js是否正确合并了shared配置，示例如下：

const merge = require('webpack-merge')
const sharedConfig = require('./shared')

module.exports = merge(sharedConfig, {
  mode: 'development',
  devtool: 'cheap-module-eval-source-map',
  // 其他开发环境专属配置
})

验证 #

修改完成后，重新执行yarn start，应该能正常识别app/javascripts/packs/application.js作为入口，不再出现找不到./src的错误。

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