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

Vue compat with Jest: "TypeError: decode_js.EntityDecoder is not a constructor" #10609

Open
baffalop opened this issue Mar 28, 2024 · 6 comments · May be fixed by #12514
Open

Vue compat with Jest: "TypeError: decode_js.EntityDecoder is not a constructor" #10609

baffalop opened this issue Mar 28, 2024 · 6 comments · May be fixed by #12514

Comments

@baffalop
Copy link

baffalop commented Mar 28, 2024

Vue version

3.4.21 (with @vue/compat 3.4.21)

Link to minimal reproduction

https://stackblitz.com/edit/vue2-jest-8qoex3?file=jest.config.js&view=editor

Steps to reproduce

yarn install
yarn test

What is expected?

I would like to run unit tests with Vue Test Utils, while on the migration build. My application has Vue 2 dependencies which cause unit tests to fail when they are run with Vue 3. I would expect to be able to use the migration build to fix this by aliasing vue to @vue/compat via moduleNameMapper. (This is the approach recommended by vue-test-utils-compat though the minimal reproduction uses latest @vue/test-utils.)

What is actually happening?

Running tests with moduleNameMapper: { '^vue$': '@vue/compat' } causes the following TypeError:

TypeError: decode_js.EntityDecoder is not a constructor
...
at new Tokenizer (node_modules/@vue/compat/dist/vue.cjs.js:13619:28)
      at Object.<anonymous> (tests/unit/example.spec.ts:6:22)

System Info

System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 18.18.0 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.2.3 - /usr/local/bin/npm
    pnpm: 8.15.3 - /usr/local/bin/pnpm
  npmPackages:
    vue: ^3.3.4 => 3.4.21 

Any additional comments?

This is the same error as in #10148 though it doesn't affect me at build- or runtime, only in Jest.

@baffalop
Copy link
Author

baffalop commented Mar 28, 2024

Update: I was mistaken about versions. My ^3.3.4 actually resolved to 3.4. When I pin both vue and @vue/compat to ~3.3.4 the issue goes away. This fits with #10148 which reports the error as only present on 3.4, not 3.3.

@kumarimanjari
Copy link

Is there any update on this issue further, I am also getting this issue in my project.

@lzl0304
Copy link
Contributor

lzl0304 commented Jun 11, 2024

The problem is caused by incompatible dependency versions, Vue depends on entities:^4.5.0, but there are other packages that depend on entities:^2.2.0, for some reason the dependency installed by yarn is only entities:^2.2.0, which leads to runtime errors.

I tried to use npm, pnpm to install the dependency is not error, just for reference.

@mashpie
Copy link

mashpie commented Aug 23, 2024

usually I don't express any emotion... and pleas don't get me wrong I don't mean to blame anyone. I came to this issue because of:

[nuxt] [request error] [unhandled] [500] decode_js.EntityDecoder is not a constructor
  at new Tokenizer (./.output/server/chunks/routes/renderer.mjs:15285:28)
  at ./.output/server/chunks/routes/renderer.mjs:16986:19
  at ModuleJob.run (node:internal/modules/esm/module_job:262:25)
  at async onImport.tracePromise.__proto__ (node:internal/modules/esm/loader:482:26)
  at async Object.handler (./.output/server/chunks/runtime.mjs:2986:19)
  at async Server.toNodeHandle (./.output/server/chunks/runtime.mjs:3256:7)

which - out of a sudden - spits out after a fresh docker build of a nuxt project opting in to enable vue runtime compiler and... yes, of course working fine on local dev with node 20.12.2 but not with docker build. All builds (2 years+) without that compile() part of the project went well over node versions 18 to 22...

So:

  • nuxt refers to vue
  • vue refers to node version
  • node version refers to docker tags
  • ...tried many combinations of node:20+++

the error remained the same, the line (with context) reads like:

    {
      this.entityDecoder = new decode_js.EntityDecoder(
        decode_js.htmlDecodeTree,
        (cp, consumed) => this.emitCodePoint(cp, consumed)
      );
    }

with (line 1483):

var decode_js = require$$1;

aha, now... what?

how much abstraction is going on here - and causing confusion. All I wanted is to transfere a <image id="123"/> to <img src="https://..../123/img.webp" /> with a vue component buried in nuxt project recieving that tag as string from a database.

God knows I am a big advocate for js and vue (in favor of react) or nuxt (in favor of next) etc. - but this time I wich to be writing perl cgi as we did 20years ago. 10min done.

...sorry no rant at all just frustration. Hope to find solution by myself over the weekend.

@mashpie
Copy link

mashpie commented Aug 23, 2024

...for reference (as @lzl0304 stated) the output of pnpm why entities -r shows a mix of [email protected] and [email protected]
why.txt

@mashpie
Copy link

mashpie commented Aug 23, 2024

HA! removed all and every package that required an `entities? version < 4.5 (thanks again @lzl0304) and violá build & run works as I were running local dev in production... conclusion?

monorepos have a limit when trying to mix legacy and modern packages. Stick to single repos in that case - cheers! (hope, this helps anyone stucked similar)

came here from #10148 (for ref)

haoqunjiang added a commit to haoqunjiang/core that referenced this issue Dec 9, 2024
Fixes vuejs#10609

Unlike the `vue` package, direct dependencies of `@vue/compat` are not
externalized:
https://github.com/vuejs/core/blob/201936f9a3909ae9dca4e131e1f5ad5a1c0feb77/rollup.config.js#L274

So it depends on `entities` directly in its CJS build, unlike the `vue`
one which indirectly depends on it via `@vue/compiler-core`.
So `entities` must be explicitly added to `@vue/compat` deps to avoid
incorrect dependency resolution due to different `node_modules` layouts,
such as in vuejs#10609.
haoqunjiang added a commit to haoqunjiang/core that referenced this issue Dec 9, 2024
Fixes vuejs#10609

Unlike the `vue` package, direct dependencies of `@vue/compat` are not
externalized:
https://github.com/vuejs/core/blob/201936f9a3909ae9dca4e131e1f5ad5a1c0feb77/rollup.config.js#L274

So it depends on `entities` directly in its CJS build, unlike the `vue`
one which indirectly depends on it via `@vue/compiler-core`.
So `entities` must be explicitly added to `@vue/compat` deps to avoid
incorrect dependency resolution due to different `node_modules` layouts,
such as in vuejs#10609 (comment)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

5 participants