如何在Next.js的_next/static/media目录中允许使用import.meta？

问题本质 #

你遇到的错误来自第三方生成的swiftlatexxetex.e11f3d2f.js文件，其中的import.meta.webpackHot.accept()是Webpack热模块替换（HMR）的专属语法，但Next.js的编译链路不兼容这个非标准写法，导致加载引擎时抛出异常。

可行解决方案 #

1. 让Next.js跳过该文件的编译 #

修改next.config.mjs，添加webpack规则，用raw-loader直接加载这个文件，避免Next.js对其进行语法转换：

/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack: (config) => {
    config.module.rules.push({
      // 匹配带哈希后缀的目标JS文件
      test: /swiftlatexxetex\.[a-f0-9]+\.js$/,
      use: 'raw-loader',
      type: 'javascript/auto',
    });
    return config;
  },
};

export default nextConfig;

执行npm install raw-loader --save-dev安装依赖后重启开发服务器。

2. 直接移除HMR代码（如果可编辑文件） #

如果能拿到该JS文件的修改权限，直接注释或删除这行代码：

// @ts-ignore importMeta is replaced in the loader
// import.meta.webpackHot.accept();

这行代码仅在Webpack原生热更新场景有用，Next.js环境下完全不需要。

3. 用Babel兼容import.meta语法 #

如果需要保留热更新能力，创建babel.config.js并配置插件处理import.meta：

module.exports = {
  presets: ['next/babel'],
  plugins: [['babel-plugin-transform-import-meta', { module: 'esm' }]]
};

安装插件：npm install babel-plugin-transform-import-meta --save-dev，之后重启项目验证。

验证方式 #

修改完成后重启开发服务器，访问/create页面触发xetexEngine.loadEngine()调用，检查是否仍有报错。

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