Error when using @vue/compat.

bernardocorbella commented 10 months ago

Describe the bug

When using the build @vue/compat and installing it according to the migration guide (ie: using alias in vite), the tests fail with the following message:

TypeError: Cannot read properties of null (reading 'isCE')

This happens when you try to render a component with a slot.

Looking around, I have found this is a very similar issue than: https://github.com/vitest-dev/vitest/issues/1886. Following the instructions here, I have managed to add @vue/test-utils to the inlined dependencies (as you can see in the reproduction).

The issue happens whenever adding @testing-library/vue. The tests using testing-library now also fail due to the same reason. At this point I have tried multiple combinations of inlining dependencies without much luck.

If I manually edit the node_modules/@vue/test-utils/dist/vue-test-utils.cjs.js file and change the vue import to @vue/compat, both of the tests work.

I suspect the solution might be simpler and would also happily contribute in case its needed.

Thank you!

Reproduction

https://github.com/bernardocorbella/vue-compat-vite-slot-error

You can see the test file in which one test passes and one fails.

System Info

System:
    OS: macOS 14.1.1
    CPU: (8) arm64 Apple M1
    Memory: 75.09 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.18.2 - ~/.volta/tools/image/node/18.18.2/bin/node
    Yarn: 1.22.19 - ~/.volta/tools/image/yarn/1.22.19/bin/yarn
    npm: 9.4.0 - ~/.volta/tools/image/npm/9.4.0/bin/npm
    pnpm: 8.11.0 - ~/.volta/bin/pnpm
  Browsers:
    Chrome: 119.0.6045.159
    Safari: 17.1
  npmPackages:
    @vitejs/plugin-vue: ^4.4.0 => 4.5.0 
    vite: ^4.4.11 => 4.5.0 
    vitest: ^0.34.6 => 0.34.6

Used Package Manager

pnpm

Validations

[X] Follow our Code of Conduct
[X] Read the Contributing Guidelines.
[X] Read the docs.
[X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
[X] Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
[X] The provided reproduction is a minimal reproducible example of the bug.

yacinehmito commented 8 months ago

We are seeing the same issue, in the exact same context.

joshrincon-aven commented 6 months ago

did you guys find a solution to this?

yacinehmito commented 6 months ago

We patched @vue/test-utils so that it would import vue instead of @vue/compat. Inelegant but it works. (We use patch-package to do this).

diff --git a/node_modules/@vue/test-utils/dist/vue-test-utils.cjs.js b/node_modules/@vue/test-utils/dist/vue-test-utils.cjs.js
index 8ca89e9..ef246d0 100644
--- a/node_modules/@vue/test-utils/dist/vue-test-utils.cjs.js
+++ b/node_modules/@vue/test-utils/dist/vue-test-utils.cjs.js
@@ -7,7 +7,7 @@

 'use strict';

-var Vue = require('vue');
+var Vue = require('@vue/compat');
 var compilerDom = require('@vue/compiler-dom');
 var serverRenderer = require('@vue/server-renderer');

damianlluch commented 3 weeks ago

Is it possible to use Vite with Vue Compat?

yacinehmito commented 3 weeks ago

Is it possible to use Vite with Vue Compat? Yes, we successfully use it with vue compat.

With Vitest, aliasing @vue/compat to vue seems to work fine when the vue imports originate from the project's direct source code, but not always when it comes from the dependencies, as exemplified here with @vue/test-utils. The imports have to be manually patched in the dependencies' source code until this bug is fixed.

vitest-dev / vitest