Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
u007 opened this issue Jan 7, 2022 · 19 comments
Open

Comments

@u007
Copy link

u007 commented Jan 7, 2022

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/@vue+runtime-core@3.2.26/node_modules/@vue/runtime-core/dist/runtime-core.cjs.prod.js:2166:15)
    at createComponentInstance (project/node_modules/.pnpm/@vue+runtime-core@3.2.26/node_modules/@vue/runtime-core/dist/runtime-core.cjs.prod.js:5026:23)
    at renderComponentVNode (project/node_modules/.pnpm/@vue+server-renderer@3.2.26_vue@3.2.26/node_modules/@vue/server-renderer/dist/server-renderer.cjs.prod.js:194:22)
    at ssrRenderComponent (project/node_modules/.pnpm/@vue+server-renderer@3.2.26_vue@3.2.26/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/@vue+server-renderer@3.2.26_vue@3.2.26/node_modules/@vue/server-renderer/dist/server-renderer.cjs.prod.js:260:13)
    at renderComponentVNode (project/node_modules/.pnpm/@vue+server-renderer@3.2.26_vue@3.2.26/node_modules/@vue/server-renderer/dist/server-renderer.cjs.prod.js:211:16)
    at renderVNode (project/node_modules/.pnpm/@vue+server-renderer@3.2.26_vue@3.2.26/node_modules/@vue/server-renderer/dist/server-renderer.cjs.prod.js:301:22)
    at renderComponentSubTree (project/node_modules/.pnpm/@vue+server-renderer@3.2.26_vue@3.2.26/node_modules/@vue/server-renderer/dist/server-renderer.cjs.prod.js:266:13)
    at project/node_modules/.pnpm/vite-ssg@0.17.5_97bac1ad760e801e4df55702908e73e1/node_modules/vite-ssg/dist/node/cli.cjs:223:13
    at async Promise.all (index 0)
    at async build (project/node_modules/.pnpm/vite-ssg@0.17.5_97bac1ad760e801e4df55702908e73e1/node_modules/vite-ssg/dist/node/cli.cjs:196:3)
    at async Object.handler (project/node_modules/.pnpm/vite-ssg@0.17.5_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
Copy link
Author

u007 commented Jan 7, 2022

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
Copy link
Author

u007 commented Jan 7, 2022

sorry didnt see the component name

@u007 u007 closed this as completed Jan 7, 2022
@u007 u007 reopened this Jan 7, 2022
@userquin
Copy link
Member

userquin commented Jan 7, 2022

@u007 can you provide a repro?

EDIT: it is related also with #167?

@u007
Copy link
Author

u007 commented Jan 7, 2022

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

@u007
Copy link
Author

u007 commented Jan 8, 2022

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
Copy link
Member

userquin commented Jan 8, 2022

@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
Copy link
Author

u007 commented Jan 9, 2022

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

@u007
Copy link
Author

u007 commented Jan 9, 2022

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
Copy link
Author

u007 commented Jan 9, 2022

but having modules/ant.ts

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

app.use(Alert);

does not have that problem

@TMadzi
Copy link

TMadzi commented Jan 27, 2022

Having the same issue. How did you fix?

@u007
Copy link
Author

u007 commented Jan 27, 2022

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
Copy link
Member

userquin commented May 1, 2022

@u007 there is no way man, I also test your repo with #239 (you can check it using a previous variant here #150 (comment), for context read this entry #150 (comment) 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\ant-design-vue@3.0.0-beta.4_ae87cbba5ec93a01f3fe1197df446ca3\node_modules\ant-design-vue\lib\style\index.css:5    
[class^=ant-]::-ms-clear,
      ^^

SyntaxError: Unexpected token '^='

@u007
Copy link
Author

u007 commented May 1, 2022

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
Copy link
Member

userquin commented May 1, 2022

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 added a commit to creasico/creasico.github.io that referenced this issue Jul 15, 2022
See: antfu-collective/vite-ssg#168
Signed-off-by: Fery Wardiyanto <ferywardiyanto@gmail.com>
@feryardiant
Copy link

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/@vue+runtime-core@3.2.37/node_modules/@vue/runtime-core/dist/runtime-core.cjs.prod.js:3179:15)
    at createComponentInstance (/Path/To/Project/node_modules/.pnpm/@vue+runtime-core@3.2.37/node_modules/@vue/runtime-core/dist/runtime-core.cjs.prod.js:5695:23)
    at renderComponentVNode (/Path/To/Project/node_modules/.pnpm/@vue+server-renderer@3.2.37_vue@3.2.37/node_modules/@vue/server-renderer/dist/server-renderer.cjs.prod.js:168:22)
    at ssrRenderComponent (/Path/To/Project/node_modules/.pnpm/@vue+server-renderer@3.2.37_vue@3.2.37/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/@vue+server-renderer@3.2.37_vue@3.2.37/node_modules/@vue/server-renderer/dist/server-renderer.cjs.prod.js:250:13)
    at renderComponentVNode (/Path/To/Project/node_modules/.pnpm/@vue+server-renderer@3.2.37_vue@3.2.37/node_modules/@vue/server-renderer/dist/server-renderer.cjs.prod.js:185:16)
    at renderVNode (/Path/To/Project/node_modules/.pnpm/@vue+server-renderer@3.2.37_vue@3.2.37/node_modules/@vue/server-renderer/dist/server-renderer.cjs.prod.js:292:22)
    at renderComponentSubTree (/Path/To/Project/node_modules/.pnpm/@vue+server-renderer@3.2.37_vue@3.2.37/node_modules/@vue/server-renderer/dist/server-renderer.cjs.prod.js:256:13)
    at file:///Path/To/Project/node_modules/.pnpm/vite-ssg@0.20.2_rhu6widazyensit7g7iqgdpozy/node_modules/vite-ssg/dist/chunks/build.mjs:218:15
    at async run (/Path/To/Project/node_modules/.pnpm/p-queue@6.6.2/node_modules/p-queue/dist/index.js:163:29)

