Does not work with NextJS about react-md-editor

[jaywcjlove]

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;

• vercel/next.js#9607
• #438
• #224
• #350
• #422

---

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

[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
:)

[zoeleu]

@jaywcjlove Can you just remove the imports from your package, and ask us to import it ourselves? Your solution with next-remove-imports is not working for me.

[serendipity1004]

Yes. It's almost impossible to suit all the needs of so many frameworks these days and I thank you so much for taking time and effort to build a very beautiful open source. However, if you want your package to grow (I don't know if this is your intention) it would be a good idea to encapsulate NextJS users because it is one of the biggest SSR framework. I don't think this is something you should be unhappy about. You should be happy because it just means that your package is gaining a lot of popularity. That's why there are demands here and there.

[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.

[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.

[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;

[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.

[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

[karlhorky]

But it's not a good, long-term, robust solution.

@jaywcjlove I would again recommend switching to get users to import the styles themselves: #52 (comment)

[jaywcjlove]

@matteoturini The example still works: https://codesandbox.io/s/nextjs-example-react-md-editor-qjhn7?file=/pages/index.js

"dependencies": {
  "@uiw/react-md-editor": "3.6.5",
  "next": "11.1.2",
  "next-remove-imports": "1.0.6",
  "react": "17.0.2",
  "react-dom": "17.0.2"
},

[tawnyzhao]

Given the snippet, how would one go about import commands and markdownUtils (such as selectWord)? The default exported component works but I can't seem to figure out how to import anything else. Attempting to import anything else gives this as an error.

Error [ERR_REQUIRE_ESM]: Must use import to load ES Module

[veksen]

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

[namnd]

For anyone is still looking for a temporary solution, I've created a forked package out of this one https://www.npmjs.com/package/@namskiiiii/react-md-editor-naked just to remove the styling

[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',
  },
....

[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.

[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.

[rafaelguedes]

I agree with @serendipity1004. NextJS is one of the biggest SSR frameworks and I believe that not encapsulating its users will prevent this amazing package to grow. I'm also trying to make this work with NextJS and I'm struggling.
Can you please merge the PR #131 assuming that it will fix this issue?
@jaywcjlove

[Dhenyson]

Just to consolidate the solution: Yes, the current solution works! Even so I kept getting errors, but the reason was simply the wrong use of the "next-remove-imports" plugin, when I needed to export more than one module in next.config.js . I was forgetting to put "options" as argument to "next-remove-imports". I will put a clean and simple code for understanding.

Wrong mode:

const removeImports = require('next-remove-imports')({});
                  
module.exports = removeImports({})

module.exports = {
     images: {
         domains: [
             'localhost',
             '10.0.0.164',
             'example.com'
         ]
     }
}

Correct mode:

const removeImports = require('next-remove-imports')({})

module.exports = removeImports({
     images: {
         domains: [
             'localhost',
             '10.0.0.164',
             'example.com'
         ]
     }
})

[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:

[mahdisoultana]

i got types error with typescript .

[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?

[cjchirag7]

I'm too facing the same problem, this doesn't work in NextJS. Any way to make it working ?

[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

[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.

[karlhorky]

@xuliang2019 I don't think this is a solution.

The issue is that the import import MDEditor from '@uiw/react-md-editor' will already fail in Next.js (because inside the @uiw/react-md-editor package, there is an import of a CSS file that is inside of node_modules, which Next.js does not support)

---

Also, the instructions that you posted above are not valid anymore for current versions of Next.js - there is no longer a /static folder in Next.js. It is now called /public: https://nextjs.org/docs/basic-features/static-file-serving

[A7U]

Any solution for this? I really want to use this for my app

[karlhorky]

Alternative Workaround

If you don't want to use a fork / a different npm package, you can also achieve this with patch-package, by making the same edit in your node_modules that @namnd did (see link below) and then running yarn patch-package @uiw/react-md-editor.

namnd@e43c177

[serendipity1004]

lol still not merged? it doesn't seem like an unreasonable approach tbh. SSR is not of something peculiar these days. Removing default import of css would be greatly appreciated.

[jaywcjlove]

I haven't thought about it clearly.

After the change, my project must be changed.

Obviously I am not very happy. :(

@serendipity1004

[jaywcjlove]

I don’t know if there is any way to meet my needs as well as your needs.

[jaywcjlove]

I want to use babel-plugin-transform-remove-imports to remove the style file in node_modules.

Then load the style on the page.

@rafaelguedes I want to solve the problem in this way.

[A7U]

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

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

module.exports = removeImports({});

// pages/index.js

import Head from 'next/head'
import MDEditor from '@uiw/react-md-editor';
import "@uiw/react-md-editor/dist/markdown-editor.css";
import "@uiw/react-markdown-preview/dist/markdown.css";

export default function Home() {
  return (
    <div>
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <MDEditor value="**Hello world!!!**" />
    </div>
  )
}

I'll try that out, thanks

[karlhorky]

@jaywcjlove thanks for creating this :)

I couldn't see it clearly in the readme, but looking at the code linked below, it seems the default behavior of next-remove-imports is to remove all .less and .css imports from all packages in node_modules?

https://github.com/uiwjs/next-remove-imports/blob/939c95df719f33549715fff5c71281bedc6c6a76/index.js#L2-L3

Maybe it would make sense to also do the following (for anyone that is looking to use it):

• document this behavior in the next-remove-imports readme
• also support .sass and .scss by default?
• add Next.js usage instructions (eg. your code snippet above) to the @uiw/react-md-editor readme

[jaywcjlove]

I am sure next-remove-imports is a perfect solution. :)

[nizarfadlan]

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

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

module.exports = removeImports({});

// pages/index.js

import Head from 'next/head'
import MDEditor from '@uiw/react-md-editor';
import "@uiw/react-md-editor/dist/markdown-editor.css";
import "@uiw/react-markdown-preview/dist/markdown.css";

export default function Home() {
  return (
    <div>
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <MDEditor value="**Hello world!!!**" />
    </div>
  )
}

I'll try that out, thanks

Not work for me require() of ES modules is not supported.

[nizarfadlan]

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

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

module.exports = removeImports({});

// pages/index.js

import Head from 'next/head'
import MDEditor from '@uiw/react-md-editor';
import "@uiw/react-md-editor/dist/markdown-editor.css";
import "@uiw/react-markdown-preview/dist/markdown.css";

export default function Home() {
  return (
    <div>
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <MDEditor value="**Hello world!!!**" />
    </div>
  )
}

I'll try that out, thanks

Not work for me require() of ES modules is not supported.

Can only display, but can not type

[tawnyzhao]

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

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

module.exports = removeImports({});

// pages/index.js

import Head from 'next/head'
import MDEditor from '@uiw/react-md-editor';
import "@uiw/react-md-editor/dist/markdown-editor.css";
import "@uiw/react-markdown-preview/dist/markdown.css";

export default function Home() {
  return (
    <div>
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <MDEditor value="**Hello world!!!**" />
    </div>
  )
}

I'll try that out, thanks

Not work for me require() of ES modules is not supported.

This snippet was broken after 3.4.11

[jaywcjlove]

@tawnyzhao Are there examples to debug?

[tawnyzhao]

@jaywcjlove https://codesandbox.io/s/6zov3?file=/pages/index.js
Here is an example to debug. This is just the "custom toolbars" example with the Typescript stuff removed. I tried importing commands normally and through next's dynamic.

[jaywcjlove]

@tawnyzhao

• vercel/next.js#9607

[jaywcjlove]

@jdudmesh

• #438 (comment)

[jaywcjlove]

@jdudmesh

• #446 (comment)

[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

[veksen]

i got types error with typescript .

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