Style types malformed after installing packages

[Staefloded]

This is the error I am getting after passing styles to the style prop

[otaviollneto]

Same

[Methuselah96]

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?

[frle10]

I'm experiencing the same thing.

[valacosta19]

Same issue

[Staefloded]

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

[sebherrerabe]

Similar issue here :(

[Methuselah96]

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?

[sebherrerabe]

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?

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=="
},

[DMaxence]

@Methuselah96 Does not work with csstype: version "3.1.3" either

[Staefloded]

csstype

csstype@^3.0.2: version "3.1.3" resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.3.tgz#d80ff294d114fb0e6ac500fbf85b60137d7eff81"

Here

[sebherrerabe]

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?

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.

[Staefloded]

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?

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

[Methuselah96]

Yes, the issue is with [email protected]. You'll have to make sure that csstype is resolving to [email protected], 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.

[ODreelist]

Still having this issue as a result of a recent @types/react package update. @types/[email protected] 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} />;

[tom-engineering]

For anyone searching who has a project that also has a direct dependency on @emotion/react, this was resolved for me with @emotion/[email protected] which you can obtain by installing or re-installing @emotion/[email protected] or above: https://github.com/emotion-js/emotion/pull/3143

[MattIPv4]

👀 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.