Error when using RichTextField.

[kausik10]

Hi, I always run into this error when using RichTextField in my project.

I know that it mostly occurs due to version mismatch on the slate and slate-react

Here are the two versions that I have used in 2 separate projects that run

"@contember/react-slate-editor": "2.0.0-beta.2",

and

"@contember/react-slate-editor": "2.0.0-alpha.5",

"slate": "^0.103.0",
"slate-react": "^0.110.1",

or

"slate": "^0.103.0",
"slate-react": "^0.102.0",

In these two projects where all the @contember/ packages run alpha and beta version, the RichTextField is running as expected.

In my current project, I use ``"@contember/react-slate-editor": "2.0.0, i.e.version 2.0.0` for all contember packages.

I tried installing both the working version of slate and slate-react from above into my project. And yet, I get that error.

Could you help me identify a valid solution to this problem? Thank you!

[jonasnobile]

Hi! Yes — this kind of error (useSlateStatic must be used inside <Slate>) almost always comes from a version mismatch between slate, slate-react, and @contember/react-slate-editor.

Even if your package.json lists compatible versions, it’s still possible that multiple versions of slate or slate-react are installed due to transitive dependencies. That breaks the shared React context used by Slate.

Step 1: Check what's actually installed

• Yarn:

  yarn why slate
  yarn why slate-react

• npm:

  npm ls slate
  npm ls slate-react

• pnpm:

  pnpm why slate
  pnpm why slate-react

Look for:

• Which versions are installed
• Whether more than one version is present
• Which packages are introducing each version

Step 2: Force consistent versions

Make sure you have a single, compatible version — for example:

"slate": "^0.103.0",
"slate-react": "^0.103.0"

Then:

• For Yarn: Add to package.json:

  "resolutions": {
    "slate": "^0.103.0",
    "slate-react": "^0.103.0"
  }

• For pnpm: Use pnpm.overrides in package.json:

  "pnpm": {
    "overrides": {
      "slate": "^0.103.0",
      "slate-react": "^0.103.0"
    }
  }

• For npm: There's no built-in resolution, but you can use [npm-force-resolutions](https://www.npmjs.com/package/npm-force-resolutions) to achieve a similar effect.

Step 3: Clean install

• Yarn:

  rm -rf node_modules yarn.lock
  yarn install

• npm:

  rm -rf node_modules package-lock.json
  npm install

• pnpm:

  rm -rf node_modules pnpm-lock.yaml
  pnpm install