NextJS: Global CSS cannot be imported from within node_modules in @remirror/react-editors/markdown

[vighnesh153]

Summary

I was trying to setup a Markdown Editor by following this guid: ReMirror Markdown. I am using this inside a NextJS project. And, NextJS doesn't support importing global CSS from within node_modules.

Steps to reproduce

Just following the same guide in a next js project will reproduce that error.

Just a side note, directly adding the editor in a page component won't work. You will have to create a different component and adding the editor inside it. Then dynamically import that component, with no SSR, in the page component: Guide to dynamically import without SSR

Expected results

I should see no errors and the editor should work.

Actual results

./node_modules/@remirror/styles/all.css
Global CSS cannot be imported from within node_modules.
Read more: https://nextjs.org/docs/messages/css-npm
Location: node_modules/@remirror/react-editors/markdown/dist/remirror-react-editors-markdown.browser.esm.js

Possible Solutions

1. Removing the import of CSS from the file and giving the user an option to import the CSS file from node_modules. That way, we can directly import the CSS file inside the globles.css file using the @import function and NextJS is also happy.
2. Make use of styled-components or any other CSS in JS library instead of having a CSS file.

Recommendation: As the second approach might take a while to implement, we could go forward with the first approach as it is relatively simpler than the second approach..

Screenshot(s)

[vighnesh153]

Instead of directly importing the editor from the react-editors package, one can copy this component in their code base. That will fix this NextJS issue.

MarkdownEditor component