我构建了我的 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”。
似乎是我使用 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 和捆绑支持。