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.

[drewhaines]

I ran into a styling issue but I wasn't using next.js. My setup is Rails + React and the css for the editor wasn't loading properly. I created a plain css file and imported it separately and that solved my issue.

It's attached as a txt cause Github says they don't support uploading css files. Figured this might be helpful for anyone that is in my position and doesn't want to hunt down all the current styles.

markdown_editor.txt

[typedashutosh]

Solution to >
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

In your next.js component or page, add this>

import '@uiw/react-md-editor/dist/markdown-editor.css'

import '@uiw/react-md-editor/lib/esm/components/DragBar/index.css'

import '@uiw/react-md-editor/lib/esm/components/TextArea/index.css'

import '@uiw/react-md-editor/lib/esm/components/Toolbar/index.css'

import '@uiw/react-md-editor/lib/esm/components/Toolbar/Child.css'

Then, go to node_modules/@uiw/ and comment all imports of .css files. It will start working. It worked for me on next 10.0.7
:)

[veksen]

The suggested solution is now deprecated by Zeit/Vercel. Consider a proper fix and not import the CSS in the node_modules :)

[karlhorky]

@jaywcjlove should this be reopened? Sseems like the Next.js recommendation is now to not use imports of CSS from node_modules...

[jaywcjlove]

@karlhorky If the above does not work, try the following.

1. Customizing Babel Config : https://nextjs.org/docs/advanced-features/customizing-babel-config
2. Use babel-plugin-transform-remove-imports，Delete the CSS import in node_module.
3. Import css in your page. import '@uiw/react-md-editor/dist/markdown-editor.css'

[karlhorky]

Hmm... step 2 fails for some reason - same error (babel.config.js is not the problem - this is just a newer config format):

https://codesandbox.io/s/nextjs-example-react-md-editor-forked-bjmoi?file=/babel.config.js

Is there something misconfigured here?

Error (same as above):

./node_modules/@uiw/react-markdown-preview/lib/esm/styles/markdowncolor.css
Global CSS cannot be imported from within node_modules.
Read more: https://err.sh/next.js/css-npm
Location: node_modules/@uiw/react-markdown-preview/lib/esm/index.js

[karlhorky]

Ah maybe webpack is not configured to run the babel-loader in node_modules, that would make sense...

I guess if that is the case, then also Custom webpack config may be the guide to follow...

[jaywcjlove]

@karlhorky

If it doesn't work, you can only use it. @zeit/next-css I saw its implementation, but it was actually modifying the webpack configuration.

For Example: https://codesandbox.io/s/nextjs-example-react-md-editor-qjhn7?file=/next.config.js:25-39

I don't want @uiw/react-md-editor to only run in nextjs.

[karlhorky]

@zeit/next-css is deprecated though - and recommended against. So probably not a good direction.

There seems to be things like next-transpile-modules and this issue requesting support for transpiling node_modules, but both of these options don't look very stable or robust 🙁

The best would be for @uiw/react-md-editor to not import CSS within the published files on npm - this is not only good for Next.js, but also generally, for the flexibility of the library (eg. maybe some users want to avoid importing styles)

[karlhorky]

I don't want @uiw/react-md-editor to only run in nextjs.

I understand this, that makes sense. I don't think it should only work in Next.js.

However, many libraries instruct the users to import CSS files themselves (which makes it more flexible as well, for users without css-loader).

For example, in the Reach UI docs:

// import the components
import { Menu, MenuButton, MenuList, MenuItem } from "@reach/menu-button";
// and the styles
import "@reach/menu-button/styles.css";

Maybe it would make sense to move the CSS imports out of files like /lib/esm/Editor.js and into your installation guide for users instead?

Maybe the upcoming v3 would be a good time to make this potentially breaking change...?

[stLoiz]

@jaywcjlove Is there any update on this? As the @zeit/next-css is deprecated how can we use this library?

[jaywcjlove]

@stLoiz Did not expect the best of both worlds solution.

[xuliang2019]

1.Create a /static folder at the same level the /pages folder.
2. In that folder put your .css files
3. In your page components import Head and add a <link /> to your CSS.

import React from 'react';
import Head from 'next/head';

export default () => (
  <div>
    <Head>
      <title>My styled page</title>
      <link href="/static/styles.css" rel="stylesheet" />
    </Head>
    <p className="some-class-name">
      Hello world!
    </p>
  </div>
)

Reference: https://github.com/vercel/next.js/issues/299#issuecomment-263146962

[a-m-dev]

I just wanted to drop a quick heads up on style imports! it looks like they are not bundled with this name any more:

