Error: The useSlate hook must be used inside the <SlateProvider> component's context

[avoinea]

Latest volto-slate release fails with:

Error: The useSlate hook must be used inside the <SlateProvider> component's context 

[silviubogan]

@avoinea The latest release is on the branch master? I see that the master branch has this tip: https://github.com/eea/volto-slate/commit/41ae74efd58e9f8a2ca21ece6ee8181bc299fe6b and it passes all the CI checks. Am I wrong?

[avoinea]

@silviubogan I skipped the cypress tests in order to release it :smile: My fault here.

Still I think this error is not catched by the cypress tests.

[silviubogan]

It seems that the toolbar button in volto-slate-metadata-mentions does not receive the Slate context so it crashes the IMS Frontend.

The first access of the Slate context with the useSlate hook does not find the context. It is first called when focusing a Volto-Slate based block. When making a new page the same bug appears when clicking the Volto-Slate Text block or going with the Down arrow key to the Volto-Slate Text block.

This bug appears in a new Volto-based frontend too, when using the latest version of KitKat in the develop branch. When using Volto-Slate develop, as in the latest commit in the previous link in this message, the bug is gone. I don't know yet if I can reproduce this working state in the IMS Frontend.

[silviubogan]

The bug appears in the IMS Frontend with a new backend (no content other than default) too, although I've put the volto-slate branch develop and volto-eea-kitkat branch develop in mrs.developer.json, ran yarn develop and then yarn start. If I put, e.g. an window.alert, in the file src/addons/volto-slate/src/editor/index.js, it shows up in the browser well, so I'm missing something.

[silviubogan]

1. A small project that still throws the error: https://gist.github.com/silviubogan/acfb3d0dd090f5f3ab394da2fbc90806
2. A small project that does not throw the error anymore: https://gist.github.com/silviubogan/86bc515982a4a9c55753af5bc0b7fecd

Any ideas?

[tiberiuichim]

try to define the components as functions, not anonymous functions.

[silviubogan]

@tiberiuichim I've made it like this:

const Btn = function () {
  useSlate();
  return null;
};

then like

function Btn() {
  useSlate();
  return null;
}

and they still throw the same error.

[tiberiuichim]

This happens when the following conditions are met:

• volto-slate is a workspace package (so it's in development mode)
• volto addons have direct dependency on volto-slate (correct should be a peer dependency)
• we have (not sure about this one) a hard resolution on a volto-slate dependency.

This cause each volto addon with a volto-slate dependency to keep its own copy of volto-slate, in its local node_modules, so it doesn't get hoisted.

Tale-tell: a warning when running yarn:

warning Resolution field "[email protected]" is incompatible with requested version "[email protected]"

Action: remove all hard dependencies on volto-slate, replace them with a peerDependency (in each Volto addon that dependns on volto-slate).

[tiberiuichim]

I think my analysis is somewhat incorrect. I think it's safe for an addon to have another addon as a dependency, maybe we need to avoid the resolutions part?

[silviubogan]

@tiberiuichim Does Volto work with nested addons?

[silviubogan]

@tiberiuichim Is https://github.com/eea/volto-block-image-cards/pull/12 merged by mistake?

[silviubogan]

@tiberiuichim

I think my analysis is somewhat incorrect. I think it's safe for an addon to have another addon as a dependency, maybe we need to avoid the resolutions part?

If one addon is installed twice, each time a different version, does it work well in Volto?

[tiberiuichim]

In principal having two different versions of a JS package bundled is not a problem. In our practice we want to avoid this behavior, as it leads to ugly situations like the one in this ticket.

How we avoid that situation is not clear to me, though. It seems that simple resolutions is not enough to avoid the situation. Maybe instead of * we need to set the dependency version in our volto addons as ^5 or something like that?

[silviubogan]

@tiberiuichim Please review this reversion PR: https://github.com/eea/volto-block-image-cards/pull/15.

[nileshgulia1]

This error still persists in latest release.

[tiberiuichim]

@nileshgulia1 this happens when there's multiple versions of volto-slate in a deployment. Check that there's only one version.

[nileshgulia1]

@tiberiuichim Thanks, I started to update few set of addons to use latest volto-slate. https://github.com/eea/volto-slate-dataentity/pull/3 https://github.com/eea/volto-embed/pull/17 https://github.com/eea/volto-datablocks/pull/35