Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
imbhargav5 opened this issue Nov 2, 2020 · 8 comments
Closed

Comments

@imbhargav5
Copy link

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


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 ...
@jaywcjlove
Copy link
Member

@imbhargav5 uiwjs/react-md-editor#52 Hope it helps you.

@stLoiz
Copy link

stLoiz commented Mar 26, 2021

@imbhargav5 Have you solved this?

@jaywcjlove
Copy link
Member

uiwjs/react-md-editor#52

@jaywcjlove jaywcjlove pinned this issue May 26, 2021
@jaywcjlove
Copy link
Member

@LKHcoding
Copy link

LKHcoding commented Jun 8, 2021

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
Copy link
Member

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
Copy link
Member

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants