Closed Staefloded closed 2 months ago
Same
This seems potentially related to https://github.com/frenic/csstype/issues/189, can you see what version(s) of csstype
are getting installed in your package lock file?
I'm experiencing the same thing.
Same issue
This seems potentially related to frenic/csstype#189, can you see what version(s) of
csstype
are getting installed in your package lock file?
dependencies: "@babel/runtime" "^7.12.0" "@emotion/cache" "^11.4.0" "@emotion/react" "^11.8.1" "@floating-ui/dom" "^1.0.1" "@types/react-transition-group" "^4.4.0" memoize-one "^6.0.0" prop-types "^15.6.0" react-transition-group "^4.3.0" use-isomorphic-layout-effect "^1.1.2"
These are the dependencies and their version
Similar issue here :(
dependencies: "@babel/runtime" "^7.12.0" "@emotion/cache" "^11.4.0" "@emotion/react" "^11.8.1" "@floating-ui/dom" "^1.0.1" "@types/react-transition-group" "^4.4.0" memoize-one "^6.0.0" prop-types "^15.6.0" react-transition-group "^4.3.0" use-isomorphic-layout-effect "^1.1.2"
These are the dependencies and their version
Can you find the csstype
entry in your lock file and paste its contents here?
dependencies: "@babel/runtime" "^7.12.0" "@emotion/cache" "^11.4.0" "@emotion/react" "^11.8.1" "@floating-ui/dom" "^1.0.1" "@types/react-transition-group" "^4.4.0" memoize-one "^6.0.0" prop-types "^15.6.0" react-transition-group "^4.3.0" use-isomorphic-layout-effect "^1.1.2"
These are the dependencies and their versionCan you find the
csstype
entry in your lock file and paste its contents here?
Here's mine
},
"node_modules/csstype": {
"version": "3.1.2",
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz",
"integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ=="
},
@Methuselah96 Does not work with csstype: version "3.1.3"
either
csstype
csstype@^3.0.2: version "3.1.3" resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.3.tgz#d80ff294d114fb0e6ac500fbf85b60137d7eff81"
Here
dependencies: "@babel/runtime" "^7.12.0" "@emotion/cache" "^11.4.0" "@emotion/react" "^11.8.1" "@floating-ui/dom" "^1.0.1" "@types/react-transition-group" "^4.4.0" memoize-one "^6.0.0" prop-types "^15.6.0" react-transition-group "^4.3.0" use-isomorphic-layout-effect "^1.1.2"
These are the dependencies and their versionCan you find the
csstype
entry in your lock file and paste its contents here?Here's mine
}, "node_modules/csstype": { "version": "3.1.2", "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz", "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==" },
@Methuselah96 , I just realised that this is the version I get installed locally, and I encounter no errors with it. Apparently, my problem arises when running my pipeline where I store my repository (Bit bucket). I'll try to check which version is being installed there.
My first thought is that the problem is associated with version 3.1.3.
dependencies: "@babel/runtime" "^7.12.0" "@emotion/cache" "^11.4.0" "@emotion/react" "^11.8.1" "@floating-ui/dom" "^1.0.1" "@types/react-transition-group" "^4.4.0" memoize-one "^6.0.0" prop-types "^15.6.0" react-transition-group "^4.3.0" use-isomorphic-layout-effect "^1.1.2"
These are the dependencies and their versionCan you find the
csstype
entry in your lock file and paste its contents here?Here's mine
}, "node_modules/csstype": { "version": "3.1.2", "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz", "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==" },
@Methuselah96 , I just realised that this is the version I get installed locally, and I encounter no errors with it. Apparently, my problem arises when running my pipeline where I store my repository (Bit bucket). I'll try to check which version is being installed there.
My first thought is that the problem is associated with version 3.1.3.
mine fails locally and also in my gitlab pipeline
Yes, the issue is with csstype@3.1.3
. You'll have to make sure that csstype
is resolving to csstype@3.1.2
, either by manually editing the lock file, or using something like npm overrides or Yarn resolutions. Upvote and track https://github.com/frenic/csstype/issues/189 and/or https://github.com/emotion-js/emotion/issues/3136 since this needs to be resolved upstream.
Still having this issue as a result of a recent @types/react package update. @types/react@18.2.61 now depends on csstype: 3.1.3.
Workaround:
import ReactSelect, { CSSObjectWithLabel, ControlProps, GroupBase } from "react-select";
type OptionType = { label: string; value: string };
type StylesType = Record<
string,
(
base: (props?: Record<string, CSSObjectWithLabel>) => CSSObjectWithLabel,
state: ControlProps<OptionType, boolean, GroupBase<OptionType>>,
) => CSSObjectWithLabel
>;
const selectStyles: StylesType = {
control: () => ({
width: "100%",
}),
container: (baseStyles, state) => ({
...(state.isDisabled && { pointerEvents: "none" }),
...baseStyles,
width: "100%",
}),
};
<ReactSelect styles={selectStyles} />;
For anyone searching who has a project that also has a direct dependency on @emotion/react
, this was resolved for me with @emotion/serialize@1.1.3
which you can obtain by installing or re-installing @emotion/react@11.11.3
or above: https://github.com/emotion-js/emotion/pull/3143
👀 If you're just reliant on react-select
and don't have a direct dependency on @emotion/react
/@emotion/serialize
/csstype
, you can likely resolve this by running npm update @emotion/react
to bump the installed sub-dependency (react-select
does not pin it to a specific version). You can confirm you have the fixed @emotion/react
/@emotion/serialize
version with npm ls @emotion/serialize
.
This is the error I am getting after passing styles to the style prop