如何让Webpack调试Rails 7 Stimulus时定位原始JS文件？

第一步：确保Webpack生成Source Map #

要让Chrome指向原始Stimulus文件，核心是配置Webpack生成并输出source map：

• 打开项目根目录的webpack.config.js，确认开发环境的devtool配置：

  module.exports = (env, argv) => {
    const isProduction = argv.mode === 'production';
    return {
      // ...其他配置
      devtool: isProduction ? 'source-map' : 'eval-cheap-module-source-map',
    };
  };
  

• 检查package.json里的开发编译命令，确保使用开发模式：

  "scripts": {
    "build": "webpack --mode production",
    "build:dev": "webpack --mode development"
  }
  

  启动项目时用./bin/dev，它会自动调用开发模式的编译命令。

第二步：配置Chrome DevTools加载Source Map #

• 打开Chrome DevTools（F12），点击右上角齿轮进入设置，勾选Enable JavaScript source maps和Enable CSS source maps。
• 切换到Sources面板，展开左侧的webpack://目录，就能找到你的原始Stimulus控制器文件和Stimulus源码文件。

第三步：排查TypeError: undefined is not an object (evaluating 't.controllerConstructor.shouldLoad')错误 #

1. 通过堆栈跟踪跳转原始文件：
   在DevTools的Console面板找到错误信息，点击错误堆栈里的行号，正常情况下会直接跳转到对应的原始文件（可能是Stimulus核心源码或你的控制器文件），查看变量t的controllerConstructor为什么是undefined。
2. 手动打断点调试：
   如果堆栈没跳转成功，直接在Sources面板搜索你的控制器文件名（比如xxx_controller.js），在控制器的初始化、连接方法里打断点，刷新页面触发错误，逐步检查：
   • 控制器是否在app/javascript/controllers/index.js里正确导入并注册：

     import { Application } from "@hotwired/stimulus"
     import XXXController from "./xxx_controller"
     
     const application = Application.start()
     application.register("xxx", XXXController)
     

   • 控制器文件的导出是否正确，必须用export default：

     export default class XXXController extends Stimulus.Controller {
       // ...代码
     }
     

3. 常见排查方向：
   • 检查Stimulus版本兼容性，确保package.json里的@hotwired/stimulus版本和jsbundling-rails适配（Rails 7默认搭配的Stimulus版本通常是3.x）。
   • 确认没有重复注册控制器，或者控制器命名冲突。

额外调试技巧 #

• 启动项目时观察终端的Webpack编译日志，有没有控制器导入失败的警告或错误。
• 在application.js的Stimulus初始化后添加日志，验证控制器是否加载：

  const application = Application.start()
  console.log('Loaded controllers:', application.controllers)
  

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