Invalid path to TypeScript types in styled-components/native

[Bartozzz]

trafficstars

"styled-components": "^6.1.14"

node_modules/styled-components/native/package.json contains the following entry:

{
  "name": "styled-components/native",
  "private": true,
  "types": "./dist/native/index.d.ts",
  "main": "./dist/styled-components.native.cjs.js",
  "jsnext:main": "./dist/styled-components.native.esm.js",
  "module": "./dist/styled-components.native.esm.js"
}

However, the types field points to a non-existent file (./dist/native/index.d.ts), as shown in the attached screenshot:

It seems like the types are bundled into ./dist/dist/native/index.d.ts instead. This results in TypeScript errors when importing styled-components/native, such as:

Could not find a declaration file for module 'styled-components/native'. '.../node_modules/styled-components/native/dist/styled-components.native.cjs.js' implicitly has an 'any' type.ts (7016)

[Gabriel-Jesusvix]

Hello, How are you?!

I have an problem with that. I reverted to the previous version "styled-components": "6.1.13"

Instead of "styled-components": "6.1.14"

It worked for me

including solving global theme type problem to me.

my discord Gabriel_Jesus#9668

[dionisio28]

I resolved the issue by adding the following to the tsconfig.json file:

"compilerOptions": {
    "types": ["styled-components-react-native"],
 },

After making this change, I installed the styled-components typings, and the error no longer appeared.

[OwenRay]

This seems to be a an issue introduced in 6.1.14 Will probably need a proper fix instead of the workarounds mentioned before.

[djvistasa]

I have the exact same issue. Rolling back to 6.1.13 doesn't resolve the issue either.

"expo": "~52.0.25", "styled-components": "^6.1.13",

[Martinocom]

@djvistasa you put the ^ in front of the version in your package.json. That means the 6.1.14 is fine for your package manager.

Remove the ^ and make sure that .lock file contains only references to 6.1.13.

"styled-components": "6.1.13", // Removed ^

This will force the version to stay on 6.1.13.

You can try also adding resolutions, if that doesn't work

"resolutions": {
  "styled-components": "6.1.13"
}

[lEduFranco]

I'm experiencing the same error, changing the version didn't work https://github.com/styled-components/styled-components/issues/5549

[lEduFranco]

✅ Solution Found: Issue Resolved

I was able to fix the issue by making the following changes:

Removed the @types/styled-components-react-native package:

npm uninstall @types/styled-components-react-native

Since the latest version of styled-components already includes built-in TypeScript support, this package was unnecessary and was likely causing conflicts.

Updated styled-components to version 6.1.13 (without ^): In package.json, I changed:

styled-components": "6.1.13"

Then I reinstalled dependencies:

npm install

After these changes, the TypeScript errors related to 'theme' implicitly has an 'any' type were resolved, and everything is now working correctly. 🚀

Hope this helps others facing the same issue! 🎉

[Almamu]

Have same issue with 6.1.15, rolling back (and locking the dep) on 6.1.13 works around the issue. Looking at the diffs between 6.1.13 and 6.1.14 the only thing that looks a good candidate is the change on how the release is done here: https://github.com/styled-components/styled-components/compare/[email protected]#diff-51e4f558fae534656963876761c95b83b6ef5da5103c4adef6768219ed76c2deL9858

[marcel-happyfloat]

I'm now using the default import, and everything seems to be working as expected:

import styled from 'styled-components';

Any drawbacks?

[Almamu]

I'm now using the default import, and everything seems to be working as expected:

import styled from 'styled-components';

Any drawbacks?

That has always worked as far as I can tell, but if you want to use any of react native's elements in styled components the only way is to do styled(Text) instead of styled.Text which means more imports in your file (there may be more differences, but that's the only one I know), and even then I don't know if it works properly or not...

[wilsonmedeiros07]

@djvistasa you put the ^ in front of the version in your package.json. That means the 6.1.14 is fine for your package manager.

Remove the ^ and make sure that .lock file contains only references to 6.1.13.

"styled-components": "6.1.13", // Removed ^ This will force the version to stay on 6.1.13.

You can try also adding resolutions, if that doesn't work

"resolutions": { "styled-components": "6.1.13" }

I was having the same issue for react native, after a lot of experiments to make it work, adding resolution on package.json was the only thing that solved it without breaking also my test cases with jest and RTL.

[chico-oliveira]

That has always worked as far as I can tell, but if you want to use any of react native's elements in styled components the only way is to do styled(Text) instead of styled.Text which means more imports in your file (there may be more differences, but that's the only one I know), and even then I don't know if it works properly or not...

I gave that a go as I was curious and it completely broke my layout on web (my project uses react native for mobile and web) so I think there are other considerations and doesn't work as a one to one solution.

Ended up reverting to 6.1.13 like many others here and hoping this gets fixed in a future update.

[rpopovici]

What worked in our case was to add to add both styled-components 6.1.13 and @types/react 18.3.4 to resolutions

  "resolutions": {
     "styled-components": "6.1.13",
     "@types/react": "18.3.4"
  }

[quantizor]

I think this is fixed in the most recent release https://github.com/styled-components/styled-components/releases/tag/styled-components%406.1.16

[rpopovici]

I think this is fixed in the most recent release https://github.com/styled-components/styled-components/releases/tag/styled-components%406.1.16

styled-components 6.1.16 works with @types/react 18.3.4 but still doesn't work with higher versions of @types/react

Getting an error similar to https://github.com/emotion-js/emotion/issues/3245