Theming in typings throws an error when setting "module": "commonjs" in tsconfig.json

DISCLAIMER:

I’m using styled-components with Electron, and I’ve found that the error is thrown when I change the tsconfig’s module from es2015 (as you guys have) to CommonJs. As I’m using Electron I need that module type. I cloned this repo and changed the module resolution and the same error arises.

Does this mean that the new styled-components typings are not compatible with Electron or rather an error on my part?

I’ve looked at the previous code I had on styledComponents.ts file and it’s exactly the same, and it was working with the “module”: “commonjs” configuration. So it must be something related to the new typings.

Here is my tsconfig.json:

{
  "compilerOptions": {
    "noImplicitAny": false,
    "module": "commonjs",
    "target": "es2017",
    "jsx": "react",
    "allowJs": true,
    "alwaysStrict": true
  },
  "exclude": [
    "node_modules"
  ]
}

Version

2.0.1

Reproduction

Install the new version of styled-components

Steps to reproduce

Create the styled-components file used to re-export styled:

import * as styledComponents from 'styled-components';
import { ThemedStyledComponentsModule } from 'styled-components';

export interface MyTheme {
    primaryColor: string;
    backgroundColor: string;
    defaultMargin: number;
}

const {
    default: styled,
    css,
    injectGlobal,
    keyframes,
    withTheme,
    ThemeProvider,
    // This is where the error is found
} = styledComponents as ThemedStyledComponentsModule<MyTheme>;

interface ThemeProps {
  theme?: MyTheme;
}

export default styled;
export { css, injectGlobal, keyframes, withTheme, ThemeProvider, ThemeProps };

This is the same code found in the typings/tests and the one I had before, which was working as intended.

Create a theme file theme.ts:

import { MyTheme } from './../constants/styledComponents'

const theme: MyTheme = {
  primaryColor: 'mediumseagreen',
  backgroundColor: 'yellow',
  defaultMargin: 0.5
};

export default theme

Wrap App.tsx using theme provider:

import * as React from 'react'
import * as ReactDOM from 'react-dom'
import { Provider, Store } from 'react-redux'
import App from './App'
import { injectGlobal, ThemeProvider } from './constants/styledComponents'
import theme from './constants/theme'
import reducer from './reducers'
import configureStore from './store/configureStore'

const store: Store<any> = configureStore()

ReactDOM.render(
  <ThemeProvider theme={theme}>
    <Provider store={store}>
      <App />
    </Provider>
  </ThemeProvider>,
  document.getElementById('root')
)

An error is found in my styled-components.ts file:

Type 'typeof "/Users/calberca/Workspace/markers/node_modules/styled-components/typings/styled-components"' cannot be converted to type 'ThemedStyledComponentsModule<MyTheme>'.
  Types of property 'ThemeProvider' are incompatible.
    Type 'ComponentClass<ThemeProviderProps<object>>' is not comparable to type 'ComponentClass<ThemeProviderProps<MyTheme>>'.
      Type 'ThemeProviderProps<object>' is not comparable to type 'ThemeProviderProps<MyTheme>'.
        Type 'object' is not comparable to type 'MyTheme'.
          Property 'primaryColor' is missing in type '{}'.

[Igorbek]

So the actual workaround could be to write this:

styledComponents as ThemedStyledComponentsModule<any> as ThemedStyledComponentsModule<MyTheme>

[Fenopiu]

Doesn’t sound like there’s anything here for us to fix, so I’ll close this issue. Lmk if that’s incorrect!

The official Typescript example still doesn’t work.

“styledComponents as ThemedStyledComponentsModule<any> as ThemedStyledComponentsModule<MyTheme>” is a workaround, not a solution. If it have to be manually converted to “any” before the custom type there is a bug. Even the recommended convention “const Title = styled(“h1”)<{ isActive: boolean }>`” doesn’t work because “styled(…)” doesn’t accept any “>” operator (Operator ‘>’ cannot be applied to types ‘boolean’ and ‘string’.).