Maximum call stack size exceeded

[Awxm]

我在vue2中使用出错了,因为这是旧项目 我不好使用vue3 配置 cdn({ modules: [ { name: 'axios', relativeModule: './axios.min.js' }, { name: 'element-ui', relativeModule: './element-ui.min.js', aliases: ['client'] }, ], resolve: { name: 'resolve:cdnjs', setup({ extra }) { const baseURL = 'https://cdnjs.cloudflare.com/ajax/libs/'; const { version, name, relativeModule } = extra; console.log(relativeModule); const url = new URL(${name}/${version}/${relativeModule}, baseURL); console.log(url); return { url: url.href, injectTo: 'head-prepend', attrs: {}, }; }, }, }), 报错信息： vite-plugin-cdn2: axios Maximum call stack size exceeded
vite-plugin-cdn2: element-ui Maximum call stack size exceeded

package.json: "dependencies": { "@tinymce/tinymce-vue": "2.0.0", "axios": "0.18.1", "element-china-area-data": "5.0.2", "element-ui": "2.15.12", "js-md5": "0.7.3", "lodash": "4.17.21", "normalize.css": "7.0.0", "nprogress": "0.2.0", "path-browserify": "1.0.1", "path-to-regexp": "2.4.0", "rollup-plugin-external-globals": "0.9.1", "sortablejs": "1.13.0", "tinymce": "^5.0.3", "vue": "2.6.10", "vue-cropper": "0.6.4", "vue-dompurify-html": "2.6.0", "vue-router": "3.0.6", "vuedraggable": "2.24.3", "vuex": "3.1.0", "vuex-persistedstate": "^4.1.0" }, "devDependencies": { "rollup-plugin-visualizer": "5.12.0", "sass": "1.26.8", "unplugin-imagemin": "0.5.15", "vite": "4.3.9", "vite-plugin-cdn2": "1.1.0", "vite-plugin-compression2": "0.11.0", "vite-plugin-html": "3.2.0", "vite-plugin-image-optimizer": "1.1.7", "vite-plugin-theme": "0.8.6", "vite-plugin-vue2": "2.0.3", "vite-plugin-vue2-svg": "0.4.0", "vue-template-compiler": "2.6.10" },

[nonzzz]

你自己写了resolver 你可以拿到globalName吗? 上面那个信息只是警告。 页面有无报错呢？

[nonzzz]

同时如果你需要外部化element 你也需要外部化他的对等依赖比如vue

[nonzzz]

Maximum call stack 在不同机器上可能会有警告 但是不报错的话一般是能自动扫描到依赖的 如果你不想要警告你可以在手动传入globalName

[nonzzz]

import { cdnjs } from "vite-plugin-cdn2/resolver/cdnjs";

cdn({
  modules: [
    { name: "element-ui", relativeModule: "./index.min.js", global: "Element" },
    { name: "axios", relativeModule: "./axios.min.js" },
  ],
  resolve: cdnjs(),
});

[Awxm]

好的我试一下

[Awxm]

vite-plugin-cdn2: element-ui document is not defined 我遇到了一个新的问题 element-ui 也没有导入到html中

[Awxm]

  cdn({
    modules: [
      { name: 'vue', relativeModule: './dist/vue.min.js', global: 'Vue' },
      { name: 'axios', relativeModule: './axios.min.js', global: 'Axios' },
      { name: 'element-ui', relativeModule: './index.min.js', global: 'ElementUI' },
    ],
    resolve: cdnjs(),
  }),

这个是配置

[nonzzz]

@Awxm

set DEBUG=vite-plugin-cdn2 && vite build

开启debug模式看下日志信息。

[Awxm]

set DEBUG=vite-plugin-cdn2 && vite build

vite-plugin-cdn2 start scanning +0ms vite-plugin-cdn2 scanning done Map(2) { 'vue' => { name: 'vue', version: '2.6.10', relativeModule: './dist/vue.min.js', aliases: [], global: 'Vue', bindings: Set(1) { 'default' } }, 'axios' => { name: 'axios', version: '0.18.1', relativeModule: './axios.min.js', ERROR vite-plugin-cdn2: element-ui document is not defined

[Awxm]

我很疑惑为啥没有找到element-ui

[nonzzz]

如果去掉element的relativeModule呢? cdnjs感觉和unpkg这些不太一样。

[Awxm]

去掉element的relativeModule 还是会ERROR vite-plugin-cdn2: element-ui document is not defined

[nonzzz]

我试了下 这是import statment的问题 在node环境无法直接处理含有browser语义的模块。element-ui暂时无法直接加入到external里面。

[Awxm]

那就没有办法了 我只能考虑 element-ui 进行 chunk 处理