Next.js Support?

[codeXLinkX]

When I try to use this package in a React/Nextjs project, I get the following errors:

Module not found: ESM packages (rehype) need to be imported. Use 'import' to reference the package instead. https://nextjs.org/docs/messages/import-esm-externals and

wait  - compiling...
error - ../../node_modules/@uiw/react-textarea-code-editor/esm/style/index.css
Global CSS cannot be imported from within node_modules.
Read more: https://nextjs.org/docs/messages/css-npm
Location: ../../node_modules/@uiw/react-textarea-code-editor/esm/index.js

The link in the error message suggests the following:

Reach out to the maintainer and ask for them to publish a compiled version of their dependency. Compiled dependencies do not have references to CSS files, or any other files that require bundler-specific integrations.

So I wanted to hear the thoughts of the maintainers of this package. Thanks!

[jaywcjlove]

@codeXLinkX

npm install next-remove-imports
npm install @uiw/react-textarea-code-editor@v1.4.4

// next.config.js
const removeImports = require("next-remove-imports")();
module.exports = removeImports({
  experimental: { esmExternals: true }
});

import React from "react";
import dynamic from "next/dynamic";
import "@uiw/react-textarea-code-editor/dist.css";

const CodeEditor = dynamic(
  () => import("@uiw/react-textarea-code-editor").then((mod) => mod.default),
  { ssr: false }
);

function HomePage() {
  const [code, setCode] = React.useState(
    `function add(a, b) {\n  return a + b;\n}`
  );
  return (
    <div>
      <CodeEditor
        value={code}
        language="js"
        placeholder="Please enter JS code."
        onChange={(evn) => setCode(evn.target.value)}
        padding={15}
        style={{
          fontSize: 12,
          backgroundColor: "#f5f5f5",
          fontFamily:
            "ui-monospace,SFMono-Regular,SF Mono,Consolas,Liberation Mono,Menlo,monospace"
        }}
      />
    </div>
  );
}

export default HomePage;

[jaywcjlove]

https://github.com/uiwjs/react-md-editor/issues/52#issuecomment-848969341

[codeXLinkX]

This line still seems to be problematic: import "@uiw/react-textarea-code-editor/dist.css"; causing following error:

error - ../../@uiw/react-textarea-code-editor/dist.css
Global CSS cannot be imported from files other than your Custom <App>. Due to the Global nature of stylesheets, and to avoid conflicts, Please move all first-party global CSS imports to pages/_app.js. Or convert the import to Component-Level CSS (CSS Modules).
Read more: https://nextjs.org/docs/messages/css-global

If I remove that line, I still get another error:

error - ../../@uiw/react-textarea-code-editor/cjs/utils.js:1:0
Module not found: ESM packages (rehype) need to be imported. Use 'import' to reference the package instead. https://nextjs.org/docs/messages/import-esm-externals

Import trace for requested module:
./.././@uiw/react-textarea-code-editor/cjs/index.js

If I change experimental: { esmExternals: true } to experimental: { esmExternals: "loose" } while excluding import "@uiw/react-textarea-code-editor/dist.css";, then errors are gone but then the code in textarea doesn't get highlighted.

[jaywcjlove]

@codeXLinkX Upgrade @uiw/react-textarea-code-editor@1.4.7

[codeXLinkX]

Do I still need to keep dist.css import after upgrading to 1.4.7? Because I still get

error - ../../@uiw/react-textarea-code-editor/dist.css
Global CSS cannot be imported from files other than your Custom <App>. Due to the Global nature of stylesheets, and to avoid conflicts, Please move all first-party global CSS imports to pages/_app.js. Or convert the import to Component-Level CSS (CSS Modules).
Read more: https://nextjs.org/docs/messages/css-global

after this change:

const removeImports = require("next-remove-imports")();
module.exports = removeImports({
  experimental: { esmExternals: true },
  webpack5: true,
  ...
});

[jaywcjlove]

@codeXLinkX Example: https://codesandbox.io/embed/react-textarea-code-editor-example-nextjs-gdzlw?fontsize=14&hidenavigation=1&theme=dark

