next项目那为什么引入react-jwchat就报错./node_modules/react-jwchat/dist/esm/components/ChatHeader/style.module.css CSS Modules cannot be imported from within node_modules. Read more: https://nextjs.org/docs/messages/css-modules-npm Location: node_modules\react-jwchat\dist\esm\components\ChatHeader\index.js 不引入就不报错能运行 引入就报错 就不能运行了
时间: 2023-10-05 18:13:52 浏览: 47
这个错误是由于 Next.js 对 CSS Modules 在 node_modules 中的导入进行限制导致的。在 Next.js 中,只能在项目的根目录中使用 CSS Modules。
解决这个问题的一种方法是将 `react-jwchat` 中的 CSS 文件拷贝到你的项目中,并在需要使用的组件中直接引用该 CSS 文件,而不是通过 `import` 语句从 `node_modules` 中导入。
另外,你也可以尝试在 Next.js 的配置文件 `next.config.js` 中设置 `cssModules` 选项为 `true`,以允许在 node_modules 中使用 CSS Modules。具体的配置方式可以参考 Next.js 的官方文档中关于 CSS Modules 的部分。
记得在修改配置文件后重新启动 Next.js 项目,让配置生效。希望这些方法可以帮助你解决问题!如果还有其他疑问,请随时提问。
相关问题
编译报错 error in ./node_modules/@monaco-editor/react/dist/index.mjs 怎么解决
当编译报错 `error in ./node_modules/@monaco-editor/react/dist/index.mjs` 时,你可以尝试以下解决方法:
1. 清除项目的缓存并重新安装依赖。执行以下命令:
```bash
rm -rf node_modules
yarn install
```
2. 确保你的项目使用的是最新版本的 `@monaco-editor/react`。可以尝试更新该依赖包到最新版本:
```bash
yarn upgrade @monaco-editor/react
```
3. 检查项目的配置文件(例如 webpack 配置)是否正确配置了对 `@monaco-editor/react` 的引入。确保路径和文件名的大小写与实际相符。
4. 检查你的项目是否与 `@monaco-editor/react` 的版本兼容。有时,特定版本的依赖包可能不兼容,导致编译错误。你可以查阅 `@monaco-editor/react` 的文档或 GitHub 页面来了解其兼容性要求,并根据需要进行版本调整。
5. 如果你使用的是 TypeScript,确保你的项目中已经正确配置了 TypeScript 相关的选项和声明文件。可能需要检查 `tsconfig.json` 文件以确保正确配置了相关选项。
6. 如果以上方法都无效,可以尝试使用其他版本的 `@monaco-editor/react` 或寻求相关社区或文档的支持,了解其他用户是否遇到类似的问题,并且是否有解决方案可用。
如果问题仍然存在,请提供更多的错误信息、上下文和相关代码,以便更准确地帮助你解决该问题。
nextjs+react报错:./node_modules/antd/es/badge/style/index.less Global CSS cannot be imported from within node_modules.
这个错误是因为less文件中引入了全局CSS,而Next.js默认不允许从node_modules中导入全局CSS。
解决方案有两种:
1.在next.config.js中配置webpack,允许导入全局CSS。
```javascript
const withLess = require('@zeit/next-less');
module.exports = withLess({
webpack: (config, { isServer }) => {
if (isServer) {
const antStyles = /antd\/.*?\/style.*?/;
const origExternals = [...config.externals];
config.externals = [
(context, request, callback) => {
if (request.match(antStyles)) return callback();
if (typeof origExternals[0] === 'function') {
origExternals[0](context, request, callback);
} else {
callback();
}
},
...(typeof origExternals[0] === 'function' ? [] : origExternals),
];
config.module.rules.unshift({
test: antStyles,
use: 'null-loader',
});
}
return config;
},
});
```
2.将全局CSS导入到页面中。
在页面的`<Head>`标签中加入以下代码,将antd的样式文件直接引入到页面中。
```html
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/antd/3.16.2/antd.min.css" />
```