Richtext problem in volto 18

Development Plone 6 UI (Volto)
,
1

Hello, I'm working on the migration of a project to Plone 6.1 and Volvo 18.11.0 (from Plone 6.0.3 and volto 17.18.1). There are several uses of richtext: Plone schema and Volto schema.
In both cases, there's a problem and this error is returned:
[React Intl] Could not find requiredintl object. <IntlProvider> needs to exist in the component ancestry.
On the Volto side, there are two widgets:

  • RichTextWidget: The problem only appears when you click on the field, because the issue comes from the toolbar that appears when you select the widget.
    Traceback:
**[React Intl] Could not find required `intl` object. <IntlProvider> needs to exist in the component ancestry.**

    at slate.elementToolbarButtons.<computed> (http://localhost:3001/static/js/client.js:121773:5)
    at div
    at ButtonGroup (http://localhost:3001/static/js/client.js:307839:24)
    at div
    at _c (http://localhost:3001/static/js/client.js:123251:7)
    at _c (http://localhost:3001/static/js/client.js:122477:7)
    at Toolbar (http://localhost:3001/static/js/client.js:123768:3)
    at Slate (http://localhost:3001/static/js/client.js:344190:5)
    at div
    at SlateEditor (http://localhost:3001/static/js/client.js:115942:5)
    at div
    at div
    at GridColumn (http://localhost:3001/static/js/client.js:317398:24)
    at div
    at GridRow (http://localhost:3001/static/js/client.js:317508:24)
    at div
    at Grid (http://localhost:3001/static/js/client.js:317282:22)
    at div
    at FormField (http://localhost:3001/static/js/client.js:316786:24)
    at FormFieldWrapper (http://localhost:3001/static/js/client.js:166480:1)
    at injectIntl(FormFieldWrapper)
    at InnerLoadable (http://localhost:3001/static/js/client.js:1759:34)
    at SlateRichTextWidget (http://localhost:3001/static/js/client.js:127603:5)
    at UnconnectedField (http://localhost:3001/static/js/Form.chunk.js:2392:3)
    at Field (http://localhost:3001/static/js/Form.chunk.js:2474:30)
    at injectIntl(Field)
    at InnerLoadable (http://localhost:3001/static/js/client.js:1759:34)
    at div
    at Segment (http://localhost:3001/static/js/client.js:322676:24)
    at div
    at SegmentGroup (http://localhost:3001/static/js/client.js:322823:24)
    at fieldset
    at form
    at Form (http://localhost:3001/static/js/client.js:316454:29)
    at div
    at Container (http://localhost:3001/static/js/client.js:319891:24)
    at Form (http://localhost:3001/static/js/Form.chunk.js:2702:5)
    at injectIntl(Form)
    at ConnectFunction (http://localhost:3001/static/js/client.js:285413:103)
    at forwardConnectRef
    at InnerLoadable (http://localhost:3001/static/js/client.js:1759:34)
    at Feature (http://localhost:3001/static/js/client.js:218999:5)
    at injectIntl(Feature)
    at div
    at Consumer (http://localhost:3001/static/js/client.js:229242:24)
    at AccordionItemPanel (http://localhost:3001/static/js/client.js:229510:29)
    at div
    at Consumer (http://localhost:3001/static/js/client.js:229242:24)
    at Consumer (http://localhost:3001/static/js/client.js:229120:5)
    at Provider (http://localhost:3001/static/js/client.js:229203:23)
    at Consumer (http://localhost:3001/static/js/client.js:229120:5)
    at ProviderWrapper
    at AccordionItem (http://localhost:3001/static/js/client.js:229252:25)
    at FeatureWrapper (http://localhost:3001/static/js/client.js:221309:5)
    at div
    at div
    at Provider (http://localhost:3001/static/js/client.js:229035:5)
    at Accordion (http://localhost:3001/static/js/client.js:229146:29)
    at FeatureList (http://localhost:3001/static/js/client.js:221426:80)
    at section
    at article
    at div
    at Container (http://localhost:3001/static/js/client.js:319891:24)
    at RequestView (http://localhost:3001/static/js/client.js:221565:5)
    at div
    at View (http://localhost:3001/static/js/client.js:183604:5)
    at ConnectFunction (http://localhost:3001/static/js/client.js:285413:103)
    at injectIntl(Connect(View))
    at Route (http://localhost:3001/static/js/client.js:289357:29)
    at Switch (http://localhost:3001/static/js/client.js:289563:29)
    at main
    at div
    at Segment (http://localhost:3001/static/js/client.js:322676:24)
    at MultilingualRedirector (http://localhost:3001/static/js/client.js:176937:5)
    at PluggablesProvider (http://localhost:3001/static/js/client.js:159219:3)
    at App (http://localhost:3001/static/js/client.js:171597:5)
    at ConnectFunction (http://localhost:3001/static/js/client.js:285413:103)
    at injectIntl(Connect(App))
    at ConnectFunction (http://localhost:3001/static/js/client.js:285413:103)
    at Route (http://localhost:3001/static/js/client.js:289357:29)
    at Switch (http://localhost:3001/static/js/client.js:289563:29)
    at Route (http://localhost:3001/static/js/client.js:289357:29)
    at AsyncConnect (http://localhost:3001/static/js/client.js:189380:5)
    at AsyncConnectWithContext (http://localhost:3001/static/js/client.js:189498:7)
    at C (http://localhost:3001/static/js/client.js:289618:37)
    at ConnectFunction (http://localhost:3001/static/js/client.js:285413:103)
    at ScrollToTop (http://localhost:3001/static/js/client.js:195803:1)
    at ConnectFunction (http://localhost:3001/static/js/client.js:285413:103)
    at Router (http://localhost:3001/static/js/client.js:288986:30)
    at ConnectedRouter (http://localhost:3001/static/js/client.js:70065:7)
    at ConnectedRouterWithContext (http://localhost:3001/static/js/client.js:70171:25)
    at ConnectFunction (http://localhost:3001/static/js/client.js:285413:103)
    at IntlProvider (http://localhost:3001/static/js/client.js:281469:9)
    at ConnectFunction (http://localhost:3001/static/js/client.js:285413:103)
    at Provider (http://localhost:3001/static/js/client.js:285122:3)
    at CookiesProvider (http://localhost:3001/static/js/client.js:232686:28)
  • HtmlSlateWidget: The problem appears when the page loads.
    Traceback:
**[React Intl] Could not find required `intl` object. <IntlProvider> needs to exist in the component ancestry.**

    at injectIntl(HtmlSlateWidget)
    at UnconnectedField (http://localhost:3001/static/js/Form.chunk.js:2392:3)
    at Field (http://localhost:3001/static/js/Form.chunk.js:2474:30)
    at injectIntl(Field)
    at InnerLoadable (http://localhost:3001/static/js/client.js:1759:34)
    at div
    at Tab (http://localhost:3001/static/js/client.js:330777:29)
    at div
    at SegmentGroup (http://localhost:3001/static/js/client.js:322823:24)
    at fieldset
    at form
    at Form (http://localhost:3001/static/js/client.js:316454:29)
    at div
    at Container (http://localhost:3001/static/js/client.js:319891:24)
    at Form (http://localhost:3001/static/js/Form.chunk.js:2702:5)
    at injectIntl(Form)
    at ConnectFunction (http://localhost:3001/static/js/client.js:285413:103)
    at forwardConnectRef
    at InnerLoadable (http://localhost:3001/static/js/client.js:1759:34)
    at div
    at Add (http://localhost:3001/static/js/client.js:226763:5)
    at PreloadLoadables (http://localhost:3001/static/js/client.js:194975:7)
    at ConnectFunction (http://localhost:3001/static/js/client.js:285413:103)
    at injectIntl(Connect(Component))
    at Route (http://localhost:3001/static/js/client.js:289357:29)
    at Switch (http://localhost:3001/static/js/client.js:289563:29)
    at main
    at div
    at Segment (http://localhost:3001/static/js/client.js:322676:24)
    at MultilingualRedirector (http://localhost:3001/static/js/client.js:176937:5)
    at PluggablesProvider (http://localhost:3001/static/js/client.js:159219:3)
    at App (http://localhost:3001/static/js/client.js:171597:5)
    at ConnectFunction (http://localhost:3001/static/js/client.js:285413:103)
    at injectIntl(Connect(App))
    at ConnectFunction (http://localhost:3001/static/js/client.js:285413:103)
    at Route (http://localhost:3001/static/js/client.js:289357:29)
    at Switch (http://localhost:3001/static/js/client.js:289563:29)
    at Route (http://localhost:3001/static/js/client.js:289357:29)
    at AsyncConnect (http://localhost:3001/static/js/client.js:189380:5)
    at AsyncConnectWithContext (http://localhost:3001/static/js/client.js:189498:7)
    at C (http://localhost:3001/static/js/client.js:289618:37)
    at ConnectFunction (http://localhost:3001/static/js/client.js:285413:103)
    at ScrollToTop (http://localhost:3001/static/js/client.js:195803:1)
    at ConnectFunction (http://localhost:3001/static/js/client.js:285413:103)
    at Router (http://localhost:3001/static/js/client.js:288986:30)
    at ConnectedRouter (http://localhost:3001/static/js/client.js:70065:7)
    at ConnectedRouterWithContext (http://localhost:3001/static/js/client.js:70171:25)
    at ConnectFunction (http://localhost:3001/static/js/client.js:285413:103)
    at IntlProvider (http://localhost:3001/static/js/client.js:281469:9)
    at ConnectFunction (http://localhost:3001/static/js/client.js:285413:103)
    at Provider (http://localhost:3001/static/js/client.js:285122:3)
    at CookiesProvider (http://localhost:3001/static/js/client.js:232686:28)
2

Are you using a Cookieplone setup?
I strongly encourage to do so.

This error happens when you have several react-intl in your tree, so the one requesting for the intl context is different from the one set up in the context.

I'd remove the lock file you may have, and clean install it.

But as I said, if you are not in Cookieplone setup, it will be well invested time.

3

I have using cookieplone for the main project.
I manage to fix the problem by deleting all node_modules in my addons and make a pnpm install in all.
Tanks Victor

1 Like