Reactでスタイリングを行う時はstyled-componentsを使う人が増えてきた印象があります。
styled-componentsをTypeScriptで動かそうとすると、Node.jsのtypeがないと言われてしまいました。
発生環境
- styled-components : v3.3.3
- TypeScript : v2.9.2
- React : 16.4.0
エラーメッセージ
ERROR in [at-loader] ./node_modules/styled-components/typings/styled-components.d.ts:117:44
TS2503: Cannot find namespace 'NodeJS'.
解決策
いくつか解決する方法があるみたいです。
解決策①
@types/nodeをインストール
npm install --save-dev @types/node
or
yarn add -D @type/node
tsconfig.jsonにtypeRootsを記述
{
"compilerOptions": {
"typeRoots": [
"node_modules/@types"
]
}
}
解決策②
@types/nodeをインストール
省略
tsconfig.jsonにtypesを記述
{
"compilerOptions": {
"types": ["node"]
}
}
これがCannot find namespace 'NodeJS'
を解決するセオリーみたいです。
ただ、これでも筆者はエラーを解決することができませんでした。
解決策③
styled-componentsのバージョンを固定する
yarn remove styled-components
yarn add styled-components@3.1.6
これでNodeJSのエラーは解決しましたが
ERROR in [at-loader] ./node_modules/styled-components/typings/styled-components.d.ts:75:48
TS2344: Type 'keyof T' does not satisfy the constraint 'string'.
Type 'string | number | symbol' is not assignable to type 'string'.
Type 'number' is not assignable to type 'string'.
という別のエラーがでてきてしまいました。。。
styled-components@3.3.3ではこのエラーは発生しなくなっています。
解決策④
'NodeJS'をdeclearする
最終手段です。
node_modules/styled-components/typings/styled-components.d.tsを直接編集します。
declare namespace NodeJS {
export interface ReadableStream {
}
}
これを適当な箇所に入れることでエラーがでなくなりました。
styled-componentsとTypeScriptの相性はあまり良くなさそうに感じる・・・。