error TS4023 when compiling a library that uses "styled-components": "^6.1.9"

[akkadaya]

error TS4023: Exported variable 'StyledComponent1' has or is using name 'IStyledComponentBase' from external module ".../node_modules/styled-components/dist/types" but cannot be named.

I could compile the library after exporting the IStyledComponentBase interface in node_modules/styled-components/dist/types.d.ts

Here is the link to the interface in this repo:

styled-components/packages/styled-components/src/types.ts

Line 223 in f688bef

interface IStyledComponentBase<R extends Runtime, Props extends object = BaseObject>

Am I doing something wrong? or is it a bug in styled-components that needs to be fixed?

[TomasMoratoPerezPorro]

I'm having an issue that coul be related, after upgrading to Styled 6 i get the following error in all my styled components:

export const Relative = styled(Div)<PositionProps>`
	position: relative;
	z-index: ${({ zIndex }) => zIndex};
`;

Exported variable 'Relative' has or is using name 'IStyledComponentBase' from external module "C:/.../project/node_modules/styled-components/dist/types" but cannot be named.ts(4023)

Any idea of how could it be fixed ?

[akkadaya]

I raised a PR to fix it #4300

Meanwhile, use this script as a workaround.

#!/usr/bin/env bash

set -euo pipefail

echo 'Applying fix to Styled-Components types...'

os=$(uname -s)

case $os in
Darwin)
    sed -i '' 's/^interface IStyledComponentBase/export interface IStyledComponentBase/g' node_modules/styled-components/dist/types.d.ts
    ;;
Linux)
    sed -i 's/^interface IStyledComponentBase/export interface IStyledComponentBase/g' node_modules/styled-components/dist/types.d.ts
    ;;
esac

Let's say you save it in scripts/post_install.sh and then add this line to your package.json scripts

  "scripts": {
    ...
    "postinstall": "scripts/post_install.sh"

make sure to make the script executable by running

chmod +x post_install.sh

[quantizor]

Fix should be here I think, though I don't understand why TS should require an internal type to be exposed https://github.com/styled-components/styled-components/releases/tag/v6.1.10

[akkadaya]

Thank you @quantizor

When you hover over a component created by Styled Components, it infers the type IStyledComponentBase

But I believe it was meant to be IStyledComponent instead