Can not run tests when using preact compat alias #1652
Comments
|
I've checked https://github.com/preactjs/compat-alias-package, it seems to have proper exports. Can't really tell why this happens |
|
I see that the error is coming from |
This config: Produces exactly the same error, with this config: I get error: |
|
Other than react-router-dom I faced this error with styled components and recoil and probably other libraries that rely on |
|
Tried https://preactjs.com/guide/v10/getting-started#aliasing-in-rollup instead of alias package - this works in vite, but doesn't work in vitest even with #1634 |
Please, read again: Currently files inside node_modules are not processed by Vite. They are executed by Native Node without any transforming. If |
|
One of the solutions from https://vitejs.dev/guide/ssr.html#ssr-externals:
|
tried all possible ways to add |
No, Vite recommends defining react inside Note: I understand |
|
If I add this to "exports": {
".": {
"import": "./index.js"
}
}This means that I wan't able to make your reproduction run, so I would recommend opening an issue in |
Weird,
The thing is, there at least 4 more libraries in my main project with such issue and dealing with all of those this way takes ages to complete, would be way better to see some workaround (at least temporal) |
I mean, I wasn't able to fix it.
I proposed several workarounds. The main problem with all of them I guess is the wrong |
tried doing this, getting this error: |
|
Managed to fix most errors in main package codebase by patching package.json files in node_modules definitely needs some workaround |
|
Upd. was able to force esm for most deps using alias and #1673 Is there any way I can force preact to be CJS @sheremet-va, tried aliasing but no luck? Unfortunately most react UI libraries aren't into supporting node native esm, they prefer bundlers to do they work |
|
@wight554 yes, I also tried this MR agains your repro with no luck.
Unfortunately Vite's resolution algorithm is asynchronous, so it's not possible to reuse it. Maybe you can try and hijack |
I was able to workaround it before by using TS CJS interop https://devblogs.microsoft.com/typescript/announcing-typescript-4-7-beta/#commonjs-interop |
|
Upd. was able to fix it by using cjs interop for all 'preact/hooks' (all packages with multiple version) imports and testing library |
|
@wight554 cjs interop is the same as using Using |
I wonder if it's possible to force configurable deps list to use require instead of import from vitest side i've seen nodejs createRequire, but idk how can I try to add it to vitest |
Vitest injects |
managed to achieve same result with this is way more DX friendly it is possible to cover this internally? |
|
Upd. cleanest solution I was able to implement: Upd2. Can be splitted to simple: I don't mind having this in codebase or as separate plugin, but still would be nicer to see smth like this in vitest itself, either way issue can be closed since there's acceptable fix |
Vitest has both |
I meant having a separate option that'll use alias internally to simplify logic, but that's not really necessary |
|
Just a note -> I got it to work with the solution from @wight554 🙏 - but only when combined with https://github.com/preactjs/compat-alias-package |
|
@acapro got it working as well with the mixture of All my tests pass expect the ones testing custom hooks. Did you have any like that? am using |
|
I'm facing similar issue with
// inside styled-components.native.cjs.js
var reactNative = require('react-native');I'm using an alias for react-native -> react-native-web, but adding test.alias or test.deps.inline didn't help. I guess vite can't transpile this? Manually patching the dependency solves the problem, but it would be nice if vite could override the // inside styled-components.native.cjs.js
-var reactNative = require('react-native');
+var reactNative = require('react-native-web');Here's my config: export default defineConfig({
plugins: [react()],
resolve: {
alias: {
'react-native': 'react-native-web',
},
},
test: {
environment: 'jsdom',
setupFiles: './tests/setup.ts',
},
}); |
Vitest doesn't support aliasing |
|
I had a similar problem with a And then in the setup file I manually created an override for the library's React version by changing require('react'); // to force load it
const modulePath = path.join('node_modules', 'react', 'index.js');
const source = path.resolve(__dirname, '..', 'my-lib', modulePath);
const target = path.resolve(__dirname, modulePath);
require.cache[source] = require.cache[target]; |
sheremet-va
added
p2-to-be-discussed
Describe the bug
When package tries to import react by alias, it picks CJS version of preact specific module, which leads to following error:
Reproduction
https://github.com/wight554/preact-vitest-repro/
System Info
System: OS: Windows 10 10.0.22621 CPU: (16) x64 AMD Ryzen 7 3700X 8-Core Processor Memory: 16.89 GB / 31.93 GB Binaries: Node: 16.14.0 - c:\program files\nodejs\node.EXE Yarn: 1.22.4 - ~\AppData\Roaming\npm\yarn.CMD npm: 8.3.1 - c:\program files\nodejs\npm.CMD Browsers: Chrome: 103.0.5060.114 Edge: Spartan (44.22621.290.0), Chromium (103.0.1264.49) Internet Explorer: 11.0.22621.1 npmPackages: vite: ^3.0.0 => 3.0.0 vitest: ^0.18.0 => 0.18.0Used Package Manager
yarn
Validations
The text was updated successfully, but these errors were encountered: