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

Next.js Support?

Open codeXLinkX opened this issue 2 years ago • 8 comments

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!

Aug 31 '21 15:08 codeXLinkX

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

Aug 31 '21 15:08 jaywcjlove

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

Aug 31 '21 16:08 jaywcjlove

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.

Sep 01 '21 14:09 codeXLinkX

@codeXLinkX Upgrade @uiw/[email protected]

Sep 01 '21 14:09 jaywcjlove

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

Sep 01 '21 16:09 codeXLinkX

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

Sep 01 '21 16:09 jaywcjlove

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.

Sep 01 '21 17:09 codeXLinkX

I'm not sure what you mean. @codeXLinkX

Sep 02 '21 05:09 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

Oct 21 '22 07:10 jaywcjlove

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

Nov 13 '22 03:11 MariaSolOs

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

Nov 13 '22 05:11 jaywcjlove

@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...?

Nov 13 '22 05:11 MariaSolOs

@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

Nov 13 '22 05:11 jaywcjlove

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

Nov 13 '22 17:11 MariaSolOs

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

Nov 14 '22 14:11 jaywcjlove

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

May 28 '23 01:05 bombillazo

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

Jun 05 '23 09:06 JM-delatorre

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

Jun 05 '23 10:06 jaywcjlove

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.

Jun 05 '23 10:06 JM-delatorre

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