Nextjs - 动态导入 - CSS 无法从 node_modules 中导入模块
Nextjs - Dynamic Imports - CSS Modules cannot be imported from within node_modules
努力解决这个问题。我在 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
只想post我的回答。如果您打算使用动态导入,那么导入路径本身不能是动态的。我在这里添加了更多信息。
努力解决这个问题。我在 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
只想post我的回答。如果您打算使用动态导入,那么导入路径本身不能是动态的。我在这里添加了更多信息。