Rails 7.0.4创建--webpack=react应用无/app/javascript/packs文件夹及yarn问题求助

问题根源 #

Rails 7 彻底移除了 Webpacker 作为默认前端打包工具，转而采用 jsbundling-rails（搭配 esbuild/rollup/webpack）或 importmap-rails 作为前端方案。你参考的 Rails 6 教程依赖 Webpacker，所以会生成app/javascript/packs目录，而 Rails 7 的--webpack=react参数行为已改变，不再生成该目录。

分步解决 #

1. 先修复 Yarn 安装问题

如果brew install yarn失败，直接用 npm 全局安装 Yarn，更稳定：

npm install -g yarn

2. Rails 7 中添加 React 支持的两种正确方式

方式一：用 jsbundling-rails + Webpack（贴近 Rails 6 Webpacker 体验）

• 创建应用时指定使用 Webpack 作为 JS 打包器：

  rails new react-app -j webpack --css bootstrap
  

  （--css bootstrap可选，可替换为tailwind/cssbundling等其他方案）
• 安装 React 依赖：

  yarn add react react-dom
  

• 前端入口文件为app/javascript/application.js，你可以在app/javascript下新建components目录存放 React 组件，比如创建HelloReact.jsx：

  import React from 'react'
  import ReactDOM from 'react-dom/client'
  
  const root = ReactDOM.createRoot(document.getElementById('hello-react'))
  root.render(<h1>Hello React in Rails 7!</h1>)
  

• 在application.js中导入组件：

  import "./components/HelloReact"
  

• 开发时运行bin/dev（需先安装 foreman：gem install foreman），它会同时启动 Rails 服务器和 Webpack 监听打包；生产环境运行yarn build生成打包文件。

方式二：用 importmap-rails（Rails 7 默认，无需打包）

这是 Rails 7 推荐的轻量方案，无需前端打包步骤：

• 创建应用后，运行以下命令引入 React 包：

  bin/importmap pin react react-dom
  

• 在app/javascript/application.js中直接使用 React，比如：

  import React from "react"
  import ReactDOM from "react-dom/client"
  
  const root = ReactDOM.createRoot(document.getElementById('hello-react'))
  root.render(<h1>Hello React via Importmap!</h1>)
  

• 直接启动 Rails 服务器即可，无需额外打包命令。

3. 强制还原 Rails 6 风格的 packs 目录（不推荐）

如果一定要和教程完全一致，可手动安装 Webpacker：

• 在Gemfile中添加：

  gem 'webpacker', '~> 5.4'
  

• 执行安装：

  bundle install
  bundle exec rails webpacker:install:react
  

  执行后会生成app/javascript/packs目录及相关 Webpacker 配置。

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