[Bug]:vite使用legacy，打包mqtt会报错

wy-service commented 8 months ago

MQTTjs Version

^5.4.0

Broker

no

Environment

Browser

Description

vue3 vite legacy 遇到错误不需要做其他的操作，引用，打包的时候就会报错

Minimal Reproduction

package.json { "name": "jsy-admin", "private": true, "version": "0.0.0", "type": "module", "scripts": { "dev": "vite", "build": "vue-tsc && vite build", "preview": "vite preview", "lint": "eslint src/**/*.{ts,vue}", "fix": "eslint src/**/*.{ts,vue} --fix", "format": "prettier --write \"./**/*.{html,vue,ts,js,json}\"", "prepare": "husky install", "commit": "git-cz" }, "dependencies": { "@element-plus/icons-vue": "^2.3.1", "@vueuse/core": "^10.7.1", "axios": "^1.6.7", "element-plus": "^2.4.4", "exceljs": "^4.4.0", "file-saver": "^2.0.5", "mqtt": "^5.4.0", "normalize.css": "^8.0.1", "pinia": "^2.1.7", "pinia-plugin-persistedstate": "^3.2.1", "rollup-plugin-visualizer": "^5.12.0", "sass-loader": "^13.3.3", "v-viewer": "^3.0.13", "viewerjs": "^1.11.6", "vite-plugin-html": "^3.2.1", "vite-plugin-svg-icons": "^2.0.1", "vue": "^3.3.4", "vue-router": "^4.2.5" }, "devDependencies": { "@commitlint/cli": "^18.0.0", "@commitlint/config-conventional": "^18.0.0", "@iconify-json/ep": "^1.1.14", "@types/node": "^20.8.7", "@typescript-eslint/eslint-plugin": "^6.8.0", "@typescript-eslint/parser": "^6.8.0", "@vitejs/plugin-legacy": "^4.1.1", "@vitejs/plugin-vue": "^4.2.3", "commitizen": "^4.3.0", "commitlint-config-cz": "^0.13.3", "cz-conventional-changelog": "^3.3.0", "cz-git": "^1.7.1", "eslint": "^8.52.0", "eslint-config-prettier": "^9.0.0", "eslint-plugin-prettier": "^5.0.1", "eslint-plugin-vue": "^9.17.0", "husky": "^8.0.3", "prettier": "^3.0.3", "sass": "^1.69.7", "terser": "^5.29.1", "typescript": "^5.0.2", "unplugin-auto-import": "^0.16.7", "unplugin-vue-components": "^0.26.0", "vite": "^4.4.5", "vue-tsc": "^1.8.5" }, "config": { "commitizen": { "path": "node_modules/cz-git" } } } vite.confit.ts `import { defineConfig, loadEnv, ConfigEnv, UserConfig } from "vite"; import { createHtmlPlugin } from "vite-plugin-html"; import { visualizer } from "rollup-plugin-visualizer"; import vue from "@vitejs/plugin-vue"; import path from "path"; import AutoImport from "unplugin-auto-import/vite"; import Components from "unplugin-vue-components/vite"; import { ElementPlusResolver } from "unplugin-vue-components/resolvers"; import { createSvgIconsPlugin } from "vite-plugin-svg-icons"; import { resolve } from "path"; import legacy from "@vitejs/plugin-legacy";

const pathSrc = resolve(__dirname, "src");

const systemAutoImportDeps = {};

// https://vitejs.dev/config/ export default defineConfig(({ mode }: ConfigEnv): UserConfig => { const env = loadEnv(mode, process.cwd()); return { server: { host: "0.0.0.0", open: false, port: Number(env.VITE_APP_PORT), proxy: { // 反向代理解决跨域

      target: env.VITE_APP_TARGET_BASE_API,
      changeOrigin: true,
      rewrite: (path) =>
        path.replace(new RegExp("^" + env.VITE_API_BASE_URL), ""),
    },
  },
},
resolve: {
  alias: {
    "@": path.resolve(__dirname, "src"),
  },
},
plugins: [
  legacy({
    targets: ["defaults", "ie >= 11", "chrome 52"], //需要兼容的目标列表，可以设置多个
    additionalLegacyPolyfills: ["regenerator-runtime/runtime"],
    renderLegacyChunks: true,
    polyfills: [
      "es.symbol",
      "es.array.filter",
      "es.promise",
      "es.promise.finally",
      "es/map",
      "es/set",
      "es.array.for-each",
      "es.object.define-properties",
      "es.object.define-property",
      "es.object.get-own-property-descriptor",
      "es.object.get-own-property-descriptors",
      "es.object.keys",
      "es.object.to-string",
      "web.dom-collections.for-each",
      "esnext.global-this",
      "esnext.string.match-all",
    ],
  }),
  vue(),
  AutoImport({
    resolvers: [ElementPlusResolver()],
    imports: [
      // 插件预设支持导入的api
      "vue",
      "pinia",
      "vue-router",
      "@vueuse/core",
      // 自定义导入的api
      systemAutoImportDeps,
    ],
    vueTemplate: true,
    eslintrc: {
      enabled: true,
    },
    dts: "./auto-imports.d.ts",
  }),
  Components({
    resolvers: [ElementPlusResolver()],
    dts: "./src/components.d.ts",
  }),

  createSvgIconsPlugin({
    // 指定需要缓存的图标文件夹
    iconDirs: [resolve(pathSrc, "assets/icons")],
    // 指定symbolId格式
    symbolId: "icon-[dir]-[name]",
  }),
  createHtmlPlugin({
    minify: false,
    inject: {
      data: {
        title: env.VITE_APP_TITLE,
      },
    },
  }),
  visualizer(),
],
build: {
  minify: "terser",
  terserOptions: {
    format: {
      // 去掉注释
      comments: false,
    },
    compress: {
      //生产环境时移除console
      drop_console: true,
      drop_debugger: true,
    },
  },
},

}; }); **app.vue**

`

