NextJS 10 or above Framework issue "Global CSS cannot be imported from within node_modules" about react-md-editor

[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

[fervillalbag]

same problem

[Frostbourn]

Same problem

[jaywcjlove]

• #446 (comment)

@Frostbourn @fervillalbag @JasonAtallah