Publishing updates to @codemirror/state makes it hard to update

[knpwrs]

Describe the issue

I'm working on a project which currently has the following @codemirror dependencies installed:

    "@codemirror/autocomplete": "^6.11.1",
    "@codemirror/lang-liquid": "^6.2.0",
    "@codemirror/lang-markdown": "^6.2.3",
    "@codemirror/state": "^6.3.3",
    "@codemirror/view": "^6.22.3",

The current locked state of node_modules is that there is one version of @codemirror/state installed:

❯ yarn why @codemirror/state
yarn why v1.22.19
[1/4] 🤔  Why do we have the module "@codemirror/state"...?
[2/4] 🚚  Initialising dependency graph...
[3/4] 🔍  Finding dependency...
[4/4] 🚡  Calculating file sizes...
=> Found "@codemirror/state@6.3.3"
   - Specified in "dependencies"
   - Hoisted from "@codemirror#autocomplete#@codemirror#state"
   - Hoisted from "@codemirror#lang-markdown#@codemirror#state"
   - Hoisted from "codemirror#@codemirror#state"
   - Hoisted from "@codemirror#view#@codemirror#state"
   - Hoisted from "@codemirror#lang-liquid#@codemirror#lang-html#@codemirror#state"
   - Hoisted from "@codemirror#autocomplete#@codemirror#language#@codemirror#state"
   - Hoisted from "codemirror#@codemirror#lint#@codemirror#state"
   - Hoisted from "codemirror#@codemirror#search#@codemirror#state"
   - Hoisted from "codemirror#@codemirror#commands#@codemirror#state"
   - Hoisted from "@codemirror#lang-liquid#@codemirror#lang-html#@codemirror#lang-css#@codemirror#state"
   - Hoisted from "@codemirror#lang-liquid#@codemirror#lang-html#@codemirror#lang-javascript#@codemirror#state"
✨  Done in 0.37s.

@codemirror/state and @codemirror/view are both out of date, so I update them:

❯ npx npm-check-updates -u '*codemirror*'
Using yarn
Upgrading /Users/knpwrs/Workspace/hummingbird/hummingbird-rails/package.json
[====================] 6/6 100%

 @codemirror/state   ^6.3.3  →   ^6.4.0
 @codemirror/view   ^6.22.3  →  ^6.23.0

Run yarn install to install new versions.

❯ yarn
yarn install v1.22.19
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...
success Saved lockfile.
✨  Done in 5.89s.

This results in two versions of @codemirror/state being installed and breaks codemirror in my project:

❯ yarn why @codemirror/state
yarn why v1.22.19
[1/4] 🤔  Why do we have the module "@codemirror/state"...?
[2/4] 🚚  Initialising dependency graph...
[3/4] 🔍  Finding dependency...
[4/4] 🚡  Calculating file sizes...
=> Found "@codemirror/state@6.4.0"
=> Found "@codemirror/autocomplete#@codemirror/state@6.3.3"
=> Found "@codemirror/lang-markdown#@codemirror/state@6.3.3"
=> Found "codemirror#@codemirror/state@6.3.3"
=> Found "@codemirror/lang-html#@codemirror/state@6.3.3"
=> Found "@codemirror/language#@codemirror/state@6.3.3"
=> Found "@codemirror/lint#@codemirror/state@6.3.3"
=> Found "@codemirror/search#@codemirror/state@6.3.3"
=> Found "@codemirror/lang-css#@codemirror/state@6.3.3"
=> Found "@codemirror/lang-javascript#@codemirror/state@6.3.3"
✨  Done in 0.35s.

I tried removing and reinstalling all of the dependencies and it still didn't work:

