Filtering out `undefined` extensions

Can CodeMirror 6 automatically filter out undefined values for extensions, or at the very least provide some kind of error when it happens?

It took me hours to track down that somewhere deep in my extensions setup, I was importing what should’ve been an extension, but came back as undefined. When it was added to CodeMirror’s extensions, it caused a very obscure error in other extensions where the view or transaction state wouldn’t be available.

No, that doesn’t seem like the job of the library. TypeScript will tell you if you’re putting an undefined where an extension is expected. If something may be undefined, just put in something ?? [] to make sure it’s a valid extension value. If you’re getting undefined values where you don’t expect them, that seems like it would be a bug you need to do something about.

If you’re getting undefined values where you don’t expect them, that seems like it would be a bug you need to do something about.

Yes, ultimately the problem was a bug in my code I had to patch. The problem was tracking it down.

Even with TypeScript, you won’t always get the proper type evaluation, especially with async/runtime work or external packages that don’t have proper types.

This is a somewhat easy error to run into, but the errors that come up because of it are very difficult to track down to the actual cause. CodeMirror (or TypeScript) don’t necessarily reject the value and it’s only when the view goes to update that you then start to see the errors.

That’s been a relatively frequent experience in my working with CodeMirror 6 where errors are obscure and difficult to track down. Even if the errors are the developer’s fault, it would certainly be helpful to have guards or proper error messaging. :man_shrugging:

1 Like

The thing you are proposing (silently filtering out such values) would have made this a whole lot harder to debug. When I put undefined in an extension array, I get a “Uncaught TypeError: ext is undefined”, which seems a lot better. I’m not going to add runtime checks for type contract violations to the library, since that’s an endless list of possible checks, and tends to clutter and bloat the code.

Here’s the error I get ( Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'extension') for future searchability). However, the error does not come up when adding the undefined to the State’s extensions. It only came up later when trying to access the State from a transaction.

In retrospect undefined while reading 'extension' now makes sense as to what’s causing the bug, but the disconnected nature of the error and the amount of extensions I have spread across various areas made it very difficult to trace.

At any rate, here’s this information for anyone who runs into this in the future.

I encountered the same problem, how did you ultimately solve it?

I don’t know that there was any helpful trick to it, other than checking all your extensions to ensure they aren’t undefined before being added to the state. It can be a bit of a pain if you have things spread out or nested arrays.

In fact, I encountered this error without using any extensions. I am using a plugin called vue-codemirror, which is encapsulated in vue3

Seems like they are using some extensions internally that may be causing the error. You should likely file an issue with the plugin author.

It’s interesting that I finally discovered the problem. In package management, I installed the codemirror5. x version, which also prompts this error. Finally, I hope these records can help those who are also troubled. Thank you, friend