Nextjs - 动态导入 - CSS 模块不能从 node_modules 中导入答案

【问题标题】：Nextjs - Dynamic Imports - CSS Modules cannot be imported from within node_modulesNextjs - 动态导入 - CSS 模块不能从 node_modules 中导入
【发布时间】：2021-12-23 10:59:23
【问题描述】：

努力解决这个问题。我在 Nextjs 中为我的组件使用built in CSS modules。当我延迟加载具有 CSS 模块的组件时，我收到错误 CSS Modules cannot be imported from within node_modules.。

如果我将 ${asset.name} 替换为值按钮，即dynamic(() => import(@preamp/assets/Button))，nextjs 将编译。

如果我不使用 CSS 模块，代码将正确执行。它会延迟加载动态组件。仅当我将文件添加到项目中时。
如果我对它编译的导入路径进行硬编码。我只有在使用模板文字字符串时才会遇到这个问题。

非常感谢任何帮助。

import React from 'react';
import dynamic from 'next/dynamic';

const asset = { name: 'Button' };
const NewComponent = dynamic(() => import(`~/assets/${asset.name}`), {
    ssr: false,
});

export default function index() {
    return (
    <div className="grid-container">
        <div className="grid-x grid-margin-x">
        <div className="cell medium-6 large-6">
            <NewComponent />
        </div>
        <div className="cell medium-6 large-6">12/6/8 cells</div>
        </div>
    </div>
    );
}

Button.js

import React from 'react';
import styles from './Test.module.css';

export default function Index() {
  return <div className={styles['btn-primary']}>Test Div</div>;
}

编辑：如果我将 Test.module.css 移动到不同的文件夹中，它将编译。我还没有看到任何文档或解释为什么 CSS 模块必须存在于特定区域。

button.js 更新

import React from 'react';
import styles from '~/test/Test.module.css'; // <-- Moved into a different folder

export default function Index() {
  return <div className={styles['btn-primary']}>Test Div</div>;
}

项目规格：

  "dependencies": {
    "classnames": "^2.3.1",
    "eslint-plugin-prettier": "^3.4.1",
    "eslint-plugin-react": "^7.27.0",
    "next": "^12.0.3",
    "next-transpile-modules": "^9.0.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "sass": "^1.43.4"
  },

使用节点 v14.17.3

【问题讨论】：

我以前从未在导入路径中看到过“~”，这可能会导致问题吗？
@MarkWilliams 我不这么认为。我在 webpack 中设置了一个别名，它是我项目中 /src/ 的快捷方式。如果我用文件名替换我的模板文字，我的代码将编译得很好。

标签： reactjs next.js react-css-modules

【解决方案1】：

只是想发布我的答案。如果您要使用动态导入，则导入路径本身不能是动态的。我在这里添加了更多信息。

https://github.com/vercel/next.js/issues/31271

【讨论】：