React fast refresh is not compatible

[sharathm89]

App Component

const App = () => {
   return (
    <ReportRoot>
      <ReportView>

        <Section dimension={pageSize.A4}>
          <PageContent>
            <SomeView />
          </PageContent>
        </Section>

      </ReportView>
    </ReportRoot>
  );
}

Table to display the list of records

import { Table } from "@jikji/react";

// 31 Records
const TEMP_LIST = [
  {category: "Car", subCategory: "Ford", grade: "A", bgColor: "#FF9301"},
  {category: "Truck", subCategory: "Volvo", grade: "B", bgColor: "#81C784"},
  {category: "Bike", subCategory: "Pulsur", grade: "A", bgColor: "#283593"},
  {category: "Car", subCategory: "BMW", grade: "C", bgColor: "#FF9301"},
   ...
];

const SomeView = () => {
  return (
      <Table>
        <table style={{ width: "100%"}}>
          <thead>
            <tr>
              <th scope="col" >Risk Area</th>
              <th scope="col" >Risk Sub - Area</th>
              <th scope="col">Grade</th>
            </tr>
          </thead>

          <tbody>
            {
              TEMP_LIST.map((item, index) => (
                <tr key={index}>
                  <td>{item.category}</td>
                  <td>{item.subCategory}</td>
                  <td style={{ backgroundColor: item.bgColor, textAlign: "center" }}>
                    {item.grade}</td>
                </tr>
              ))
            }
          </tbody>
        </table>
      </Table>
  );
}

export default SomeView;

Above code works perfectly when opened in the browser. Now when trying to convert it using @jikji/generator it throws ProtocolError: Protocol error (Page.printToPDF): Printing failed

When the list data is more it doesn't generate the PDF. Currently I have 31 records for which its failing.

Limiting the records to 1 page will work.

Tried even from the sample code from this link

[PejmanNik]

Can you please create a repo or gist that helps me to reproduce the issue?

[sharathm89]

Can you please create a repo or gist that helps me to reproduce the issue?

@PejmanNik here is the github repo link which demonstrates cover, graph, table (issues) in it. (checkout the readme file)

Repo Link

[PejmanNik]

could you please try it again with the last version? update to 0.3.0 and there are breaking changes in the table component (check Release note)?

also, the image in your example is bigger than A4, please change the size:

      <Image
        height={'1121px'}
        width={'793px'}
        src='https://images.unsplash.com/photo-1514888286974-6c03e2ca1dba'
      />

with these changes, I was able to make the pdf. out.pdf

[sharathm89]

@PejmanNik seems to be working but in new release 0.3.0 making some changes and reloading the website throws error very frequently.

Reloading the site 1 or 2 times or restart works but its difficult...

[PejmanNik]

Yes, it seems I used Vite for all the test projects and it working well with it but there is a difference in RCA hot reload that cause this issue, I'll check it

[sharathm89]

Yes, it seems I used Vite for all the test projects and it working well with it but there is a difference in RCA hot reload that cause this issue, I'll check it

thanks...

let me know once fixed

[PejmanNik]

I spend a lot of time on it, but unfortunately couldn't figure it out. for now please use Vite or disable react fast refresh. I'll try to fix it.

[sharathm89]

I spend a lot of time on it, but unfortunately couldn't figure it out. for now please use Vite or disable react fast refresh. I'll try to fix it.

ok

[sharathm89]

I don't see this issue with new ver 0.4.0

Will let you know if it occurs.