Vite 无法解决 React 中的 'globalThis' 错误

Question

错误：

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

当我对 dist 文件使用纱线构建命令时，我遇到了这样的错误，但我解决了它。我的主要问题是，我使用了导致此错误的 jspdf 和 jspdf-autotable 库，当我删除它们时，问题就消失了。为什么这些库存在时会报错？我需要将其添加到配置文件中吗？

我可以使用哪个 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()],
      },
    },
  });
};```




I removed the library and the problem was solved

Answer 1

我在 2024 年遇到了这个错误，就我而言，这是导致问题的库：

"react-scroll-to-bottom": "^4.2.0"

。

将其从

package.json

中删除即可修复它。