@chengpeiquan
Copy link

遇到类似的问题,但在我升级到之后发生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/@vue+runtime-core@3.2.37/node_modules/@vue/runtime-core/dist/runtime-core.cjs.prod.js:3179:15)
    at createComponentInstance (/Path/To/Project/node_modules/.pnpm/@vue+runtime-core@3.2.37/node_modules/@vue/runtime-core/dist/runtime-core.cjs.prod.js:5695:23)
    at renderComponentVNode (/Path/To/Project/node_modules/.pnpm/@vue+server-renderer@3.2.37_vue@3.2.37/node_modules/@vue/server-renderer/dist/server-renderer.cjs.prod.js:168:22)
    at ssrRenderComponent (/Path/To/Project/node_modules/.pnpm/@vue+server-renderer@3.2.37_vue@3.2.37/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/@vue+server-renderer@3.2.37_vue@3.2.37/node_modules/@vue/server-renderer/dist/server-renderer.cjs.prod.js:250:13)
    at renderComponentVNode (/Path/To/Project/node_modules/.pnpm/@vue+server-renderer@3.2.37_vue@3.2.37/node_modules/@vue/server-renderer/dist/server-renderer.cjs.prod.js:185:16)
    at renderVNode (/Path/To/Project/node_modules/.pnpm/@vue+server-renderer@3.2.37_vue@3.2.37/node_modules/@vue/server-renderer/dist/server-renderer.cjs.prod.js:292:22)
    at renderComponentSubTree (/Path/To/Project/node_modules/.pnpm/@vue+server-renderer@3.2.37_vue@3.2.37/node_modules/@vue/server-renderer/dist/server-renderer.cjs.prod.js:256:13)
    at file:///Path/To/Project/node_modules/.pnpm/vite-ssg@0.20.2_rhu6widazyensit7g7iqgdpozy/node_modules/vite-ssg/dist/chunks/build.mjs:218:15
    at async run (/Path/To/Project/node_modules/.pnpm/p-queue@6.6.2/node_modules/p-queue/dist/index.js:163:29)

Me too.

@hannoeru
Copy link
Collaborator

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
Copy link

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

@u007
Copy link
Author

u007 commented Sep 6, 2022

@hannoeru that is sad case, same here

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

8 participants