Can't generate pdf download link with react-pdf

Question

I'm new with react. I want to create a website that can generate pdf file to download. I use React with Vite and Tailwind. I found this in internet: https://react-pdf.org/advanced#on-the-fly-rendering.

I try it in my code but nothing shows up.

import {Document, Page, PDFDownloadLink, StyleSheet, Text, View} from "@react-pdf/renderer";
import React from "react";

// Create styles
const styles = StyleSheet.create({
  page: {
    flexDirection: "row",
    backgroundColor: "#E4E4E4",
  },
  section: {
    margin: 10,
    padding: 10,
    flexGrow: 1,
  },
});

// Create Document Component
const MyDoc = () => (
  <Document>
    <Page size="A4" style={styles.page}>
      <View style={styles.section}>
        <Text>Section #1</Text>
      </View>
      <View style={styles.section}>
        <Text>Section #2</Text>
      </View>
    </Page>
  </Document>
);
const Dashboard = () => (
  <div>
    <PDFDownloadLink
      className=" bg-slate-600"
      document={<MyDoc />}
      fileName="somename.pdf"
    >
      {({ blob, url, loading, error }) =>
          <button className=" bg-slate-500">Loading document...</button>
        ) : (
          <button className=" bg-slate-500">Download now!</button>
        )
      }
    </PDFDownloadLink>
  </div>
);
export default Dashboard;

And i call this from my App.jsx file

import Dashboard from "./Dashboard";

function App() {
  return (
    <div className=" bg-slate-500">
      <Dashboard />
    </div>
  );
}

export default App;

This is how it's look when run

This is when i inspect

I run it from brave browser, but it still the same when i run it from google browser. Anyone know why this is happen? Any help is appreciated

Answer 1

So after a lot of searching, i found that my problem is caused by vite. This post pretty much solve it