Question:
“Next.js + Wix Headless: ricos-viewer React 19 Compatibility Issue”
I am using ricos-viewer along with wix-rich-content-plugin-divider, wix-rich-content-plugin-headings, and wix-rich-content-plugin-image in my Next.js application. However, I am facing a runtime error related to the legacy context API in React 19.
Code Implementation
Component Code:
"use client";
import React from "react";
import { DraftContent, RicosViewer } from "ricos-viewer";
import { pluginDivider } from "wix-rich-content-plugin-divider/viewer";
import { pluginHeadings } from "wix-rich-content-plugin-headings/viewer";
import { pluginImage } from "wix-rich-content-plugin-image/viewer";
const plugins = [
pluginDivider({
size: "medium",
}),
pluginImage(),
pluginHeadings(),
];
const RichContentViewer = ({ content }: { content: DraftContent }) => {
return (
<div>
<RicosViewer content={content} plugins={plugins} />
</div>
);
};
export default RichContentViewer;
Component Render
import { toDraft } from "ricos-content/libs/toDraft";
<RichContentViewer content={toDraft(bannerData?.title1)} />
Error Message:
I18nextProvider uses the legacy childContextTypes API which was removed in React 19.
Use React.createContext() instead. (React 19 Upgrade Guide – React)
TypeError: Cannot read properties of undefined (reading ‘options’)
at new Translate (translate.js:51:135)
Steps Taken:
I have ensured that my dependencies are up to date.
Tried wrapping the component in a different provider but still faced the issue.
Is there a way to replace I18nextProvider with a React.createContext implementation within ricos-viewer?
Could this issue be due to a dependency conflict? How can I debug this further?
Product:
Wix Headless
What are you trying to achieve:
I am trying to render Wix blog rich content using ricos-viewer.
Additional information:
this is package.json file
{
"name": "next_js",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"@hookform/resolvers": "^3.10.0",
"@next/font": "^14.2.15",
"@wix/data": "^1.0.190",
"@wix/sdk": "^1.15.9",
"classnames": "^2.5.1",
"framer-motion": "^12.0.0",
"gsap": "^3.12.7",
"lucide-react": "^0.473.0",
"next": "15.1.5",
"react": "^19.0.0",
"react-dom": "^19.0.0",
"react-hook-form": "^7.54.2",
"ricos-content": "^9",
"ricos-schema": "^9",
"ricos-viewer": "^9",
"sass": "^1.83.4",
"wix-rich-content-plugin-divider": "^9",
"wix-rich-content-plugin-headings": "^9",
"wix-rich-content-plugin-image": "^9",
"wix-rich-content-viewer": "^9.18.4",
"zod": "^3.24.1"
},
"devDependencies": {
"@eslint/eslintrc": "^3",
"@types/node": "^20",
"@types/react": "^19",
"@types/react-dom": "^19",
"eslint": "^9",
"eslint-config-next": "15.1.5",
"postcss": "^8",
"tailwindcss": "^3.4.1",
"typescript": "^5"
}
}