NextJS 10 or above Framework issue "Global CSS cannot be imported from within node_modules"

[HassaanShah016]

Dear All,
I created a NextJS project and installed the react-markdown-editor via npm. When I try to run my NextJS project the following error message appears:

Error
Global CSS cannot be imported from within node_modules. Read more: https://nextjs.org/docs/messages/css-npm Location: node_modules\@uiw\react-markdown-preview\lib\esm\index.js

And the possible reason according to NextJS documentation:
https://nextjs.org/docs/messages/css-npm

It will be really great if "react-markdown-editor" can be ported for NextJS framework properly.

Note:

• Similar issue: https://github.com/uiwjs/react-md-editor/issues/52
• As a solution to similar issue as mine current version of NextJS 10 or above have deprecated the use of "@zeit/next-css" and don't recommend to use it.
• Warning: Built-in CSS support is being disabled due to custom CSS configuration being detected.
  Regards,
  MHS

[HassaanShah016]

Here found the "codesandbox" project link for NextJs framework: https://codesandbox.io/s/nextjs-example-react-md-editor-qjhn7?file=/pages/index.js

Export the project as .zip from "codesandbox" and extract to your desired location
navigate to the extracted directory and use the "npm install" command to install all the dependencies.
"npm run dev" to run the project

[ldco2016]

@Hassaan016 I am still getting the error in terminal:

ready - started server on 0.0.0.0:3000, url: http://localhost:3000
event - compiled client and server successfully in 2.1s (128 modules)
wait  - compiling / (client and server)...
(node:35985) [DEP_WEBPACK_MODULE_ISSUER] DeprecationWarning: Module.issuer: Use new ModuleGraph API
(Use `node --trace-deprecation ...` to show where the warning was created)
error - ./node_modules/@uiw/react-markdown-preview/esm/styles/markdown.css
Global CSS cannot be imported from within node_modules.
Read more: https://nextjs.org/docs/messages/css-npm
Location: node_modules/@uiw/react-markdown-preview/esm/index.js
Could not find files for / in .next/build-manifest.json
Could not find files for / in .next/build-manifest.json

This is my package.json file:

{
  "name": "client",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@uiw/react-markdown-preview": "4.0.5",
    "@uiw/react-md-editor": "3.11.0",
    "bootstrap": "^5.1.3",
    "next": "12.0.10",
    "next-remove-imports": "1.0.6",
    "react": "17.0.2",
    "react-dom": "17.0.2"
  },
  "devDependencies": {
    "@types/node": "17.0.34",
    "@types/react": "^17.0.2",
    "@types/react-dom": "17.0.2",
    "eslint": "8.15.0",
    "eslint-config-next": "12.1.6",
    "typescript": "4.6.4"
  }
}

And this is my text-editor.tsx file:

import "@uiw/react-md-editor/markdown-editor.css";
import "@uiw/react-markdown-preview/markdown.css";
import dynamic from "next/dynamic";
import { useState } from "react";

const MDEditor = dynamic(
  () => import("@uiw/react-md-editor").then((mod) => mod.default),
  { ssr: false }
);
const EditerMarkdown = dynamic(
  () =>
    import("@uiw/react-md-editor").then((mod) => {
      return mod.default.Markdown;
    }),
  { ssr: false }
);
const Markdown = dynamic(
  () => import("@uiw/react-markdown-preview").then((mod) => mod.default),
  { ssr: false }
);

function HomePage() {
  const [value, setValue] = useState("**Hello world!!!**");
  return (
    <div data-color-mode='dark'>
      <MDEditor value={value} onChange={setValue} />
      <div style={{ paddingTop: 50 }}>
        <Markdown source={value} />
      </div>
      <EditerMarkdown source={value} />
    </div>
  );
}

export default HomePage;

[JasonAtallah]

Is there an update to this? I'm running into the same issue

[falcondpr]

same problem

[Frostbourn]

Same problem

[jaywcjlove]

• Support Next.js #446 (comment)

@Frostbourn @fervillalbag @JasonAtallah