Global CSS import within the package is causing an issue with Next.js

[imbhargav5]

When using this component with Next.js, I am facing this error. Specifically at lines like these. https://github.com/uiwjs/react-markdown-editor/blob/2fd2077ec910cd2a21a99b3b5085d30266392eff/src/components/CodeMirror/index.tsx#L6 https://github.com/uiwjs/react-markdown-editor/blob/2fd2077ec910cd2a21a99b3b5085d30266392eff/src/components/CodeMirror/index.tsx#L7

error - ./node_modules/@uiw/react-markdown-editor/lib/esm/components/CodeMirror/codemirror.css Global CSS cannot be imported from within node_modules. Read more: https://err.sh/next.js/css-npm

Perhaps we can expose an export that is unstyled and one that is styled?

1. Expose UnstyledComponents

   ...
   export default UnstyledComponent

2. Expose a module which has styles also imported.

   
   import UnstyledComponent from ...
   import styles from ...

export default ...

[jaywcjlove]

@imbhargav5 https://github.com/uiwjs/react-md-editor/issues/52 Hope it helps you.

[stLoiz]

@imbhargav5 Have you solved this?

[jaywcjlove]

https://github.com/uiwjs/react-md-editor/issues/52

[jaywcjlove]

https://github.com/uiwjs/react-md-editor/issues/52#issuecomment-848969341 @stLoiz @imbhargav5

[LKHcoding]

uiwjs/react-md-editor#52 quote @jaywcjlove

i used like this

import MarkdownEditor from '@uiw/react-markdown-editor';
import '@uiw/react-markdown-editor/dist/markdown-editor.css';
import '@uiw/react-markdown-preview/dist/markdown.css';

....

      <MarkdownEditor
        value={''}
        onChange={(editor: any, data: any, value: any) => setMkdStr(value)}
      />

i can't solved this problem with next-remove-imports

error :

Server Error
ReferenceError: navigator is not defined

This error happened while generating the page. Any console logs will be displayed in the terminal window.
Call Stack
<unknown>
...../node_modules/codemirror/lib/codemirror.js (18:19)

plz help me what should i do 😥

[jaywcjlove]

https://codesandbox.io/s/nextjs-example-react-codemirror-bimq7?file=/pages/index.js

@imbhargav5

import { useEffect, useState } from "react";

function HomePage() {
  const [comp, setComp] = useState();
  useEffect(() => {
    if (window) {
      import("@uiw/react-codemirror").then((obj) => {
        if (!comp) {
          setComp(obj.default);
        }
      });
    }
  }, []);

  const Comps = comp;
  return (
    <div>
      {Comps && (
        <Comps
          value="const a = 0;"
          options={{
            mode: "jsx"
          }}
        />
      )}
    </div>
  );
}

export default HomePage;

[jaywcjlove]

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

[jaywcjlove]

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

Example: https://codesandbox.io/s/nextjs-example-react-md-editor-qjhn7?file=/pages/index.js
Example: @uiwjs/next-remove-imports/example
Example: https://next-remove-imports-example.vercel.app