import "@uiw/react-md-editor/dist/markdown-editor.css";
import "@uiw/react-markdown-preview/dist/markdown.css";

instead, they are:

import "@uiw/react-md-editor/dist/mdeditor.min.css";
import "@uiw/react-markdown-preview/dist/markdown.min.css";

here is a screenshot of dist folder inside of node-modules that got me for 2 mins to figure it out:

[bdugg9119]

I created a nextjs package next-remove-imports to solve the problem.

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

@rafaelguedes @serendipity1004 @karlhorky @namnd @A7U @stLoiz @veksen @earthnoob @jdudmesh @diego9497

npm i @uiw/[email protected]
npm i next-remove-imports

// next.config.js
const removeImports = require("next-remove-imports")();

module.exports = removeImports({
  // ✅  options...
});

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 }
);

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

export default HomePage;

• Support ES module format (ESM) in next.config.js vercel/next.js#9607

• Cannout build production Nextjs #350 (comment)

@pascuflow example: https://codesandbox.io/s/nextjs-example-react-md-editor-forked-89jwvb?file=/pages/index.js

- import { commands } from "@uiw/react-md-editor";
+ import * as commands from "@uiw/react-md-editor/esm/commands";

I used the plugin but I'm still encountering an error. The editor/preview seems to work fine when I navigate to the page with it via <Link />, however if I refresh that page I get the following error:

Server Error
require() of ES Module /home/axel/dev/lit-app/node_modules/react-markdown/index.js from /home/axel/dev/lit-app/node_modules/@uiw/react-markdown-preview/lib/index.js not supported.
Instead change the require of /home/axel/dev/lit-app/node_modules/react-markdown/index.js in /home/axel/dev/lit-app/node_modules/@uiw/react-markdown-preview/lib/index.js to a dynamic import() which is available in all CommonJS modules.

This error happened while generating the page. Any console logs will be displayed in the terminal window.

[jaywcjlove]

@jdudmesh

• Errors regarding package use in Next.js + Typescript project due to module conflict #438 (comment)

[jaywcjlove]

@jdudmesh

• Support Next.js #446 (comment)

[Kartikgondha]

solutions are 👍

install :-
npm install next-remove-imports
npm install @uiw/[email protected]

// next.config.js file write :-
const removeImports = require('next-remove-imports')();
module.exports = removeImports({});

//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"),
{ ssr: false }
);

function Pages() {
const [value, setValue] = useState("Hello world!!!");
return (

);
}
export default Pages;

[preetpatel]

What worked for me (Next.js version 13.4.3) is inside your next.config.mjs add the following to your config:

...
experimental: {
    esmExternals: 'loose',
  },
....

[akash-mahmud]

solutions are 👍

install :- npm install next-remove-imports npm install @uiw/[email protected]

// next.config.js file write :- const removeImports = require('next-remove-imports')(); module.exports = removeImports({});

//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"), { ssr: false } );

function Pages() { const [value, setValue] = useState("Hello world!!!"); return (

);
}
export default Pages;

After doing all of these I am getting now webpack errors.

[BABEL] Note: The code generator has deoptimised the styling of /Users/md.redoanurrahmanrafi/Desktop/Development/projects/Matteo/Neurge/admin/node_modules/.pnpm/@[email protected]_@[email protected]_@[email protected][email protected]/node_modules/@mui/icons-material/esm/index.js as it exceeds the max of 500KB. [BABEL] Note: The code generator has deoptimised the styling of /Users/md.redoanurrahmanrafi/Desktop/Development/projects/Matteo/Neurge/admin/node_modules/.pnpm/[email protected]/node_modules/lodash/lodash.js as it exceeds the max of 500KB. [BABEL] Note: The code generator has deoptimised the styling of /Users/md.redoanurrahmanrafi/Desktop/Development/projects/Matteo/Neurge/admin/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom.development.js as it exceeds the max of 500KB.

I am using nextjs 13.x

[kambhani]

For those struggling, I was able to fix this issue without installing next-remove-imports by adding the line transpilePackages: ['react-md-editor'] to my next.config.js file.

[mahdisoultana]

i got types error with typescript .

[veksen]

i got types error with typescript .

Rename your file to .tsx like the rest of your components - unrelated to this issue however

[felipe1120gomez]

As @preetpatel mentioned the only thing you have to do is use:

experimental: {
    esmExternals: 'loose',
  },

Here I leave the code that I used in a NextJS 13.0.7 App:

next.config.js

