using latest packages vite-ssg build throws Invalid value used as weak map key

[u007]

when i run vite build, it completed successfully. but when i run npx vite-ssg build (building for server...)

(node:11183) UnhandledPromiseRejectionWarning: Error: [vite-ssg] Error on page: /
TypeError: Invalid value used as weak map key
    at WeakMap.set (<anonymous>)
    at normalizePropsOptions (project/node_modules/.pnpm/@[email protected]/node_modules/@vue/runtime-core/dist/runtime-core.cjs.prod.js:2166:15)
    at createComponentInstance (project/node_modules/.pnpm/@[email protected]/node_modules/@vue/runtime-core/dist/runtime-core.cjs.prod.js:5026:23)
    at renderComponentVNode (project/node_modules/.pnpm/@[email protected][email protected]/node_modules/@vue/server-renderer/dist/server-renderer.cjs.prod.js:194:22)
    at ssrRenderComponent (project/node_modules/.pnpm/@[email protected][email protected]/node_modules/@vue/server-renderer/dist/server-renderer.cjs.prod.js:620:12)
    at file://project/.vite-ssg-temp/main.mjs:1770:13
    at renderComponentSubTree (project/node_modules/.pnpm/@[email protected][email protected]/node_modules/@vue/server-renderer/dist/server-renderer.cjs.prod.js:260:13)
    at renderComponentVNode (project/node_modules/.pnpm/@[email protected][email protected]/node_modules/@vue/server-renderer/dist/server-renderer.cjs.prod.js:211:16)
    at renderVNode (project/node_modules/.pnpm/@[email protected][email protected]/node_modules/@vue/server-renderer/dist/server-renderer.cjs.prod.js:301:22)
    at renderComponentSubTree (project/node_modules/.pnpm/@[email protected][email protected]/node_modules/@vue/server-renderer/dist/server-renderer.cjs.prod.js:266:13)
    at project/node_modules/.pnpm/[email protected]_97bac1ad760e801e4df55702908e73e1/node_modules/vite-ssg/dist/node/cli.cjs:223:13
    at async Promise.all (index 0)
    at async build (project/node_modules/.pnpm/[email protected]_97bac1ad760e801e4df55702908e73e1/node_modules/vite-ssg/dist/node/cli.cjs:196:3)
    at async Object.handler (project/node_modules/.pnpm/[email protected]_97bac1ad760e801e4df55702908e73e1/node_modules/vite-ssg/dist/node/cli.cjs:294:3)
(Use `node --trace-warnings ...` to show where the warning was created)
(node:11183) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 9)
(node:11183) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

my package.json

{
  "private": true,
  "scripts": {
    "serve": "vite preview",
    "build": "cross-env NODE_ENV=production vite-ssg build",
    "lint": "eslint \"**/*.{vue,ts,js}\"",
    "dev": "vite",
    "preview": "vite preview",
    "preview-https": "serve dist",
    "test": "cypress open",
    "typecheck": "vue-tsc --noEmit"
  },
  "dependencies": {
    "@ant-design/icons-vue": "^6.0.1",
    "@mdi/font": "6.5.95",
    "@vueuse/core": "^7.5.3",
    "@vueuse/head": "^0.7.4",
    "ant-design-vue": "^3.0.0-beta.4",
    "axios": "^0.24.0",
    "dotenv-flow": "^3.2.0",
    "less": "^4.1.2",
    "material-design-icons": "^3.0.1",
    "moment": "^2.29.1",
    "nprogress": "^0.2.0",
    "pinia": "^2.0.9",
    "postcss": "^8.4.5",
    "prism-theme-vars": "^0.2.2",
    "realm-web": "^1.5.1",
    "roboto-fontface": "*",
    "sass": "^1.46.0",
    "unplugin-icons": "^0.13.0",
    "vite-plugin-style-import": "^1.4.1",
    "vue": "^3.2.26",
    "vue-demi": "^0.12.1",
    "vue-i18n": "^9.1.9",
    "vue-router": "^4.0.12",
    "vue-template-compiler": "^2.6.14",
    "vuelidate": "^0.7.7",
    "vuex": "^4.0.2",
    "vuex-persistedstate": "^4.1.0",
    "webfontloader": "^1.6.28"
  },
  "devDependencies": {
    "@antfu/eslint-config": "^0.15.0",
    "@babel/core": "^7.16.7",
    "@iconify-json/carbon": "^1.0.12",
    "@iconify-json/fa": "^1.0.1",
    "@iconify-json/ri": "^1.0.2",
    "@intlify/vite-plugin-vue-i18n": "^3.2.1",
    "@types/nprogress": "^0.2.0",
    "@vitejs/plugin-vue": "^2.0.1",
    "@vue/cli-plugin-babel": "5.0.0-beta.7",
    "@vue/cli-service": "5.0.0-beta.7",
    "@vue/compiler-sfc": "^3.2.26",
    "@vue/server-renderer": "^3.2.26",
    "critters": "^0.0.16",
    "cross-env": "^7.0.3",
    "eslint": "^8.6.0",
    "eslint-plugin-cypress": "^2.12.1",
    "https-localhost": "^4.7.0",
    "pnpm": "^6.25.0",
    "sass": "^1.46.0",
    "typescript": "^4.5.4",
    "unplugin-auto-import": "^0.5.5",
    "unplugin-vue-components": "^0.17.11",
    "vite": "^2.7.10",
    "vite-plugin-inspect": "^0.3.13",
    "vite-plugin-md": "^0.11.7",
    "vite-plugin-pages": "^0.19.9",
    "vite-plugin-pwa": "^0.11.12",
    "vite-plugin-vue-layouts": "^0.5.0",
    "vite-plugin-windicss": "^1.6.1",
    "vite-ssg": "^0.17.5",
    "vue-tsc": "^0.30.2"
  },
  "prettier": {
    "singleQuote": true,
    "semi": false
  }
}

[u007]

hi, after digging into the built script, realise its because my component was not imported. i think there should be a check on the component that is build to ensure it exists, or otherwise throw an error to indicate which page.vue/file.vue using which component causing the error

[u007]

sorry didnt see the component name

[userquin]

@u007 can you provide a repro?

EDIT: it is related also with #167?

[u007]

hmm i think its not related, that one shows es error

[u007]

okay here is the repo https://github.com/u007/vite-ssg-ant

, can see that ive commented out all the modules/ant.ts and also did not import the component, npm run build will throw error on vite-ssg build

[userquin]

@u007 what version of node are you using?

I'm using node 16.3 LTS: there is no way, I think ant as wrong esm support: I just patch its package.json file, but once fixed I get this another error, adding this import on src/modules/ant.ts:

import { Col, Row, Carousel, DatePicker, Layout, Button, Drawer, Form, Alert, Spin } from 'ant-design-vue/es';

and the original:

import { Col, Row, Carousel, DatePicker, Layout, Button, Drawer, Form, Alert, Spin } from 'ant-design-vue';