Debug logs

ERROR error during build: 14:13:19
Error: Transform failed with 4 errors: assets/index-!~{001}~.js:12090:5712: ERROR: Big integer literals are not available in the configured target environment ("chrome64", "edge79", "es2020", "firefox67", "safari12" + 3 overrides) assets/index-!~{001}~.js:12090:5716: ERROR: Big integer literals are not available in the configured target environment ("chrome64", "edge79", "es2020", "firefox67", "safari12" + 3 overrides) assets/index-!~{001}~.js:12090:5725: ERROR: Big integer literals are not available in the configured target environment ("chrome64", "edge79", "es2020", "firefox67", "safari12" + 3 overrides) assets/index-!~{001}~.js:12090:5729: ERROR: Big integer literals are not available in the configured target environment ("chrome64", "edge79", "es2020", "firefox67", "safari12" + 3 overrides) at failureErrorWithLog (D:\wangyu\web\vue\test\node_modules.pnpm\esbuild@0.18.20\node_modules\esbuild\lib\main.js:1649:15) at D:\wangyu\web\vue\test\node_modules.pnpm\esbuild@0.18.20\node_modules\esbuild\lib\main.js:847:29 at responseCallbacks. (D:\wangyu\web\vue\test\node_modules.pnpm\esbuild@0.18.20\node_modules\esbuild\lib\main.js:703:9) at handleIncomingPacket (D:\wangyu\web\vue\test\node_modules.pnpm\esbuild@0.18.20\node_modules\esbuild\lib\main.js:762:9) at Socket.readFromStdout (D:\wangyu\web\vue\test\node_modules.pnpm\esbuild@0.18.20\node_modules\esbuild\lib\main.js:679:7) at Socket.emit (node:events:514:28) at addChunk (node:internal/streams/readable:545:12) at readableAddChunkPushByteMode (node:internal/streams/readable:495:3) at Readable.push (node:internal/streams/readable:375:5) at Pipe.onStreamRead (node:internal/stream_base_commons:190:23)

ELIFECYCLE Command failed with exit code 1.

robertsLando commented 8 months ago

Try with this solution: https://stackoverflow.com/questions/75576741/how-to-solve-error-big-integer-literals-are-not-available-in-the-configured-tar

wy-service commented 8 months ago

Try with this solution: https://stackoverflow.com/questions/75576741/how-to-solve-error-big-integer-literals-are-not-available-in-the-configured-tar

This doesn't work

wy-service commented 8 months ago

ur:https://unpkg.com/mqtt@5.5.0/dist/mqtt.min.js I tried using the compiled file In lower versions of browsers, this file does not take effect, such as UC browser My final successful version is 4.1.0

Try with this solution: https://stackoverflow.com/questions/75576741/how-to-solve-error-big-integer-literals-are-not-available-in-the-configured-tar

mqttjs / MQTT.js