使用Filterrific Gem预编译资产时出现Uglifier错误求助

问题原因 #

报错源于Filterrific v5.2.5的JS代码中使用了ES2020的可选链操作符?.，而当前使用的Uglifier v4.2.0即使开启了harmony配置，对该语法的解析支持仍存在缺陷，导致资源预编译失败。

解决建议 #

1. 升级Uglifier版本 #

旧版Uglifier对可选链等现代JS语法支持不完善，升级到兼容版本即可解决：

• 修改Gemfile，指定Uglifier版本：

  gem 'uglifier', '>= 4.3.0'
  

• 执行更新命令：

  bundle update uglifier
  

• 重新执行预编译：

  rails assets:precompile
  

2. 调整Uglifier配置参数 #

在production.rb中补充指定ECMAScript版本为2020（可选链属于ES2020语法）：

config.assets.js_compressor = Uglifier.new(harmony: true, ecma: 2020)

修改后重新执行预编译命令。

3. 替换Filterrific的兼容代码（临时方案） #

若暂时无法升级依赖，可将Filterrific中使用可选链的代码替换为ES5兼容写法：
找到报错的filterrific.js文件中对应行，将：

return document.querySelector("meta[name=csp-nonce]")?.content

替换为：

const metaTag = document.querySelector("meta[name=csp-nonce]");
return metaTag ? metaTag.content : undefined;

注意：不要直接修改gem源码，可通过Rails的asset覆盖机制（将修改后的文件放入app/assets/javascripts/filterrific/目录）来实现。

4. 替换为Terser压缩器 #

Terser对现代JS语法支持更完善，可替代Uglifier：

• 修改Gemfile，添加Terser依赖：

  gem 'terser-rails'
  

• 执行安装命令：

  bundle install
  

• 修改production.rb中的压缩器配置：

  config.assets.js_compressor = :terser
  

• 重新执行预编译。

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