Блог

Я не мог найти никакого решения для этой проблемы в Интернете. До того, как я добавил gatsby-plugin-resolve-src в свой проект «Гэтсби», все работало так, как ожидалось.

Чтобы добавить gatsby-plugin-resolve-src в проект, в документах говорится, что в tsconfig.json следует добавить следующее

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

И это действительно работает, но styled-components больше не признается.

import styled, {css} from 'styled-components' бросает это-

импорт в стиле Это выражение не вызывается. ts(2349)

Модуль «стилизованные компоненты» не имеет экспортированного элемента «css». ts(2305)

Поэтому, если я закомментирую добавленные реквизиты в tsconfig.json, все вернется в рабочее состояние, но плагин не работает.

Я думаю, что причина, по которой это относится styled-components только к одному, заключается в том, что у меня есть файл пользовательского определения для него.

src/типы/стиль-компоненты.d.ts

 import 'styled-components';

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

Это мой полный 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/"]
}
 

Как мне решить эту проблему?

Почему бы вам просто не использовать определения styled-components типов?

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

Можете ли вы поделиться образцом репозитория, чтобы лучше видеть необходимые пути и зависимости?