Closed HassaanShah016 closed 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
@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;
Is there an update to this? I'm running into the same issue
same problem
Same problem
@Frostbourn @fervillalbag @JasonAtallah
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: