AWS-sdk 导致 React Vite Web 应用程序中出现构建错误“Uncaught TypeError：e 不是构造函数”

Question

我构建了我的 vite React 项目并将其放在 AWS S3 上来托管它，但是当我转到托管我的应用程序的链接时，我收到一条错误消息“Uncaught TypeError：e 不是构造函数”。

我期待工作应用程序，因为当我在本地主机上启动它时，它工作正常，没有错误。

当我构建我的应用程序时，控制台中出现此警告：

dist/assets/scheduler.d9bfe9e3.js                    4.01 KiB / gzip: 1.74 KiB
dist/assets/stylis.1e89421e.js                       4.11 KiB / gzip: 1.91 KiB
dist/assets/react-toastify.d4dfb48a.js               15.35 KiB / gzip: 6.12 KiB
dist/assets/uncontrollable.fe32bd1b.js               1.00 KiB / gzip: 0.60 KiB
dist/assets/toposort.06b496d5.js                     1.07 KiB / gzip: 0.54 KiB
dist/assets/unfetch.7178bd8e.js                      1.04 KiB / gzip: 0.59 KiB
dist/assets/uuid.fbc3d34b.js                         0.86 KiB / gzip: 0.46 KiB
dist/assets/warning.2aff9e2b.js                      0.00 KiB / gzip: 0.02 KiB
dist/assets/which-typed-array.504ccc43.js            0.92 KiB / gzip: 0.51 KiB
dist/assets/url.a29b1d7d.js                          7.13 KiB / gzip: 2.62 KiB
dist/assets/index.4e68ab58.css                       0.72 KiB / gzip: 0.47 KiB
dist/assets/util.6abea906.js                         11.92 KiB / gzip: 4.21 KiB
dist/assets/react-toastify.cca67129.css              11.16 KiB / gzip: 2.21 KiB
dist/assets/yup.033aeec8.js                          25.49 KiB / gzip: 8.51 KiB
dist/assets/moment.9709ab41.js                       58.51 KiB / gzip: 18.92 KiB
dist/assets/@mui.a4dc0e77.js                         128.63 KiB / gzip: 39.70 KiB
dist/assets/bootstrap.a1a5b93f.css                   189.76 KiB / gzip: 26.72 KiB
dist/assets/react-dom.b5ed22df.js                    127.41 KiB / gzip: 40.87 KiB
dist/assets/aws-sdk.ec0776c4.js                      2938.11 KiB / gzip: 392.96 KiB

(!) Some chunks are larger than 500 KiB after minification. Consider:
- Using dynamic import() to code-split the application
- Use build.rollupOptions.output.manualChunks to improve chunking: https://rollupjs.org/guide/en/#outputmanualchunks
- Adjust chunk size limit for this warning via build.chunkSizeWarningLimit.

在研究了很多网站并尝试了很多可能的修复方法之后，我终于部分地弄清楚了。问题是“aws-sdk”模块太大，当我执行“npm run build”时，控制台中会显示警告，该块太大，大于 500 KiB。为了解决这个问题，您需要从您需要的模块中导入特定的内容并在您的文件中使用它。

这是我的情况的一个例子：

import { CognitoIdentityCredentials } from 'aws-sdk/global';
import { config } from 'aws-sdk/global';
import S3 from 'aws-sdk/clients/s3';

但现在我在 aws-sdk 文件中遇到类似的错误“Uncaught TypeError: t is not a constructor”。

Answer 1

似乎是我使用 aws-sdk V2 将创建反应应用程序 (CRA) 迁移到 Vite 时遇到的问题。问题似乎是 aws-sdk v2 如果您将其包含在 package.json 文件中，则旨在 用作 nodeJS 依赖项，还有其他方法为浏览器构建它，但我需要配置rollup 来正确处理它。和你一样，我的应用程序在本地主机上运行，并带有

vite dev

，但在产品中失败，并带有

Uncaught TypeError: e is not a constructor

。

为了进一步解决该问题，我启用了 source map (vite.config.ts)。我建议您也这样做，这样您可以获得更详细的错误。:

  ... // other defineConfig options
  build: {
    ... // add you own options
    sourcemap: true,
  },

这向我指出了以下几点：

Uncaught TypeError: t is not a constructor
    at $dn (request.js:16:11)
    at _e (core.js:83:1)
    at credentials.js:1:11
    at index-8d39151f.js:1:24
    at index.tsx:55:4

这引导我到（/node_modules/aws_sdk/lib/request.js）：

var AWS = require('./core');
var AcceptorStateMachine = require('./state_machine');
var inherit = AWS.util.inherit;
var domain = AWS.util.domain;
var jmespath = require('jmespath');

// ...

var fsm = new AcceptorStateMachine();

这里的 require 语句没有按预期工作。通过搜索，我发现了一些问题并在下面代码的注释中列出了修复程序。我的工作 vite.config.ts:

/// <reference types="vitest" />
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import viteTsconfigPaths from 'vite-tsconfig-paths';
import svgrPlugin from 'vite-plugin-svgr';

// https://vitejs.dev/config/
export default defineConfig({
  // https://github.com/vitejs/vite/issues/1973
  define: {
    ...(process.env.NODE_ENV === 'development' ? { global: 'window' } : {}),
  },
  server: {
    port: 3000,
  },
  resolve: {
    // https://github.com/aws-amplify/amplify-js/issues/9639    
    alias: {
      './runtimeConfig': './runtimeConfig.browser',
    },
  },
  plugins: [react(), viteTsconfigPaths(), svgrPlugin()],
  test: {
    globals: true,
    environment: 'jsdom',
    setupFiles: './src/setupTests.ts',
    coverage: {
      reporter: ['text', 'html'],
      exclude: ['node_modules/', 'src/setupTests.ts'],
    },
  },
  build: {
    outDir: 'build',
    sourcemap: true,
    commonjsOptions: {
      include: [/node_modules/],
      extensions: ['.js', '.cjs'],
      strictRequires: true,
      // https://stackoverflow.com/questions/62770883/how-to-include-both-import-and-require-statements-in-the-bundle-using-rollup
      transformMixedEsModules: true,
    },
  },
});

我不能 100% 确定您遇到与我相同的问题，但我希望这可以帮助下一个找到它的人。

这里提到了另一种解决方案（遗憾的是他们没有很好的解释）。他们使用 aws sdk v3 作为 JS。根据文档，听起来它比 V2 具有更好的 webpack 和捆绑支持。

Answer 2

这个答案中的讨论很详细，我也遇到了这样的错误，我打算尝试从v2升级到v3来解决这个问题，但我担心这个问题与v2或v3版本无关，你能分享一下你最后是如何解决这个问题的吗？非常感谢！