search

uiwjs / react-md-editor

A simple markdown editor with preview, implemented with React.js and TypeScript.
https://uiwjs.github.io/react-md-editor
MIT License
2.17k stars 157 forks source link

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

Closed HassaanShah016 closed 3 years ago

HassaanShah016 commented 3 years ago

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:

HassaanShah016 commented 3 years ago

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 commented 2 years ago

@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 commented 2 years ago

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

falcondpr commented 2 years ago

same problem

Frostbourn commented 1 year ago

Same problem

jaywcjlove commented 1 year ago

@Frostbourn @fervillalbag @JasonAtallah