Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

NextJS SSR Problem #20

Open
zeroseed opened this issue Jun 6, 2019 · 3 comments
Open

NextJS SSR Problem #20

zeroseed opened this issue Jun 6, 2019 · 3 comments

Comments

@zeroseed
Copy link

zeroseed commented Jun 6, 2019

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

image
@dstpierre
Copy link
Collaborator

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.

@zeroseed
Copy link
Author

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

@jericopulvera
Copy link

jericopulvera commented Apr 16, 2020 •
edited
Loading

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;

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@dstpierre @zeroseed @jericopulvera