import styled This expression is not callable. ts(2349)

Question

I couldn't find any solution for this thing on the web. Before I added gatsby-plugin-resolve-src to my gatsby project, everything was working as expected.

To add gatsby-plugin-resolve-src to the project, the docs say that the following should be added to tsconfig.json

{
  "compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      "*": [
        "types/*",
        "*"
      ]
    }
  },
}

And it does work, but styled-components is not recognized any more.

import styled, {css} from 'styled-components' throws this-

import styled This expression is not callable. ts(2349)

Module '"styled-components"' has no exported member 'css'. ts(2305)

So if I comment out the added props in tsconfig.json, everything reverts back to the working state but the plugin doesn't work.

I think the reason why this is the case with styled-components only, is because I have a custom definition file for it.

src/types/styled-components.d.ts

import 'styled-components';

declare module 'styled-components' {
  export interface DefaultTheme {
    primary: string;
    secondary: string;
    .....
  }
}

This is my complete tsconfig-

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es6",
    "jsx": "preserve",
    "lib": ["dom", "es2015", "es2017"],
    "strict": true,
    "noEmit": true,
    "isolatedModules": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "removeComments": false,
    "baseUrl": "./src",
    "paths": {
      "*": ["types/*", "*"]
    }
  },
  "include": ["./src/**/*"],
  "exclude": ["/node_modules/"]
}

How do I resolve this?

Answer 1

Why don't you simply use the styled-components type definitions?

npm i styled-components
npm i @types/styled-components --save-dev

Can you share a sample repo, in order to better see the required paths and dependencies?