Next.js Support? about react-textarea-code-editor

[jaywcjlove]

• uiwjs/react-md-editor#446 (comment)

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

[jaywcjlove]

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

[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

[jamesmurdza]

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

[jaywcjlove]

@codeXLinkX

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

// 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]

uiwjs/react-md-editor#52 (comment)

[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/[email protected]

[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

[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"
  }
}

react-textarea-code-editor/package.json

Lines 5 to 7 in 7e75adf

	"main": "cjs/index.js",
	"module": "esm/index.js",
	"scripts": {

[MariaSolOs]

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

[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

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

[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