Vite构建React项目遇globalThis解析错误及PDF库替代咨询

执行yarn build生产构建时出现以下错误，移除jspdf和jspdf-autotable库后问题消失：

vite build vite v2.5.10 building for production... ✓ 3357 modules transformed. Could not resolve '../internals/globalThis' from ../internals/globalThis?commonjs-external error during build: Error: Could not resolve '../internals/globalThis' from ../internals/globalThis?commonjs-external at error (/Users/user/Coding/vite-test/node_modules/rollup/dist/shared/rollup.js:158:30) at ModuleLoader.handleResolveId (/Users/user/Coding/vite-test/node_modules/rollup/dist/shared/rollup.js:22263:24) at /Users/user/Coding/vite-test/node_modules/rollup/dist/shared/rollup.js:22257:26

咨询问题 #

1. 为何引入这两个库会触发该错误？是否需要在vite.config.js中配置？
2. 推荐适用于React项目的PDF下载替代库。

当前vite.config.js配置：

import fs from "fs";
import * as path from "path";
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import rollupNodePolyFill from "rollup-plugin-node-polyfills";
import NodeGlobalsPolyfillPlugin from "@esbuild-plugins/node-globals-polyfill";

export default () => {
  return defineConfig({
    plugins: [react()],
    define: {
      global: "globalThis",
    },
    server: {
      port: 3000,
      cors: {
        origin: [ "http://localhost:3000"],
        methods: ["GET", "PATCH", "PUT", "POST", "DELETE", "OPTIONS"],
        allowedHeaders: ["Content-Type", "Authorization", "X-Requested-With"],
      },
    },
    css: {
      preprocessorOptions: {
        scss: {
          includePaths: ["node_modules", "./src/assets"],
        },
      },
      postcss: {
        plugins: [require("postcss-rtl")()],
      },
    },
    resolve: {
      alias: [
        {
          find: /^~.+/,
          replacement: (val) => {
            return val.replace(/^~/, "");
          },
        },
        { find: "stream", replacement: "stream-browserify" },
        { find: "crypto", replacement: "crypto-browserify" },
        { find: "@src", replacement: path.resolve(__dirname, "src") },
        { find: "@store", replacement: path.resolve(__dirname, "src/redux") },
        {
          find: "@configs",
          replacement: path.resolve(__dirname, "src/configs"),
        },
        {
          find: "url",
          replacement: "rollup-plugin-node-polyfills/polyfills/url",
        },
        {
          find: "@styles",
          replacement: path.resolve(__dirname, "src/@core/scss"),
        },
        {
          find: "util",
          replacement: "rollup-plugin-node-polyfills/polyfills/util",
        },
        {
          find: "zlib",
          replacement: "rollup-plugin-node-polyfills/polyfills/zlib",
        },
        {
          find: "@utils",
          replacement: path.resolve(__dirname, "src/utility/Utils"),
        },
        {
          find: "@hooks",
          replacement: path.resolve(__dirname, "src/utility/hooks"),
        },
        {
          find: "@assets",
          replacement: path.resolve(__dirname, "src/@core/assets"),
        },
        {
          find: "@layouts",
          replacement: path.resolve(__dirname, "src/@core/layouts"),
        },
        {
          find: "assert",
          replacement: "rollup-plugin-node-polyfills/polyfills/assert",
        },
        {
          find: "buffer",
          replacement: "rollup-plugin-node-polyfills/polyfills/buffer-es6",
        },
        {
          find: "process",
          replacement: "rollup-plugin-node-polyfills/polyfills/process-es6",
        },
        {
          find: "@components",
          replacement: path.resolve(__dirname, "src/@core/components"),
        },
      ],
    },
    esbuild: {
      loader: "jsx",
      include: /.\/src\/.*\.js?$/,
      exclude: [],
      jsx: "automatic",
    },
    optimizeDeps: {
      esbuildOptions: {
        loader: {
          ".js": "jsx",
        },
        plugins: [
          NodeGlobalsPolyfillPlugin({
            buffer: true,
            process: true,
          }),
          {
            name: "load-js-files-as-jsx",
            setup(build) {
              build.onLoad({ filter: /src\\.*\.js$/ }, async (args) => ({
                loader: "jsx",
                contents: await fs.readFileSync(args.path, "utf8"),
              }));
            },
          },
        ],
      },
    },
    build: {
      rollupOptions: {
        plugins: [rollupNodePolyFill()],
      },
    },
  });
};

1. 错误原因及配置方案 #

这个错误是因为jspdf（包括其依赖的jspdf-autotable）的部分版本存在内部模块引用路径不规范的问题，或是依赖了Node.js环境特有的模块/全局变量，导致Vite底层的Rollup构建工具无法正确解析../internals/globalThis这个相对路径。

你可以尝试以下配置修复，无需直接移除库：

• 升级库版本：优先把jspdf和jspdf-autotable升级到最新稳定版，新版本大概率修复了这类路径解析Bug。
• 添加解析别名：在vite.config.js的resolve.alias数组中加入：

  { find: /^..\/internals\/globalThis$/, replacement: 'jspdf/dist/internals/globalThis' }
  

  （如果路径不对，可以去node_modules/jspdf里找到globalThis.js的实际位置调整）
• 强制预构建：在optimizeDeps.include中加入这两个库，让Vite提前处理它们的依赖：

  optimizeDeps: {
    include: ['jspdf', 'jspdf-autotable'],
    // ...其他现有配置
  }
  

2. React项目PDF下载替代库推荐 #

• @react-pdf/renderer：完全用React组件语法构建PDF，组件化开发，和React生态无缝衔接，适合自定义复杂PDF内容的场景，维护活跃。
• pdfmake：用声明式JSON语法定义PDF结构，无需操作DOM，适合生成带有复杂表格、样式的文档，支持浏览器端直接生成。
• html2pdf.js：如果要把现有React页面（HTML结构）转成PDF，这个工具最方便，直接抓取DOM节点生成PDF，快速实现简单页面导出。
• react-pdf：支持PDF渲染与生成，兼顾在线预览和下载功能，API简洁，适合需要预览+导出的场景。

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