❯ yarn remove @codemirror/{autocomplete,lang-liquid,lang-markdown,state,view} && yarn add @codemirror/{autocomplete,lang-liquid,lang-markdown,state,view}
yarn remove v1.22.19
[1/6] 🗑  Removing module @codemirror/autocomplete...
[2/6] 🗑  Removing module @codemirror/lang-liquid...
[3/6] 🗑  Removing module @codemirror/lang-markdown...
[4/6] 🗑  Removing module @codemirror/state...
[5/6] 🗑  Removing module @codemirror/view...
[6/6] 🔨  Regenerating lockfile and installing missing dependencies...
success Uninstalled packages.
✨  Done in 6.44s.
yarn add v1.22.19
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...
success Saved lockfile.
success Saved 10 new dependencies.
info Direct dependencies
├─ @codemirror/autocomplete@6.11.1
├─ @codemirror/lang-liquid@6.2.0
├─ @codemirror/lang-markdown@6.2.3
└─ @codemirror/view@6.23.0
info All dependencies
├─ @codemirror/autocomplete@6.11.1
├─ @codemirror/lang-css@6.2.1
├─ @codemirror/lang-javascript@6.2.1
├─ @codemirror/lang-liquid@6.2.0
├─ @codemirror/lang-markdown@6.2.3
├─ @codemirror/view@6.23.0
├─ @lezer/css@1.1.7
├─ @lezer/html@1.3.8
├─ @lezer/javascript@1.4.12
└─ @lezer/markdown@1.2.0
$ patch-package && { [ "${NODE_ENV}" = 'production' ] || [ -n "${CI}" ] || ./scripts/js-devenv-check ; }
patch-package 6.4.7
Applying patches...
@material/typography@0.3.0 ✔
mapbox-gl@1.12.0 ✔
react-mapbox-gl@4.8.6 ✔
Running devenv checks for Node.JS environment...
PASS: @swc/core: has binary extension installed
PASS: fsevents: should have binary extension installed
✨  Done in 10.48s.

❯ yarn why @codemirror/state
yarn why v1.22.19
[1/4] 🤔  Why do we have the module "@codemirror/state"...?
[2/4] 🚚  Initialising dependency graph...
[3/4] 🔍  Finding dependency...
[4/4] 🚡  Calculating file sizes...
=> Found "@codemirror/state@6.4.0"
=> Found "@codemirror/language#@codemirror/state@6.3.3"
=> Found "@codemirror/autocomplete#@codemirror/state@6.3.3"
=> Found "@codemirror/lang-markdown#@codemirror/state@6.3.3"
=> Found "codemirror#@codemirror/state@6.3.3"
=> Found "@codemirror/lang-html#@codemirror/state@6.3.3"
=> Found "@codemirror/lint#@codemirror/state@6.3.3"
=> Found "@codemirror/search#@codemirror/state@6.3.3"
=> Found "@codemirror/commands#@codemirror/state@6.3.3"
=> Found "@codemirror/lang-css#@codemirror/state@6.3.3"
=> Found "@codemirror/lang-javascript#@codemirror/state@6.3.3"
=> Found "@codemirror/lang-markdown#@codemirror/language#@codemirror/view#@codemirror/state@6.4.0"
=> Found "@codemirror/lang-html#@codemirror/language#@codemirror/view#@codemirror/state@6.4.0"
=> Found "@codemirror/lang-javascript#@codemirror/language#@codemirror/view#@codemirror/state@6.4.0"
✨  Done in 0.39s.

My current workaround is to use resolutions from yarn (the npm equivalent is overrides):

  "resolutions": {
    "**/@codemirror/state": "^6.4.0"
  }

This results in one version of @codemirror/state being installed and my app works again!

