[react-cascader]:在nextjs中单独引入cascader组建无法运行

[ananiahfox]

注意：根据下面内容复现错误问题，以方便测试。

在nextjs中单独引入cascader组建无法运行

uiw 是否支持nextjs

在nextjs 中引入 @uiw/react-cascader 报错

重现行为的步骤：

1. yarn add @uiw/react-cascader
2. import Cascader from '@uiw/react-cascader';
3. yarn dev
4. error

报错

./node_modules/@uiw/react-cascader/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-cascader/esm/index.js

[jaywcjlove]

@ananiahfox

参考：https://github.com/uiwjs/react-md-editor/issues/52#issuecomment-848969341

为此问题创建了一个 nextjs 的包：https://github.com/uiwjs/next-remove-imports

这是因为 nextjs 不支持 node_modules 包中引入 css，使用 next-remove-imports 删除代码中的 css 引用。

[ananiahfox]

这样可以运行了 ， 但是这个插件是不是删除了 我的其他ui库的 css？ react-cascader 组建的样式也丢失了 @jaywcjlove

[jaywcjlove]

@ananiahfox 它是移除 node_modules 中的 css import 样式文件导入。移除之后，再单独引入css 文件

这个 cascader 组件依赖了这么多组件，如果一个一个的样式引入是有点烦滴

"dependencies": {
  "@uiw/react-dropdown": "^4.21.14",
  "@uiw/react-icon": "^4.21.14",
  "@uiw/react-input": "^4.21.14",
  "@uiw/react-loader": "^4.21.14",
  "@uiw/react-menu": "^4.21.14",
  "@uiw/react-tag": "^4.21.14",
  "@uiw/utils": "^4.21.14"
}

https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-cascader/file/package.json

或者你直接引入编译好的全部 css 文件

[ananiahfox]

好的好的 我试试。感谢感谢🙏

[jaywcjlove]

• https://github.com/uiwjs/react-md-editor/issues/446#issue-1417594634