uiwjs/react-markdown-editor

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

imbhargav5 opened this issue · 8 comments

imbhargav5 commented

When using this component with Next.js, I am facing this error. Specifically at lines like these.

react-markdown-editor/src/components/CodeMirror/index.tsx

Line 6 in 2fd2077

import './codemirror.less';

react-markdown-editor/src/components/CodeMirror/index.tsx

Line 7 in 2fd2077

import './index.less';

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
  1. Expose a module which has styles also imported.
import UnstyledComponent from ...
import styles from ...

export default ...
stLoiz commented

@imbhargav5 Have you solved this?

LKHcoding commented

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 commented

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;
  • 👎1