in next.js error - ./node_modules/@uiw/react-heat-map/esm/style/index.css

[zhangwei900808]

error - ./node_modules/@uiw/react-heat-map/esm/style/index.css
Global CSS cannot be imported from within node_modules.
Read more: https://nextjs.org/docs/messages/css-npm
Location: node_modules/@uiw/react-heat-map/esm/index.js
TypeError: _interopRequireDefault is not a function
    at Object.<anonymous> (/Users/zhangwei/Workspace/com.awbeci/Seaurl/web/seaurl-webapp/node_modules/@uiw/react-heat-map/cjs/index.js:13:22)
    at Module._compile (internal/modules/cjs/loader.js:1072:14)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1101:10)
    at Module.load (internal/modules/cjs/loader.js:937:32)
    at Function.Module._load (internal/modules/cjs/loader.js:778:12)
    at Module.require (internal/modules/cjs/loader.js:961:19)
    at require (internal/modules/cjs/helpers.js:92:18)
    at Object.@uiw/react-heat-map (/Users/zhangwei/Workspace/com.awbeci/Seaurl/web/seaurl-webapp/.next/server/pages/[username].js:1296:18)
    at __webpack_require__ (/Users/zhangwei/Workspace/com.awbeci/Seaurl/web/seaurl-webapp/.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:///./src/components/user/userHeatmap/index.js:14:77)

[jaywcjlove]

在 nextjs 中使用可以使用此方法解决问题 https://github.com/uiwjs/react-md-editor/issues/52#issuecomment-848969341

@zhangwei900808

[jaywcjlove]

https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-heat-map@1.4.8/file/dist.css 包中提供 dist.css

[zhangwei900808]

@jaywcjlove 能不能把css剔除到外面引用啊，包只包含js文件

[jaywcjlove]

@zhangwei900808 我不是专门封装了一个工具 next-remove-imports 剔除包里面的 css 引入。

[jaywcjlove]

@zhangwei900808 这个里面有使用实例 https://github.com/uiwjs/react-md-editor/issues/52#issuecomment-848969341 就是使用 next-remove-imports 工具剔除 css，在你所在页面引用 @uiw/react-heat-map/dist.css 这个 css 就是专门干这个的。

[zhangwei900808]

@jaywcjlove 可以是可以总感觉不够优雅，配置好麻烦，要多配置三步操作！ 能不能简化操作呢，我看antd不用这么麻烦，他包里面不也包含了css文件么，能不能参考它的使用方式 1、next.config.js

const removeImports = require('next-remove-imports')({
  options: { },
})
module.exports = removeImports()

2、component.js

import dynamic from "next/dynamic";

const HeatMap = dynamic(
  () => import("@uiw/react-heat-map").then((mod) => mod.default),
  { ssr: false }
);

3、_app.js

import '@uiw/react-heat-map/dist.css';

[jaywcjlove]

@zhangwei900808 在 antd 中 并没有真的，直接引入样式文件，所以不报错。但是 antd 需要在 css 中引入 antd.css 文件。

@import '~antd/dist/antd.css';

我们这个包并不是在 next 中使用的。

在其它工具中 使用 @uiw/react-heat-map，不需要引入css 是自动导入 css，比如你在 create-react-app 、umi 等工具中使用时，不需要导入任何css

[jaywcjlove]

@zhangwei900808 只是整了个 next 插件（next-remove-imports），支持在 next 中使用而已。如果改了，我们其他项目都需要去改，手动引入css。

[zhangwei900808]

@jaywcjlove 没必要你们所有项目都去除css啊，只是这个组件应用的样式不多可以剔除啊，不过，如果你没有时间弄，暂时就这么着吧！

[jaywcjlove]

我们所有项目不分离 css，引入一个组件，不需要引入这个组件的 css，属于自动加载样式 @zhangwei900808