LoginSignup
Probmkr
@Probmkr (Probmkr)

Are you sure you want to delete the question?

Leaving a resolved question undeleted may help others!

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

Your answer might help someone💌