TypeError: next is undefined. Minimal "<CodeMirror /> React Component Fails?

ryanerwin commented 3 years ago

I'm trying to run the most basic uiwjs/react-codemirror example from Readme.md and it's failing now on two separate systems. (Ubuntu 20.04 and Ubuntu 20.10)

The strange thing, one week ago it react-codemirror was working fine for me. I haven't been able to figure out what changed, but even the most basic examples are failing for me. I've created a new empty app, and even that fails.

I'm using React 17.0.1, npm 6.14.8

npx create-react-app foo
cd foo
npm install @uiw/react-codemirror --save
npm install codemirror --save

src/App.js only contains:

import CodeMirror from '@uiw/react-codemirror';
import 'codemirror/keymap/sublime';
import 'codemirror/theme/monokai.css';

const code = 'const a = 0;';

function App() {
  return (
    <div className="App">
        <p>
          <CodeMirror
            value={code}
            options={{
              theme: 'monokai',
              keyMap: 'sublime',
              mode: 'jsx',
            }}
          />
        </p>
    </div>
  );
}

export default App;

npm start

When I open it under Firefox I get:

TypeError: next is undefined
defineOptions/<
node_modules/@uiw/react-codemirror/node_modules/codemirror/lib/codemirror.js:7723

  7720 |   var next = getKeyMap(val);
  7721 |   var prev = old != Init && getKeyMap(old);
  7722 |   if (prev && prev.detach) { prev.detach(cm, next); }
> 7723 |   if (next.attach) { next.attach(cm, prev || null); }
       | ^  7724 | });
  7725 | option("extraKeys", null);
  7726 | option("configureMouse", null);

When I open the this under Chrome I get a different error message, but it still fails on the same line.

TypeError: Cannot read property 'attach' of undefined
keyMap
node_modules/@uiw/react-codemirror/node_modules/codemirror/lib/codemirror.js:7723
  7720 |   var next = getKeyMap(val);
  7721 |   var prev = old != Init && getKeyMap(old);
  7722 |   if (prev && prev.detach) { prev.detach(cm, next); }
> 7723 |   if (next.attach) { next.attach(cm, prev || null); }
       | ^  7724 | });
  7725 | option("extraKeys", null);
  7726 | option("configureMouse", null);

jaywcjlove commented 3 years ago

@ryanerwin https://codesandbox.io/s/react-codemirror-72-n8tzd-n8tzd?file=/src/App.js

ryanerwin commented 3 years ago

@jaywcjlove 谢谢你的连接。

所以问题是我的环境配置。。。我改到用最新的node snap,改变到用yarn，现在好了。

另外，你可以解释为什么这个codesandbox.io连接没有“codemirror”依赖包，但是还能“import codemirror/...吗"？

如果我自己 npm uninstall codemirror 我会遇到 Module not found: Can't resolve codemirror/keymap/sublime

jaywcjlove commented 3 years ago

@ryanerwin 我文档里面没有说要安装 codemirror 依赖，codemirror 已经在包中集成了

https://github.com/uiwjs/react-codemirror/blob/06cecc633aa45851df9c448af6ac78d4214cc539/package.json#L41-L44

uiwjs / react-codemirror

TypeError: next is undefined. Minimal "<CodeMirror /> React Component Fails? #72