从CRA迁移至Vite时graphql.macro出现import_fs2.default is null错误

临时解决方案（无需替换为codegen） #

方案1：适配Babel宏处理+完善FS Polyfill #

由于graphql.macro是Babel宏，而你当前使用的@vitejs/plugin-react-swc基于SWC编译，不支持Babel宏，同时FS模块的polyfill需要明确指向，按以下步骤调整：

1. 安装依赖

npm install --save-dev @vitejs/plugin-react babel-plugin-macros

2. 修改Vite配置文件
   替换SWC版React插件为Babel版，添加宏处理配置，并强制FS模块指向polyfill：

/* eslint-disable import/no-extraneous-dependencies */
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import viteTsconfigPaths from 'vite-tsconfig-paths';
import svgrPlugin from 'vite-plugin-svgr';
import { nodePolyfills } from 'vite-plugin-node-polyfills';

const config = defineConfig({
  plugins: [
    react({
      babel: {
        plugins: ['babel-plugin-macros'],
      },
    }),
    viteTsconfigPaths(),
    svgrPlugin(),
    nodePolyfills({
      protocolImports: true,
      include: ['fs'],
      globals: {
        global: true,
      },
    }),
  ],
  resolve: {
    alias: {
      './runtimeConfig': './runtimeConfig.browser',
      '~antd': './node_modules/antd',
      'fs': 'vite-plugin-node-polyfills/polyfills/fs',
    },
  },
  base: '',
  build: {
    outDir: 'build',
    manifest: 'asset-manifest.json',
    assetsDir: 'static',
    chunkSizeWarningLimit: 1024,
  },
});

export default config;

3. 添加Babel配置文件
   在项目根目录创建babel.config.json：

{
  "plugins": ["babel-plugin-macros"]
}

方案2：使用专用Vite插件处理graphql.macro #

如果不想切换到Babel版React插件，可以尝试专用插件：

1. 安装插件

npm install --save-dev vite-plugin-graphql-macro

2. 修改Vite配置
   添加插件并完善FS polyfill的alias：

/* eslint-disable import/no-extraneous-dependencies */
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react-swc';
import viteTsconfigPaths from 'vite-tsconfig-paths';
import svgrPlugin from 'vite-plugin-svgr';
import { nodePolyfills } from 'vite-plugin-node-polyfills';
import graphqlMacro from 'vite-plugin-graphql-macro';

const config = defineConfig({
  plugins: [
    react(),
    graphqlMacro(),
    viteTsconfigPaths(),
    svgrPlugin(),
    nodePolyfills({
      protocolImports: true,
      include: ['fs'],
    }),
  ],
  resolve: {
    alias: {
      './runtimeConfig': './runtimeConfig.browser',
      '~antd': './node_modules/antd',
      'fs': 'vite-plugin-node-polyfills/polyfills/fs',
    },
  },
  base: '',
  build: {
    outDir: 'build',
    manifest: 'asset-manifest.json',
    assetsDir: 'static',
    chunkSizeWarningLimit: 1024,
  },
});

export default config;

问题根源 #

1. graphql.macro依赖Babel宏处理，而SWC编译插件不支持该特性，导致宏代码未被转译，运行时出现异常。
2. 即使配置了nodePolyfills，graphql.macro内部的FS模块导入没有正确指向polyfill版本，需通过alias强制绑定。

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