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

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