Working with Sanity.io as a headless backend, for the most part, is a joy. It has so many features and is as flexible as I need it to be for a backend. Whilst also making changes and improvements easy and efficient.
Within the setup of my site, I created my own code input field type for storing code snippets to be displayed on my site.
You may have seen some across a few of my articles already
@sanity/code-input
During some research for modifying a different area, I came across this @sanity/code-input option. It seemed like it gave me a few options that I didn't currently have. The main one is code highlighting and line numbers when entering in the code.
I'm a different tool, react-syntax-highlighter to display the code in the front end.
Problems with loading pages
I followed the very basic instructions for setting up this new plugin, but before even using it within a schema, I was getting errors in the browser with the sanity page unable to load, and a load of errors in the terminal.
Fixing the problem
The issue seemed to be with @lezer/lr which wasn't installed by me, but was a dependency of @sanity/code-input.
I ran npm list @lezer/lr to see what was using this package and to see if there were any conflicts. There seemed to be a few versions of it installed, with some using an older version in use.
With yarn, you can use resolutions but with npm, you need to use overrides. You can add this to your package.json file.
You can then run npm i again and it will force any dependency requiring that package to install that version of it.
Installing everything again fixed my problem and got everything working again
Going forward
This is not the best solution. Ideally, the @sanity/code-input will fix this for us and simply allow us to install the package as it would expect. I'll keep an eye out and check periodically for when I can remove the line from my package.json file.