LoginSignup
0
0

More than 5 years have passed since last update.

styled-componentsの「Cannot find namespace 'NodeJS'.」

Posted at

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の相性はあまり良くなさそうに感じる・・・。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0