❯ yarn why @codemirror/state
yarn why v1.22.19
[1/4] 🤔  Why do we have the module "@codemirror/state"...?
[2/4] 🚚  Initialising dependency graph...
[3/4] 🔍  Finding dependency...
[4/4] 🚡  Calculating file sizes...
=> Found "@codemirror/state@6.4.0"
   - Specified in "dependencies"
   - Hoisted from "@codemirror#language#@codemirror#state"
   - Hoisted from "@codemirror#autocomplete#@codemirror#state"
   - Hoisted from "@codemirror#lang-markdown#@codemirror#state"
   - Hoisted from "codemirror#@codemirror#state"
   - Hoisted from "@codemirror#view#@codemirror#state"
   - Hoisted from "@codemirror#lang-liquid#@codemirror#lang-html#@codemirror#state"
   - Hoisted from "@codemirror#lang-markdown#@codemirror#language#@codemirror#state"
   - Hoisted from "codemirror#@codemirror#lint#@codemirror#state"
   - Hoisted from "codemirror#@codemirror#search#@codemirror#state"
   - Hoisted from "@codemirror#language#@codemirror#view#@codemirror#state"
   - Hoisted from "@codemirror#lang-markdown#@codemirror#view#@codemirror#state"
   - Hoisted from "codemirror#@codemirror#view#@codemirror#state"
   - Hoisted from "@codemirror#autocomplete#@codemirror#view#@codemirror#state"
   - Hoisted from "codemirror#@codemirror#commands#@codemirror#state"
   - Hoisted from "@codemirror#lang-liquid#@codemirror#lang-html#@codemirror#lang-css#@codemirror#state"
   - Hoisted from "@codemirror#lang-liquid#@codemirror#lang-html#@codemirror#lang-javascript#@codemirror#state"
   - Hoisted from "@codemirror#lang-liquid#@codemirror#lang-html#@codemirror#language#@codemirror#state"
   - Hoisted from "codemirror#@codemirror#commands#@codemirror#view#@codemirror#state"
   - Hoisted from "codemirror#@codemirror#lint#@codemirror#view#@codemirror#state"
   - Hoisted from "codemirror#@codemirror#search#@codemirror#view#@codemirror#state"
   - Hoisted from "@codemirror#lang-liquid#@codemirror#lang-html#@codemirror#view#@codemirror#state"
   - Hoisted from "@codemirror#lang-markdown#@codemirror#language#@codemirror#view#@codemirror#state"
   - Hoisted from "@codemirror#lang-liquid#@codemirror#lang-html#@codemirror#lang-javascript#@codemirror#language#@codemirror#state"
   - Hoisted from "@codemirror#lang-liquid#@codemirror#lang-html#@codemirror#lang-javascript#@codemirror#view#@codemirror#state"
   - Hoisted from "@codemirror#lang-liquid#@codemirror#lang-html#@codemirror#language#@codemirror#view#@codemirror#state"
   - Hoisted from "@codemirror#lang-liquid#@codemirror#lang-html#@codemirror#lang-javascript#@codemirror#language#@codemirror#view#@codemirror#state"
info Number of shared dependencies: 0
✨  Done in 0.39s.

The short term solution is that everything on the npm registry that depends on @codemirror/state needs to have their versions of @codemirror/state bumped and new versions published.

If you're open to the concept of a monorepo I'd be happy to help get one set up using pnpm and changesets. I think this would make development easier and would also improve the publishing flow (version bumping and publishing would be a very straightforward process as I've documented here: https://github.com/knpwrs/vite-plugin-svg-sprite-components/tree/28e189ed36cd31f64b804c756d5f124f828b9e39#release-process ).

Browser and platform

No response

Reproduction link

No response

[marijnh]

Yarn is doing dumb things here. It's a known issue. Use a recent version of npm or blow away your entire package lock every time you update. I am not going to change the structure of the library to work around bad 3rd-party tools.

[knpwrs]

Sounds good. Thank you for Codemirror, it's a really excellent project!

[shshaw]

Using an old version of yarn here and have also had issues with random versions of @codemirror/state and other dependencies. An alternative to changing your entire ecosystem is to add resolutions to your package.json with specific versions: https://discuss.codemirror.net/t/keeping-sub-dependencies-up-to-date/6273/4