如何在Rails 7中结合Import Maps使用Prism JS并解决报错

问题原因 #

这个报错核心是Prism的CSS语言模块初始化时，依赖的C-like基础模块未完成加载——CSS语法解析依赖C-like模块提供的基础规则，若两者加载顺序颠倒或C-like模块缺失，就会触发该类型错误。你下载的开发版Prism虽包含所有模块，但打包时的模块顺序可能不符合依赖要求。

解决方法 #

1. 重新生成正确顺序的Prism定制包 #

• 前往Prism官网定制页面，按以下顺序勾选模块：
  • 核心模块（Core）
  • C-like模块（必须在CSS模块之前勾选）
  • CSS模块
  • 所需其他语言模块（Markup、HTML、JavaScript等）
  • 需要的插件（比如Line Numbers）
• 下载生成的prism.js和prism.css，替换项目中vendor/javascript/prism.js和vendor/stylesheet/prism.css文件。

2. 修正Rails中的导入配置 #

JS导入调整

确保Prism在DOM加载完成后再执行高亮逻辑：
修改app/javascript/application.js：

import 'prism';

document.addEventListener('DOMContentLoaded', () => {
  Prism.highlightAll();
});

CSS导入路径修正

你的prism.css放在vendor/stylesheet下，Rails Asset Pipeline默认不识别该路径，可二选一调整：

• 移动文件：将vendor/stylesheet/prism.css移至vendor/assets/stylesheets/prism.css，然后修改app/assets/stylesheets/application.css.scss：

  @import 'prism';
  

• 添加自定义路径：在config/initializers/assets.rb中加入：

  Rails.application.config.assets.paths << Rails.root.join('vendor', 'stylesheet')
  

3. 临时切换到CDN验证（可选） #

若本地包问题排查困难，可暂时用CDN加载Prism验证功能：
在app/views/layouts/application.html.erb的<head>中添加：

<link href="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/themes/prism.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/prism.js"></script>
<script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-c-like.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-css.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/plugins/line-numbers/prism-line-numbers.min.js"></script>

同时注释掉config/importmap.rb、application.js和application.css.scss中本地Prism的导入配置，测试页面是否正常高亮。若正常，说明本地Prism包的模块顺序存在问题，需重新生成。

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