// @ts-check
/** @type {import('next').NextConfig} */
const nextConfig = {
  output: 'standalone',   /* This is not part of the react-md-editor configuration */
  reactStrictMode: true,   /* This is not part of the react-md-editor configuration */
  swcMinify: true,   /* This is not part of the react-md-editor configuration */
  experimental: {
    appDir: true,   /* This is not part of the react-md-editor configuration */
    esmExternals: 'loose',   /* For react-md-editor */
  },
  },
};

module.exports = nextConfig;

page.tsx (Component)

'use client';
import MDEditor, { commands } from '@uiw/react-md-editor';
import { ChangeEvent, useState } from 'react';

/* Custom button in toolbar */
const help = {
  name: 'help',
  keyCommand: 'help',
  buttonProps: { 'aria-label': 'Insert help' },
  icon: (
    <svg viewBox='0 0 16 16' width='12px' height='12px'>
      <path
        d='M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8Zm.9 13H7v-1.8h1.9V13Zm-.1-3.6v.5H7.1v-.6c.2-2.1 2-1.9 1.9-3.2.1-.7-.3-1.1-1-1.1-.8 0-1.2.7-1.2 1.6H5c0-1.7 1.2-3 2.9-3 2.3 0 3 1.4 3 2.3.1 2.3-1.9 2-2.1 3.5Z'
        fill='currentColor'
      />
    </svg>
  ),
  // eslint-disable-next-line no-unused-vars
  execute: (state: any, api: any) => {
    window.open('https://www.markdownguide.org/basic-syntax/', '_blank');
  },
};

export default function Page() {
  const [value, setValue] = useState<string | undefined>('**Hello world!!!**');

  const handleChange = (
    value?: string | undefined,
    // eslint-disable-next-line no-unused-vars
    event?: ChangeEvent<HTMLTextAreaElement> | undefined,
  ) => {
    setValue(value);
    console.log('markdown: ', value);
  };

  return (
    <div>
      <MDEditor
        value={value}
        onChange={handleChange}
        commands={[...commands.getCommands(), help]}
      />
      {/* (val) => setValue(val) */}
    </div>
  );
}

As you can see there is no need to install additional packages like next-remove-imports or use specific NextJS imports for the component.

[hanna244]

I created a nextjs package next-remove-imports to solve the problem.

Example: https://codesandbox.io/s/nextjs-example-react-md-editor-qjhn7?file=/pages/index.js Example: @uiwjs/next-remove-imports/example Example: https://next-remove-imports-example.vercel.app

⚠️ https://www.npmjs.com/package/next-transpile-modules

@rafaelguedes @serendipity1004 @karlhorky @namnd @A7U @stLoiz @veksen @earthnoob @jdudmesh @diego9497

npm i @uiw/[email protected]
npm i next-remove-imports

// next.config.js
const removeImports = require("next-remove-imports")();

module.exports = removeImports({
  // ✅  options...
});

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 }
);

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

export default HomePage;

• Support ES module format (ESM) in next.config.js vercel/next.js#9607

• Errors regarding package use in Next.js + Typescript project due to module conflict #438

• Using next-remove-imports but still can't deploy - Next.js #224

• Cannout build production Nextjs #350

• Editor reloads with state change in Next JS #422

• Cannout build production Nextjs #350 (comment)

+ import * as commands from "@uiw/react-md-editor/lib/commands";
- import { commands } from "@uiw/react-md-editor"
- // or
- import * as commands from "@uiw/react-md-editor/esm/commands";

example: https://codesandbox.io/s/nextjs-example-react-md-editor-forked-89jwvb?file=/pages/index.js

import * as commands from "@uiw/react-md-editor/lib/commands";

import { MDEditorProps } from '@uiw/react-md-editor';
import * as commands from '@uiw/react-md-editor/esm/commands';

+ const MDEditor = dynamic<MDEditorProps>(() => import('@uiw/react-md-editor'), {
+   ssr: false,
+ });

function HomePage() {
-  const MDEditor = dynamic<MDEditorProps>(() => import('@uiw/react-md-editor'), {
-    ssr: false,
-  });
  return (
    <div>
      <MDEditor
         value="**Hello world!!!**"
         commands={[
           commands.bold,
           commands.italic,
         ]}
      />
    </div>
  );
}

You can use 'next-transpile-modules' instead of 'next-remove-imports'. (using next.js page router)

// next.config.mjs
import withTM from 'next-transpile-modules'

const WithTM = withTM(['@uiw/react-md-editor', '@uiw/react-markdown-preview'])

const nextConfig = {
   ...
}

export default WithTM(nextConfig)