修改NPM与ESLint后Rails出现RoutingError，JS加载失败无法进入Profile标签

修改NPM和ESLint配置后，应用的JS代码加载失败，抛出ActionController::RoutingError (No route matches [GET] "/packs/application-8e6ca2ce7d44b0980e70.js")错误，同时无法进入Profile标签（该标签本身无路由配置问题）。

相关代码 #

import 'core-js/stable';
import 'dom4';
import WebpackerReact from 'webpacker-react';
import Profile from 'containers/Profile';
require('@rails/ujs').start();
WebpackerReact.setup({ Profile }); 

错误日志 #

Started GET "/packs/application-8e6ca2ce7d44b0980e70.js" for 172.20.0.1 at 2023-01-16 07:01:18 +0000
web_1           |   
web_1           | ActionController::RoutingError (No route matches [GET] "/packs/application-8e6ca2ce7d44b0980e70.js"):
web_1           |   
web_1           | actionpack (5.2.3) lib/action_dispatch/middleware/debug_exceptions.rb:65:in `call'
web_1           | rollbar (2.22.1) lib/rollbar/middleware/rails/show_exceptions.rb:22:in `call_with_rollbar'
web_1           | newrelic_rpm (6.9.0.363) lib/new_relic/agent/instrumentation/middleware_tracing.rb:99:in `call'
web_1           | actionpack (5.2.3) lib/action_dispatch/middleware/show_exceptions.rb:33:in `call'
web_1           | newrelic_rpm (6.9.0.363) lib/new_relic/agent/instrumentation/middleware_tracing.rb:99:in `call'
web_1           | railties (5.2.3) lib/rails/rack/logger.rb:38:in `call_app'
web_1           | railties (5.2.3) lib/rails/rack/logger.rb:26:in `block in call'
web_1           | activesupport (5.2.3) lib/active_support/tagged_logging.rb:71:in `block in tagged'
web_1           | activesupport (5.2.3) lib/active_support/tagged_logging.rb:28:in `tagged'
web_1           | activesupport (5.2.3) lib/active_support/tagged_logging.rb:71:in `tagged'
web_1           | railties (5.2.3) lib/rails/rack/logger.rb:26:in `call'
web_1           | newrelic_rpm (6.9.0.363) lib/new_relic/agent/instrumentation/middleware_tracing.rb:99:in `call'
web_1           | sprockets-rails (3.2.1) lib/sprockets/rails/quiet_assets.rb:13:in `call'
web_1           | newrelic_rpm (6.9.0.363) lib/new_relic/agent/instrumentation/middleware_tracing.rb:99:in `call'
web_1           | actionpack (5.2.3) lib/action_dispatch/middleware/remote_ip.rb:81:in `call'
web_1           | newrelic_rpm (6.9.0.363) lib/new_relic/agent/instrumentation/middleware_tracing.rb:99:in `call'
web_1           | request_store (1.4.1) lib/request_store/middleware.rb:19:in `call'
web_1           | newrelic_rpm (6.9.0.363) lib/new_relic/agent/instrumentation/middleware_tracing.rb:99:in `call'
web_1           | actionpack (5.2.3) lib/action_dispatch/middleware/request_id.rb:27:in `call'
web_1           | newrelic_rpm (6.9.0.363) lib/new_relic/agent/instrumentation/middleware_tracing.rb:99:in `call'
web_1           | rack (2.2.3) lib/rack/method_override.rb:24:in `call'

解决方案 #

• 重新编译Webpacker资源：修改依赖或配置后，Webpacker生成的哈希文件名可能未同步更新，执行编译命令生成最新资源：

  bundle exec rails webpacker:compile
  

  开发环境下，也可以启动监听进程自动编译：

  bin/webpack-dev-server
  

• 检查Webpacker配置：确认config/webpacker.yml中public_output_path设置为packs，且各环境配置正确，确保编译后的文件输出到public/packs目录。

• 清理缓存：清除Webpacker和Rails缓存，避免旧的哈希引用残留：

  bundle exec rails webpacker:clean
  bundle exec rails cache:clear
  

• 验证页面JS引用方式：确保页面使用Webpacker提供的javascript_pack_tag 'application'引用资源，而非硬编码文件名，该方法会自动匹配最新的哈希文件名。

• 重新测试Profile标签：JS加载失败会导致React组件无法初始化，待JS问题解决后，再验证Profile标签的访问功能。

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