整合Vite、Remix、NX时@lingui/macro导入错误：找不到createMacro命名导出

问题描述 #

整合Vite、Remix与NX开发环境时，出现如下错误：

Error when evaluating SSR module /@fs/Users/joseasilis/Documents/programming/alertdown/nx/nx-remix-vite/libs/ui/src/templates/AuthForm/index.tsx: failed to import "@lingui/macro"
|- file:///Users/joseasilis/Documents/programming/alertdown/nx/nx-remix-vite/node_modules/@lingui/macro/dist/index.mjs:1
import { createMacro } from 'babel-plugin-macros';
         ^^^^^^^^^^^
SyntaxError: Named export 'createMacro' not found. The requested module 'babel-plugin-macros' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from 'babel-plugin-macros';
const { createMacro } = pkg;

手动修改node_modules/@lingui/macro/dist/index.mjs的导入方式为CommonJS解构，未解决问题。

解决思路 #

1. 配置Vite兼容CommonJS模块 #

在vite.config.ts中添加optimizeDeps和ssr配置，强制Vite将babel-plugin-macros按ES模块规则处理：

export default defineConfig({
  // ...已有配置
  optimizeDeps: {
    include: ['babel-plugin-macros'],
    esbuildOptions: {
      loader: {
        '.js': 'jsx',
      },
    },
  },
  ssr: {
    noExternal: ['babel-plugin-macros', '@lingui/macro'],
    optimizeDeps: {
      include: ['babel-plugin-macros'],
    },
  },
})

2. 调整Lingui插件执行顺序 #

宏需要在编译阶段优先处理，将lingui插件移到remix和react插件之前：

plugins: [
  expressDevServer(),
  denyImports({}),
  lingui({ cwd: __dirname }), // 优先加载Lingui插件
  remix(),
  nxViteTsPaths(),
  react(),
],

3. 用patch-package持久化修改 #

手动修改node_modules不会被保存，用patch-package生成持久化补丁：

• 安装依赖：npm install patch-package --save-dev
• 修改node_modules/@lingui/macro/dist/index.mjs的导入代码：

  import pkg from 'babel-plugin-macros';
  const { createMacro } = pkg;
  

• 生成补丁：npx patch-package @lingui/macro
• 后续安装依赖时，补丁会自动应用

4. 检查版本兼容性 #

@lingui/vite-plugin 4.12.0与Vite 5.x可能存在兼容问题，可尝试：

• 将@lingui/core、@lingui/macro、@lingui/vite-plugin降级到4.11.x版本
• 升级@lingui相关包到最新稳定版测试

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