RxJS version conflict after upgrading to Sanity v3.5.0

7 replies
Last updated: Mar 19, 2023
Trouble after upgrading to Sanity v3.5.0.
So I upgraded to Sanity 3.5.0 and now when running
npm run dev
i get an error regarding portable-text-editor and rxjs saying:

✘ [ERROR] No matching export in "node_modules/rxjs/_esm5/index.js" for import "tap"

    node_modules/@sanity/portable-text-editor/lib/index.esm.js:5:16:
      5 │ import { defer, tap, switchMap, of, EMPTY, concatMap, Subject } from 'rxjs';
        ╵                 ~~~

✘ [ERROR] No matching export in "node_modules/rxjs/_esm5/index.js" for import "switchMap"

    node_modules/@sanity/portable-text-editor/lib/index.esm.js:5:21:
      5 │ import { defer, tap, switchMap, of, EMPTY, concatMap, Subject } from 'rxjs';
        ╵                      ~~~~~~~~~

✘ [ERROR] No matching export in "node_modules/rxjs/_esm5/index.js" for import "concatMap"

    node_modules/@sanity/portable-text-editor/lib/index.esm.js:5:43:
      5 │ import { defer, tap, switchMap, of, EMPTY, concatMap, Subject } from 'rxjs';
        ╵                                            ~~~~~~~~~

5:01:19 PM [vite] error while updating dependencies:
Error: Build failed with 3 errors:
node_modules/@sanity/portable-text-editor/lib/index.esm.js:5:16: ERROR: No matching export in "node_modules/rxjs/_esm5/index.js" for import "tap"
node_modules/@sanity/portable-text-editor/lib/index.esm.js:5:21: ERROR: No matching export in "node_modules/rxjs/_esm5/index.js" for import "switchMap"
node_modules/@sanity/portable-text-editor/lib/index.esm.js:5:43: ERROR: No matching export in "node_modules/rxjs/_esm5/index.js" for import "concatMap"
    at failureErrorWithLog (/Users/felixbridell/BLKLZY_Dev/blklzy-sanity-studio/node_modules/esbuild/lib/main.js:1604:15)
    at /Users/felixbridell/BLKLZY_Dev/blklzy-sanity-studio/node_modules/esbuild/lib/main.js:1056:28
    at runOnEndCallbacks (/Users/felixbridell/BLKLZY_Dev/blklzy-sanity-studio/node_modules/esbuild/lib/main.js:1476:61)
    at buildResponseToResult (/Users/felixbridell/BLKLZY_Dev/blklzy-sanity-studio/node_modules/esbuild/lib/main.js:1054:7)
    at /Users/felixbridell/BLKLZY_Dev/blklzy-sanity-studio/node_modules/esbuild/lib/main.js:1166:14
    at responseCallbacks.<computed> (/Users/felixbridell/BLKLZY_Dev/blklzy-sanity-studio/node_modules/esbuild/lib/main.js:701:9)
    at handleIncomingPacket (/Users/felixbridell/BLKLZY_Dev/blklzy-sanity-studio/node_modules/esbuild/lib/main.js:756:9)
    at Socket.readFromStdout (/Users/felixbridell/BLKLZY_Dev/blklzy-sanity-studio/node_modules/esbuild/lib/main.js:677:7)
    at Socket.emit (node:events:513:28)
    at addChunk (node:internal/streams/readable:324:12)
    at readableAddChunk (node:internal/streams/readable:297:9)
    at Readable.push (node:internal/streams/readable:234:10)
    at Pipe.onStreamRead (node:internal/stream_base_commons:190:23)
