dstpierre
NextJS SSR Problem
Hi, I'm using nextjs along with this react-trix,
I found some exception,
When the page load (for the first time), its returning an error
Warning: Did not expect server HTML to contain a <trix-toolbar> in <div>.
editor not found
However when I try to load other page first , then change my route to the page that have trix editor, there's no problem, the problem is only when I load the page that have trix editor for the first time
I haven't tested this component from a server rendering scenario. I'm afraid I cannot help on that until I have some time to test this myself.
Sorry for the delay, but had you solve the issue @zeroseed ?
Let me know.
HI @dstpierre Yes the problem still persist , I resolved the issue with some tricky way, So everytime user logged in , I need to redirect them to landing page , then give some button for move to the page that have react-trix, I don't know why it's not working when hard reload the page / go to the page manually
Made it work using dynamic import component
/pages/index.js
import React from 'react';
import dynamic from 'next/dynamic';
import Head from 'next/head';
const TrixEditor = dynamic(() => import('../components/TrixEditor'), {
ssr: false,
});
const Page = () => {
const onDescriptionChange = (html, text) => {
console.log({ html, text });
};
const onEditorReady = () => {
console.log('editor ready');
};
return (
<div>
<Head>
<link key="trix" href="/trix.css" rel="stylesheet" type="text/css" />
</Head>
<TrixEditor
onChange={onDescriptionChange}
onEditorReady={onEditorReady}
/>
</div>
);
};
export default Page;
/components/TrixEditor.js
import 'trix/dist/trix';
import { TrixEditor } from 'react-trix';
const Component = props => {
const { onChange, onEditorReady } = props;
return <TrixEditor onChange={onChange} onEditorReady={onEditorReady} />;
};
export default Component;
