Rails 6.1集成Devise后Webpacker找不到application.js如何解决？

public/packs目录作用说明 #

public/packs是Rails Webpacker的默认编译产物输出目录：你本地app/javascript/packs下的前端入口文件（如application.js）、相关JS/CSS/静态资源经过Webpack打包后，所有编译后的产物、以及记录资源映射关系的manifest.json都会生成到这个目录。Rails渲染页面时会读取manifest.json的映射关系加载对应资源，找不到对应文件就会抛出你遇到的500错误。

解决步骤 #

• 第一步：安装前端依赖
  多数Fork后的项目会缺失Node.js侧的依赖，先在项目根目录执行对应包管理命令安装所有依赖：

  # 使用yarn的情况
  yarn install
  # 使用npm的情况
  npm install
  

• 第二步：手动触发Webpacker编译
  执行命令主动打包所有前端资源，执行完成后会自动生成public/packs目录和对应的manifest.json：

  rails webpacker:compile
  

  执行完成后可以先检查public/packs目录是否存在，目录内是否有manifest.json文件以及application.js相关的编译产物。
• 第三步：检查开发环境配置
  打开config/webpacker.yml找到development段落的配置，确认两个点：
  1. 已经继承了default段的配置，路径配置没有被单独覆盖
  2. compile配置项为true：该配置开启后Rails收到请求时如果检测到前端资源有改动，会自动编译更新public/packs下的产物，不需要手动执行编译命令
     如果compile设为false，你需要另外开一个终端窗口运行热编译服务，访问页面时就会自动编译：

  ./bin/webpack-dev-server
  

• 第四步：校验入口文件存在性
  检查app/javascript/packs目录下是否存在application.js入口文件，如果文件缺失可以先新建一个最简内容的入口文件：

  // app/javascript/packs/application.js
  console.log("webpacker load success")
  

如果以上步骤执行完还是报错，再检查Gemfile中的webpacker gem版本，和package.json中的@rails/webpacker版本是否一致，版本不一致会导致编译逻辑不兼容，将两边版本调整为相同后重新安装依赖、编译即可。

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