Does not work with NextJS

[jdudmesh]

NextJS does not allow global CSS to be imported at the component level, only in _app.js.

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

See https://codesandbox.io/s/compassionate-cookies-msmsd?file=/pages/index.js

[jaywcjlove]

https://stackoverflow.com/questions/60941853/next-js-global-css-cannot-be-imported-from-files-other-than-your-custom-app

@jdudmesh Whether it can solve the problem?

[diego9497]

Doesn't work for me
Next.Js team suggest this to fix it, it could be possible?

[jdudmesh]

The problem is that MDEditor.tsx has an import for index.less. The component will only work with NextJS if this import is removed. This requires changing react-md-editor. Consider moving the CSS for the component into a separate file which can be imported independently i.e. in _app.js.

[cjchirag7]

I'm too facing the same problem, this doesn't work in NextJS. Any way to make it working ?

[earthnoob]

I was having the exact problem and managed to fix by installing @zeit/next-css and updated next.config.js:

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

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

Hope that helps you, let me know if it works.

[diego9497]

@earthnoob thanks it works for me.

[durancristhian]

WOOO, thank you @earthnoob. The question now is: what's the difference between the plugin and the built-in configuration?

[cyphire]

I would love to use this as well, but just trying to get by the sparse next.config.js information for next js I guess this probably is a no go for me using it in Nextjs. Can anyone recommend a markdown editor that does work for next?

[jaywcjlove]

@jdudmesh @cyphire https://codesandbox.io/s/nextjs-example-react-md-editor-qjhn7?file=/pages/index.js

thank you @earthnoob.

[themastersoda]

This does not solve the problem, it only works around it. In order to make it work as it should with next.js users need a way to import CSS by themselves instead of having it imported in the source code.