Compiled version of the CSS

[OmarZeidan]

Can you please have the CSS compiled instead of being imported from the node_modules

Where:

react-codemirror/src/index.js

Line 3 in cd62bbd

import 'codemirror/lib/codemirror.css';

And L5

This is causing troubles when we use the library for next.js

<3

[jaywcjlove]

@OmarZeidan Upgrade + @uiw/[email protected]

[OmarZeidan]

@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!

[jaywcjlove]

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

[Gnarus-G]

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}
    />
}

[jaywcjlove]

@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
});

[jaywcjlove]

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

[Gnarus-G]

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