Next.js で CSS Modules cannot be imported from within node_modules. エラーが出る
解決したいこと
Next.js でウェブサイトを作っているんですが、 CSS Modules cannot be imported from within node_modules. エラーが出ていてつまずいています。
理想
やりたい処理は getStaticProps で特定のディレクトリにある ts ファイルを取得して、その ts ファイルから AppData という named export を動的に import することです。
環境
実際のページはこちらです。
https://apps.probmkr.com:3002/apps
GitHub レポジトリ内ではこちらのファイルです。
https://github.com/Probmkr/Hack-Util-Apps/blob/apps/src/pages/apps/index.tsx
発生している問題・エラー
./src/pages/apps/2022/caesar/Caesar.module.scss
CSS Modules cannot be imported from within node_modules.
Read more: https://nextjs.org/docs/messages/css-modules-npm
該当するソースコード
const CWD = path.join(process.cwd(), "src/pages/apps");
console.log(CWD);
const appDirs = await globby(["*/*/data.ts"], {
cwd: CWD,
});
console.log("debug start", appDirs);
const appProps: MyAppProps[] = await Promise.all(
appDirs.map(async (appDataFile) => {
const importPath = `./${appDataFile.replace(/\.ts$/, "")}`;
const appData = await import("./2022/caesar/data").then((mod) => mod.AppData);
console.log(appData);
console.log(importPath);
return {
app_code: appDataFile.split("/").pop(),
app_path: path.dirname(appDataFile),
app_data: appData,
};
})
);
本当は console.log だったりコメントアウトだったりでごちゃごちゃしていますが、ここでは消しています。ts
自分で試したこと
まず、このエラーは私にとってとても意味不明です。そもそもインポートしているのは caesar/data.ts なのに、なぜか caesar/Caesar.module.scss がインポート不可能などというエラーが出るからです。
また、
const appData = await import(`${importPath}`).then((mod) => mod.AppData);
のところを
const appData = await import("./2022/caesar/data").then((mod) => mod.AppData);
とするとエラーが出ずに普通に動きます。
0