[codeXLinkX]

I wonder if the example only works because the css was imported in a file under the /pages folder. I am importing it outside /pages so it probably doesn't run in the server side.

[jaywcjlove]

I'm not sure what you mean. @codeXLinkX

[jaywcjlove]

• https://github.com/uiwjs/react-md-editor/issues/446#issue-1417594634

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

[MariaSolOs]

For my own learning: @jaywcjlove could you please explain why the following next.config is needed?

const removeImports = require("next-remove-imports")();
module.exports = removeImports({
  experimental: { esmExternals: true }
});

[jaywcjlove]

The next-remove-imports plugin removes the css files(in node_modules) introduced in the package, and nextjs(CSS Imported by a Dependency) will not report an error.

@MariaSolOs

[MariaSolOs]

@jaywcjlove Thank you for the quick reply! However, it still unclear to me why the esmExternals option is needed. From this Next PR it seems like this package should have an exports field in its package.json...?

[jaywcjlove]

@MariaSolOs yes i didn't think about adding

  "main": "cjs/index.js",
  "module": "esm/index.js",
"exports": {
  ".": {
    "import": "./esm/index.js",
    "require": "./cjs/index.js"
  },
  "./index": {
    "import": "./esm/index.js",
    "require": "./cjs/index.js"
  }
  ".": {
    "import": "./esm/index.js",
    "require": "./cjs/index.js"
  },
  "./shortcuts": {
    "import": "./esm/shortcuts.js",
    "require": "./cjs/shortcuts.js"
  },
  "./styles": {
    "import": "./esm/styles.js",
    "require": "./cjs/styles.js"
  },
  "./SelectionText": {
    "import": "./esm/SelectionText.js",
    "require": "./cjs/SelectionText.js"
  },
  "./utils": {
    "import": "./esm/utils.js",
    "require": "./cjs/utils.js"
  }
}

https://github.com/uiwjs/react-textarea-code-editor/blob/7e75adfc257c9537c4f51c64de978e18d3e96d98/package.json#L5-L7

[MariaSolOs]

@jaywcjlove Yeah I think that adding that "exports" field should avoid the need of having experimental: { esmExternals: true }.

[jaywcjlove]

@MariaSolOs Tested, the style can't automatically load the rollback code.

[bombillazo]

Is @v1.4.4 required to work on Next.js? We are using the latest version with next using dynamic import but the styling in the text area does not work at all. :/

Nevemind

I was missing this in my imports:

import "@uiw/react-textarea-code-editor/dist.css";

the example should add this

[JM-delatorre]

Im using the same example posted in the Readme, for working with the last version of Nextjs using app routing, and doesnt work it gives me the same error of modules

./node_modules/@uiw/react-textarea-code-editor/cjs/utils.js:10:14
Module not found: ESM packages (rehype) need to be imported. Use 'import' to reference the package instead. https://nextjs.org/docs/messages/import-esm-externals

https://nextjs.org/docs/messages/module-not-found

Import trace for requested module:
./node_modules/@uiw/react-textarea-code-editor/cjs/index.js
./src/app/translate/page.tsx

[jaywcjlove]

@JM-delatorre Example: https://github.com/uiwjs/next-remove-imports/tree/main/example

[JM-delatorre]

Im not sure what is the problem, but i re installed the two packages without the versioning tag, and in the component that i am working on i specified that is a client and not a server component. I solved it this way but im not sure why it works.

btw thanks for the fast response.

[jamesmurdza]

@JM-delatorre Thanks for your comment, that helped me. I added "use client" to the top of the file and it worked.

[TravisHi]

Using "next": "13.4.13",

I also had to add: transpilePackages: ["react-textarea-code-editor"],

to my nextConfig object

[jamespsterling]

Using "next": "13.4.13",

I also had to add: transpilePackages: ["react-textarea-code-editor"],

to my nextConfig object

I had to do '@uiw/react-textarea-code-editor' and it worked with v3