Rocky 9上Rails 6项目Webpack编译错误排查求助

核心原因 #

你的问题完全是版本不兼容导致的，几个关键冲突点：

1. Node.js版本过高：Webpacker 5.x系列最高仅支持Node.js 16 LTS，你用的Node.js 20.13.1超出了兼容范围，会导致大量旧版Webpack插件/loader出现语法或API兼容问题。
2. Vue生态与Webpack4不匹配：
   • Webpack 4对ES模块（.mjs）的支持不完善，而Vue3及vue-router 4.x默认输出ES模块，导致computed等命名导出无法被正确解析。
   • 你用的vue-loader@17.4.2是为Webpack 5设计的，和Webpacker 5绑定的Webpack 4完全不兼容。
3. Vue3导入方式错误：Vue3移除了默认导出的Vue构造函数，代码中如果还是用import Vue from 'vue'，必然会报"export 'default' not found"错误。

分步解决方案 #

1. 降级Node.js版本 #

用nvm安装并切换到Node.js 16 LTS（推荐16.20.2）：

nvm install 16.20.2
nvm use 16.20.2

若服务器未安装nvm，可通过Rocky9官方软件源安装Node.js16，或手动下载对应二进制包。

2. 调整前端依赖版本 #

修改package.json，更新以下依赖版本：

{
  "dependencies": {
    "@rails/webpacker": "5.4.4",
    "@tag/tag-components": "^1.9.2",
    "@vue/compiler-sfc": "^3.2.47",
    "axios": "^1.9.0",
    "pug": "^3.0.3",
    "pug-plain-loader": "^1.1.0",
    "vue": "^3.2.47",
    "vue-axios": "^3.5.2",
    "vue-loader": "^16.8.3",
    "vue-multiselect": "^3.2.0",
    "vue-router": "^4.1.6",
    "vuedraggable": "^4.1.0",
    "vuex": "^4.1.0"
  },
  "devDependencies": {
    "@webpack-cli/serve": "^1.6.3",
    "webpack-dev-server": "^3.11.3"
  }
}

执行依赖重装：

rm -rf node_modules package-lock.json
npm install

3. 修正Vue导入代码 #

把项目中所有import Vue from 'vue'的代码替换为Vue3的正确导入方式：

// 替换前
import Vue from 'vue'
Vue.use(VueRouter)

// 替换后
import { createApp } from 'vue'
const app = createApp(App)
app.use(VueRouter)

4. 调整Webpack配置（可选） #

若仍存在.mjs模块解析问题，在config/webpack/environment.js中添加以下配置，让Webpack4正确处理ES模块：

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

// 添加对.mjs文件的处理规则
environment.loaders.append('mjs', {
  test: /\.mjs$/,
  include: /node_modules/,
  type: 'javascript/auto'
})

module.exports = environment

5. 重新执行预编译 #

bundle exec rake assets:precompile

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