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]

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

• Support Next.js 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

[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