Next.jsのコンポーネントでcss(scss)ファイルをimportしてcannot find moduleになった場合
Next.jsとTypescriptで開発をしていて、ちょっとハマった点について書いておきます。
コンポーネントにスタイルを当てるために、Component-Level CSSというやり方を採用して、次のようなコードを書いてみました。
import React from 'react';
import styles from './MyComponent.module.scss';
const MyComponent = () => {
// some code here.
};
export default MyComponent;このコードの2行目のscssのimportの部分で、次のようなTypescriptのエラーが起きていました。
Cannot find moudle './MyComponent.module.scss'.
Cannot find module './MyComponent.module.scss' or its corresponding type declarations.'scssファイル自体は確かにあるのに、Tyepscript的に認識できていないようです。
ちょっと調べて、次の手順で解消することができました。
next-env.d.tsを修正する
Next.jsのプロジェクトの直下に next-env.d.ts というファイルがあり、デフォルトでは、
/// <reference types="next" />
/// <reference types="next/types/global" />という内容になっています。 コレを次のように修正します。
/// <reference types="next" />
/// <reference types="next/types/global" />
declare module '*.css';
declare module '*.scss';tsconfig.jsonを修正する
tsconfig.json の include に上記の next-env.d.ts を追加します。
{
"compilerOptions": {
// some options here.
},
"include": [
"next-env.d.ts",
"src/**/*"
],
"exclude": [
// some options here.
]
}これでエラーを解消することができました。
