Error: (0 , _react.useRef) is not a function

[Jacques2Marais]

I am using React 18.2.0 on NextJS and get the following error whenever creating a CodeMirror component in one of my components. The code I have at the moment is as following:

import CodeMirror from '@uiw/react-codemirror';

function App() {
  return (
    <CodeMirror
      value="console.log('hello world!');"
      height="200px"
    />
  );
}
export default App;

And the error call stack looks as following:

eval
node_modules/@uiw/react-codemirror/cjs/index.js (92:34)

render
node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-server.edge.development.js (1498:17)

attemptResolveElement
node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-server.edge.development.js (1759:20)

resolveModelToJSON
node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-server.edge.development.js (1249:13)

stringify
<anonymous>

stringify
node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-server.edge.development.js (181:13)

processModelChunk
node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-server.edge.development.js (2062:25)

retryTask
node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-server.edge.development.js (2109:6)

performWork
node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-server.edge.development.js (1544:13)

listOnTimeout
node:internal/timers (568:17)

process.processTimers
node:internal/timers (511:7)

[ntillier]

I had the same error. You need to add "use client" to the beginning of the file, as it seems that nextjs can't render the editor as a server component.

[jaywcjlove]

@Jacques2Marais @ntillier https://codesandbox.io/embed/solitary-fog-9h5r39?fontsize=14&hidenavigation=1&theme=dark

import React from "react";
import Link from "next/link";
import dynamic from "next/dynamic";

const CodeMirror = dynamic(() => import("@uiw/react-codemirror"), {
  ssr: false
});

const Thing: React.FC<{ msg: string }> = (props) => {
  return <div>{props.msg}</div>;
};

export default () => {
  console.log("CodeMirror", CodeMirror);
  return (
    <div>
      xxx
      <CodeMirror value="console.log('hello wosrld!');" height="200px" />
      Hello World. <Thing msg="hello" />
    </div>
  );
};

[ntillier]

@jaywcjlove this error occurs with the new app directory (https://nextjs.org/docs/app). This video explains some of the latest features https://youtu.be/gSSsZReIFRk

I made an example here, with 3 examples https://stackblitz.com/edit/stackblitz-starters-nklft1?file=app%2Fwith-use-client%2Fpage.tsx

[jaywcjlove]

@ntillier https://nextjs.org/docs/messages/import-esm-externals

https://github.com/uiwjs/react-codemirror/blob/043a23c93eecf462fe0b770157800ac2891c239e/core/package.json#L8-L9

Support cjs and esm syntax, I don't know how to configure the usage of "use client"

ESM packages need to be imported

Why This Error Occurred Packages in node_modules that are published as EcmaScript Module, need to be imported via import ... from 'package' or import('package').

You get this error when using a different way to reference the package, e. g. require().

Possible Ways to Fix It

1. Use import or import() to reference the package instead. (Recommended)
2. If you are already using import, make sure that this is not changed by a transpiler, e. g. TypeScript or Babel.
3. Switch to loose mode (experimental.esmExternals: 'loose'), which tries to automatically correct this error.