Version mismatch issue: Types have separate declarations of a private property '_opaque'
alitnk opened this issue · 1 comments
Describe the issue
When using react-strict-dom with TypeScript, using VarGroup
with css
raises this error.
Expected behavior
No type errors.
Steps to reproduce
Use the tokens.stylex.ts
from RSD's example in a newly created TypeScript project, with fresh @stylexjs/stylex
installation (this causes a version mismatch).
import type { VarGroup } from "@stylexjs/stylex";
import { css } from "react-strict-dom";
export const tokens: VarGroup<{
squareColor: string;
textColor: string;
}> = css.defineVars({
squareColor: "red",
textColor: {
default: "darkred",
"@media (prefers-color-scheme: dark)": "lightred",
},
});
Test case
No response
Additional comments
Replacing import { css } from "react-strict-dom";
with import css from "@stylexjs/stylex";
fixes the issue of course. It's the import from different module (react-strict-dom
instead of @stylexjs/stylex
) that causes the error.
This is actually a version mismatch error. it looks like react-strict-dom
is using stylex 0.6.0
, but my stylex dependency is at 0.6.1
. I think moving stylex to peer dependencies would be the right call here but maybe there's a reason it's a direct dependency. If it can't be moved to peer deps, then some sort of warning or note or compatibility table would be nice to remind the user to install the right versions.
Also, maybe unrelated question: Is the css export from react-strict-dom
necessary? Couldn't it be made to just work with normal stylex imports?
Thank you.
Type 'StyleXVar<string>' is not assignable to type '_StyleXVar<string>'
This seems to be the core issue. Let me investigate.