Error [ERR_MODULE_NOT_FOUND]: Cannot find module 'F:\work\projects\quini\GitHub\issue-repro\vite-ssg-168-ant\node_modules\ant-design-vue\es\alert\style\css' imported from F:\work\projects\quini\GitHub\issue-repr
o\vite-ssg-168-ant\.vite-ssg-temp\main.mjs
    at new NodeError (node:internal/errors:371:5)
    at finalizeResolution (node:internal/modules/esm/resolve:416:11)
    at moduleResolve (node:internal/modules/esm/resolve:932:10)
    at defaultResolve (node:internal/modules/esm/resolve:1044:11)
    at ESMLoader.resolve (node:internal/modules/esm/loader:422:30)
    at ESMLoader.getModuleJob (node:internal/modules/esm/loader:222:40)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:76:40)
    at link (node:internal/modules/esm/module_job:75:36) {
  code: 'ERR_MODULE_NOT_FOUND'

patched ant package.json (added exports entry):

  "exports": {
    "./*": "./*",
    ".": {
      "require": "./lib/index.js",
      "import": "./lib/index.js",
      "types": "./lib/index.d.ts"
    },
    "./es": {
      "import": "./es/index.js",
      "types": "./es/index.d.ts"
    }
  },
  "main": "lib/index.js",
  "module": "es/index.js",
  "unpkg": "dist/antd.min.js",
  "typings": "lib/index.d.ts",

I also tried removing ant.ts module and importing Alert component on index.vue (using import { Alert } from 'ant-design-vue' and import { Alert } from 'ant-design-vue/es'), getting the same error:

Error [ERR_MODULE_NOT_FOUND]: Cannot find module 'F:\work\projects\quini\GitHub\issue-repro\vite-ssg-168-ant\node_modules\ant-design-vue\es\layout\style\css' imported from F:\work\projects\quini\GitHub\issue-rep
ro\vite-ssg-168-ant\.vite-ssg-temp\main.mjs
    at new NodeError (node:internal/errors:371:5)
    at finalizeResolution (node:internal/modules/esm/resolve:416:11)
    at moduleResolve (node:internal/modules/esm/resolve:932:10)
    at defaultResolve (node:internal/modules/esm/resolve:1044:11)
    at ESMLoader.resolve (node:internal/modules/esm/loader:422:30)
    at ESMLoader.getModuleJob (node:internal/modules/esm/loader:222:40)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:76:40)
    at link (node:internal/modules/esm/module_job:75:36) {
  code: 'ERR_MODULE_NOT_FOUND'
}

[u007]

iam using node 14, hmm so there is problem on node 16 also

[u007]

okay i switched to node 16, its using pnpm (reminder). then i realise, it will still throw weak key arror unless we use alias

import { Alert as AAlert } from 'ant-design-vue';

[u007]

but having modules/ant.ts

import { Alert } from 'ant-design-vue';

app.use(Alert);

does not have that problem

[TMadzi]

Having the same issue. How did you fix?

[u007]

u have to check which component is missing, if u r using ant design, u have to either import it or manually use like what i code to make it run. the error basically related to missing component

[userquin]

@u007 there is no way man, I also test your repo with #239 (you can check it using a previous variant here https://github.com/antfu/vite-ssg/issues/150#issuecomment-1113997316, for context read this entry https://github.com/antfu/vite-ssg/issues/150#issuecomment-1113992002 but use the tgz from former comment) removing styleImport plugin and adding AntDesignVueResolver({ cjs: true }) but now I get this error when building SSR (it is too slow to run dev and build):

[vite-ssg] An internal error occurred.
[vite-ssg] Please report an issue, if none already exists: https://github.com/antfu/vite-ssg/issues
F:\work\projects\quini\GitHub\issue-repro\vite-ssg-issues\vite-ssg-ant-master\node_modules\.pnpm\[email protected]_ae87cbba5ec93a01f3fe1197df446ca3\node_modules\ant-design-vue\lib\style\index.css:5    
[class^=ant-]::-ms-clear,
      ^^

SyntaxError: Unexpected token '^='

[u007]

that error seems new, i think u need to go one by one to remove all pages, and then slowly add back 1 by 1 pages and component to see when it happen again

[userquin]

Too much work, I start patching the ant design icons but I stoppped since we need to add each es/icons entry to the package.json file to the exports entry.

Edit: using esm instead cjs to avoid previous error

[feryardiant]

Come across similar issue, but in my case is happened after I upgrade to vite v3, once I revert back to vite v2 everything's works just fine.

Here's my error output, just in case

Error: [vite-ssg] Error on page: /about
TypeError: Invalid value used as weak map key
    at WeakMap.set (<anonymous>)
    at normalizePropsOptions (/Path/To/Project/node_modules/.pnpm/@[email protected]/node_modules/@vue/runtime-core/dist/runtime-core.cjs.prod.js:3179:15)
    at createComponentInstance (/Path/To/Project/node_modules/.pnpm/@[email protected]/node_modules/@vue/runtime-core/dist/runtime-core.cjs.prod.js:5695:23)
    at renderComponentVNode (/Path/To/Project/node_modules/.pnpm/@[email protected][email protected]/node_modules/@vue/server-renderer/dist/server-renderer.cjs.prod.js:168:22)
    at ssrRenderComponent (/Path/To/Project/node_modules/.pnpm/@[email protected][email protected]/node_modules/@vue/server-renderer/dist/server-renderer.cjs.prod.js:605:12)
    at file:///Path/To/Project/.vite-ssg-temp/main.mjs:4312:13
    at renderComponentSubTree (/Path/To/Project/node_modules/.pnpm/@[email protected][email protected]/node_modules/@vue/server-renderer/dist/server-renderer.cjs.prod.js:250:13)
    at renderComponentVNode (/Path/To/Project/node_modules/.pnpm/@[email protected][email protected]/node_modules/@vue/server-renderer/dist/server-renderer.cjs.prod.js:185:16)
    at renderVNode (/Path/To/Project/node_modules/.pnpm/@[email protected][email protected]/node_modules/@vue/server-renderer/dist/server-renderer.cjs.prod.js:292:22)
    at renderComponentSubTree (/Path/To/Project/node_modules/.pnpm/@[email protected][email protected]/node_modules/@vue/server-renderer/dist/server-renderer.cjs.prod.js:256:13)
    at file:///Path/To/Project/node_modules/.pnpm/[email protected]_rhu6widazyensit7g7iqgdpozy/node_modules/vite-ssg/dist/chunks/build.mjs:218:15
    at async run (/Path/To/Project/node_modules/.pnpm/[email protected]/node_modules/p-queue/dist/index.js:163:29)

[chengpeiquan]

遇到类似的问题，但在我升级到之后发生vite v3，一旦我恢复到vite v2一切正常。

这是我的错误输出，以防万一

Error: [vite-ssg] Error on page: /about
TypeError: Invalid value used as weak map key
    at WeakMap.set (<anonymous>)
    at normalizePropsOptions (/Path/To/Project/node_modules/.pnpm/@[email protected]/node_modules/@vue/runtime-core/dist/runtime-core.cjs.prod.js:3179:15)
    at createComponentInstance (/Path/To/Project/node_modules/.pnpm/@[email protected]/node_modules/@vue/runtime-core/dist/runtime-core.cjs.prod.js:5695:23)
    at renderComponentVNode (/Path/To/Project/node_modules/.pnpm/@[email protected][email protected]/node_modules/@vue/server-renderer/dist/server-renderer.cjs.prod.js:168:22)
    at ssrRenderComponent (/Path/To/Project/node_modules/.pnpm/@[email protected][email protected]/node_modules/@vue/server-renderer/dist/server-renderer.cjs.prod.js:605:12)
    at file:///Path/To/Project/.vite-ssg-temp/main.mjs:4312:13
    at renderComponentSubTree (/Path/To/Project/node_modules/.pnpm/@[email protected][email protected]/node_modules/@vue/server-renderer/dist/server-renderer.cjs.prod.js:250:13)
    at renderComponentVNode (/Path/To/Project/node_modules/.pnpm/@[email protected][email protected]/node_modules/@vue/server-renderer/dist/server-renderer.cjs.prod.js:185:16)
    at renderVNode (/Path/To/Project/node_modules/.pnpm/@[email protected][email protected]/node_modules/@vue/server-renderer/dist/server-renderer.cjs.prod.js:292:22)
    at renderComponentSubTree (/Path/To/Project/node_modules/.pnpm/@[email protected][email protected]/node_modules/@vue/server-renderer/dist/server-renderer.cjs.prod.js:256:13)
    at file:///Path/To/Project/node_modules/.pnpm/[email protected]_rhu6widazyensit7g7iqgdpozy/node_modules/vite-ssg/dist/chunks/build.mjs:218:15
    at async run (/Path/To/Project/node_modules/.pnpm/[email protected]/node_modules/p-queue/dist/index.js:163:29)

Me too.

[hannoeru]

Normally every time I facing this problem is most related to a invalid DOM element in vue template, try to comment out code page by page then go smaller scale, finally you will find it.

[boussadjra]

I got the same issue because I've a wrong element name <class i-carbon-copy />, it was just a typo

[u007]

@hannoeru that is sad case, same here