So I search for rxjs here on Slack and found this answer (
https://sanity-io-land.slack.com/archives/C9Z7RC3V1/p1677016448020399?thread_ts=1676530520.281159&amp;cid=C9Z7RC3V1 ) telling me to add rxjs 7.8.0 to my devDependencies.
This worked for a while. But durin deployment to Vercel I got a lot of errors regarding conflicts about different rxjs versions.


npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR! 
npm ERR! While resolving: @sanity/document-internationalization@1.0.5
npm ERR! Found: rxjs@7.8.0
npm ERR! node_modules/rxjs
npm ERR!   dev rxjs@"^7.8.0" from the root project
npm ERR!   rxjs@"^7.0.0" from @sanity/bifur-client@0.3.1
npm ERR!   node_modules/@sanity/bifur-client
npm ERR!     @sanity/bifur-client@"^0.3.1" from sanity@3.5.0
npm ERR!     node_modules/sanity
npm ERR!       sanity@"^3.5.0" from the root project
npm ERR!       1 more (@sanity/document-internationalization)
npm ERR!   8 more (@sanity/client, @sanity/portable-text-editor, ...)
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer rxjs@"^6.0.0" from @sanity/document-internationalization@1.0.5
npm ERR! node_modules/@sanity/document-internationalization
npm ERR!   @sanity/document-internationalization@"^1.0.2" from the root project
npm ERR! 
npm ERR! Conflicting peer dependency: rxjs@6.6.7
npm ERR! node_modules/rxjs
npm ERR!   peer rxjs@"^6.0.0" from @sanity/document-internationalization@1.0.5
npm ERR!   node_modules/@sanity/document-internationalization
npm ERR!     @sanity/document-internationalization@"^1.0.2" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! See /vercel/.npm/eresolve-report.txt for a full report.
npm ERR! A complete log of this run can be found in:
npm ERR!     /vercel/.npm/_logs/2023-02-25T15_55_10_845Z-debug-0.log
Error: Command "npm install" exited with 1
So I deleted my node_modules folder and tried to run
npm install
locally and got the same errors. Do I need to downgrade Sanity or does some one have a fix for this?
AI Update

This is a classic peer dependency conflict issue with the @sanity/document-internationalization plugin. The root cause is that version 1.0.5 of the plugin requires rxjs@^6.0.0, but Sanity v3.5.0 uses rxjs@^7.0.0, creating an incompatible dependency tree.

The solution is to upgrade to version 1.1.0 or later of the @sanity/document-internationalization plugin, which has been updated to support rxjs 7 and is compatible with Sanity v3:

npm install @sanity/document-internationalization@latest

Then remove the manual rxjs entry from your devDependencies in package.json if you added it, and run:

rm -rf node_modules package-lock.json
npm install

The Document Internationalization plugin version 1.1.0+ was specifically updated to resolve this rxjs peer dependency issue. If for some reason you need to stay on an older version temporarily, you can use the --legacy-peer-deps flag during installation, but upgrading the plugin is the proper fix:

npm install --legacy-peer-deps

However, --legacy-peer-deps is just a workaround that tells npm to ignore peer dependency conflicts - it doesn't actually resolve the underlying incompatibility and could lead to runtime issues.

Why this happened: When Sanity v3 was released, it upgraded to rxjs 7, but some plugins in the ecosystem hadn't caught up yet. The document internationalization plugin was updated shortly after to support the new rxjs version, so upgrading to the latest version of the plugin should resolve all conflicts.

If you're still seeing issues after upgrading, double-check that you don't have any other outdated Sanity plugins that might also have rxjs 6 peer dependencies. You can check this by looking at the error messages - they'll list which packages are causing conflicts.

Show original thread
7 replies
I just upgraded to 3.5 and all seems to be working on my end. I came from 3.4 prior to the upgrade. Please see screenshot.
what machine are you on? what node version?
and oh, I also want to mention that I’m on node 16 and use
yarn
I tried Node 17 and now node 18.12.1Can it be that I use
@sanity/document-internationalization@1.0.5
?
I’m nt so sure. did you try removing it and see how it goes?
Can you try installing again with the
legacy-peer-deps
flag?
Using the
legacy-peer-deps
flag seems to work. Any ideas on how to fix this for the future?
This is my package.json:


{
  "name": "sanity",
  "private": true,
  "version": "1.0.0",
  "main": "package.json",
  "license": "UNLICENSED",
  "scripts": {
    "dev": "sanity dev",
    "start": "sanity start",
    "build": "sanity build",
    "deploy": "sanity deploy",
    "deploy-graphql": "sanity graphql deploy",
    "edit": "node scripts/editDocument.js"
  },
  "keywords": [
    "sanity"
  ],
  "dependencies": {
    "@sanity/document-internationalization": "^1.1.0",
    "@sanity/vision": "^3.0.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-is": "^18.2.0",
    "sanity": "^3.7.0",
    "styled-components": "^5.2.0"
  },
  "devDependencies": {
    "@sanity/cli": "^3.2.3",
    "@sanity/eslint-config-studio": "^2.0.1",
    "@types/react": "^18.0.26",
    "@types/react-dom": "^18.0.10",
    "eslint": "^8.6.0",
    "prettier": "^2.8.4",
    "sanity-codegen": "^0.9.8",
    "typescript": "^4.0.0"
  },
  "prettier": {
    "semi": false,
    "printWidth": 100,
    "bracketSpacing": false,
    "singleQuote": true
  }
}

Sanity – Build the way you think, not the way your CMS thinks

Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.

Was this answer helpful?