Failing tests with react testing library, vitest and react@17.0.1

dimitur2204 commented 1 week ago

Bug report

There seems to be an issue while testing with vitest and rendering Radix components.

Current Behavior

When trying to run the test an error occurs

Error: Cannot find module '/Users/dimitar.nizamov/dev/uniwise/radix-vite-testing/node_modules/.pnpm/@radix-ui+react-dialog@1.1.1_@types+react-dom@17.0.19_@types+react@17.0.19_react-dom@17.0.1_react@17.0.1__react@17.0.1/node_modules/react/jsx-runtime' imported from /Users/dimitar.nizamov/dev/uniwise/radix-vite-testing/node_modules/.pnpm/@radix-ui+react-dialog@1.1.1_@types+react-dom@17.0.19_@types+react@17.0.19_react-dom@17.0.1_react@17.0.1__react@17.0.1/node_modules/@radix-ui/react-dialog/dist/index.mjs
Did you mean to import react@17.0.1/node_modules/react/jsx-runtime.js?

Expected behavior

To not fail.

Reproducible example

I did not manage to get the test running in one of the codesandboxes. This is a minimal public repo I have created, with a workflow setup where you can see the error. https://github.com/dimitur2204/radix-vite-testing

Additional context

I have another branch on the repository with the reproduction called npm, where I use npm instead of pnpm. The result is the same.

This error started occurring in one of my company's private repos a couple of days ago. I ran workflows on commits that were previously not failing. They started failing out of nowhere with this exact error. We have not upgraded any versions of radix components at all these past days.

Your environment

Software	Name(s)	Version
Radix Package(s)	@radix-ui/react-dialog	1.1.1
React	n/a	17.0.1
Node	n/a	20.11.0
pnpm	n/a	9.2.0
Operating System	MacOS	4.5 (23F79)

nawed2611 commented 1 week ago

does upgrading react version work?

nawed2611 commented 1 week ago

facing a similar error

ERROR in ./node_modules/@radix-ui/react-tooltip/dist/index.mjs 18:0-46
Module not found: Error: Can't resolve 'react/jsx-runtime' in '/node_modules/@radix-ui/react-tooltip/dist'
Did you mean 'jsx-runtime.js'?
BREAKING CHANGE: The request 'react/jsx-runtime' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
ERROR in ./node_modules/@radix-ui/react-visually-hidden/dist/index.mjs 4:0-40
Module not found: Error: Can't resolve 'react/jsx-runtime' in '/node_modules/@radix-ui/react-visually-hidden/dist'
Did you mean 'jsx-runtime.js'?
BREAKING CHANGE: The request 'react/jsx-runtime' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.

dimitur2204 commented 1 week ago

does upgrading react version work?

Haven't had the time to try. If a minor react version upgrade fixes it it will be nice

vladmoroz commented 1 week ago

The root of the issue is with React 17: https://github.com/facebook/react/issues/20235 https://github.com/vitest-dev/vitest/issues/2468

I'd recommend to upgrade to React 18 and also pin your dependencies as this most definitely sounds like an "accidental" upgrade:

This error started occurring in one of my company's private repos a couple of days ago. I ran workflows on commits that were previously not failing. They started failing out of nowhere with this exact error. We have not upgraded any versions of radix components at all these past days.

Otherwise have vitest resolve your @radix-ui deps instead of Node

test: {
  deps: {
    inline: [/@radix-ui/],
  },
}

radix-ui / primitives