Compiled version of the CSS about react-codemirror HOT 7 CLOSED

@Gnarus-G Since codemirror does not support server-side rendering, it is a bit strange to implement. Upgrade + @uiw/[email protected]

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>
      <div>Welcome to Next.js!</div>
      {Comps && (
        <Comps
          value="const a = 0;"
          options={{
            mode: "jsx",
          }}
        />
      )}
    </div>
  )
}

export default HomePage

$ yarn add @zeit/next-css

Add next.config.js

const withCSS = require('@zeit/next-css');

module.exports = withCSS({
  // Your configurations here
});

from react-codemirror.

@OmarZeidan Upgrade + @uiw/[email protected]

from react-codemirror.

@jaywcjlove Thanks but the same error!

Look inside /lib/esm/index.js file of your compiled version, and you will notice

import './codemirror.css';
import './index.css';

Which will def be causing the error for next.js framework and Global CSS dilemma!

from react-codemirror.

@OmarZeidan Can you give me an example, let me debug it?

from react-codemirror.

Next.js says this, when I try to use the component.

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

Is this a good example? Try to render this component.

import Codemirror from "@uiw/react-codemirror";

export default function CodeEditor() {

    function onChange(instance: CodeMirror.Editor, change: CodeMirror.EditorChangeLinkedList[]) {
        console.log('instance :>> ', instance.getValue);
    }

    return <Codemirror
        options={{
            theme: 'monokai',
            keyMap: 'sublime',
            mode: 'jsx',
        }}
        onChange={onChange}
    />
}

from react-codemirror.

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

from react-codemirror.

@jaywcjlove Oh man, I appreciate you. I learned a lot from this. Thank you.

from react-codemirror.