Ruby on Rails 7.0加载资产时出现SyntaxError: Invalid字符错误

问题描述 #

在Rails 7.0项目中使用image_tag、stylesheet_link_tag或javascript_include_tag导入资产时，会触发SyntaxError: Invalid character错误，错误指向execjs库中的这段非自定义代码：

begin
  extract_result(@runtime.exec_runtime(filepath), filepath)
ensure
  File.unlink(tmpfile)
end

无论新老资产文件都会出现该问题，示例调用代码：

<%= image_tag('logo', { id: 'standardized-image', draggable: false }) %>

从错误栈能看出，问题根源是react-rails的JSX处理器错误地将图片、CSS这类非JS资产当作JS代码，用babel进行转译，解析二进制内容时触发了字符无效的错误。

解决方案 #

1. 限定JSX处理器仅处理指定类型文件 #

修改config/initializers/assets.rb，让react-rails的JSX处理器只针对.jsx文件生效，避免误处理其他类型资产：

Rails.application.config.assets.configure do |env|
  # 注销全局注册的JSX处理器
  env.unregister_processor 'application/javascript', React::JSX::Processor
  # 仅为.jsx文件注册JSX转译处理器
  env.register_mime_type 'text/jsx', extensions: ['.jsx']
  env.register_processor 'text/jsx', React::JSX::Processor
end

2. 升级兼容的gem版本 #

react-rails 2.6.2版本较旧，和Rails 7.0的sprockets 4.x存在兼容性问题，执行命令升级相关依赖：

bundle update react-rails babel-transpiler

建议将react-rails升级到3.x版本，该版本对Rails 7和sprockets 4的适配更完善。

3. 检查资产管道基础配置 #

确认config/application.rb中的资产配置正确，确保sprockets能正确识别各类资产的存放路径：

config.assets.enabled = true
config.assets.paths << Rails.root.join('app', 'assets', 'images')
config.assets.paths << Rails.root.join('app', 'assets', 'stylesheets')
config.assets.paths << Rails.root.join('app', 'assets', 'javascripts')

同时保证资产文件放在对应目录下（比如图片存入app/assets/images）。

4. 临时禁用全局JSX转译 #

如果上述方案暂时无法生效，可以先关闭全局JSX转译，仅在需要转译的.jsx文件顶部手动添加转译指令：

//= require babel-transpiler

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