react-pdf-html Production build - Failed to parse JSON file node

Hey community, maybe you can give me a hint. when working with dev build there are no problems - all works like a charm -> pdfs are generated 😁 but whenever I try to compile a production package I get an error as below regarding css-tree and JSON parsing 🫣

I will be grateful for any help 🤞

removing the <Html>{htmlFromMarkdown}</Html> line and uninstalling the "react-pdf-html" (while "@react-pdf/renderer" is left in app) makes prod build working but doesn't do the trick as I still need to include raw html in render process

error details when using the npm run build = tsc && vite build

vite v5.0.12 building for production... ✓ 2438 modules transformed. [commonjs--resolver] Failed to parse JSON file. file: C:/git/client/node_modules/css-tree/lib/index.js error during build: RollupError: Failed to parse JSON file. at error (file:///C:/git/client/node_modules/rollup/dist/es/shared/parseAst.js:337:30) at Object.error (file:///C:/git/client/node_modules/rollup/dist/es/shared/node-entry.js:18507:20) at Object.error (file:///C:/git/client/node_modules/rollup/dist/es/shared/node-entry.js:17616:42) at Object.transform (file:///C:/git/client/node_modules/vite/dist/node/chunks/dep-9A4-l-43.js:41672:22) at file:///C:/git/client/node_modules/rollup/dist/es/shared/node-entry.js:18692:40

tsconfig.json:


{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true
  },
  "include": ["src"],
  "exclude": ["node_modules"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

react component:


import { pdf, Document, Page, Text } from "@react-pdf/renderer";
import Html from "react-pdf-html";

import { createRoot } from "react-dom/client";
import { flushSync } from "react-dom";
import SummaryDocumentMarkDown from "../components/summary-document-markdown";

function exportHtmlToPdf(html: string, filename: string) {
  const div = document.createElement("div");
  const root = createRoot(div);
  flushSync(() => {
    root.render(<SummaryDocumentMarkDown markdownString={html} />);
  });
  const htmlFromMarkdown = div.innerHTML;

  const SummaryDocument = (
    <Document>
      <Page
        size="A4"
        style={{ paddingTop: 35, paddingBottom: 65, paddingHorizontal: 35 }}
      >
        <Text
          style={{
            textAlign: "center",
            color: "grey",
            fontSize: 12,
            marginBottom: 15,
          }}
        >
          ~ Generated with love ~
        </Text>

        <Html>{htmlFromMarkdown}</Html>
      </Page>
    </Document>
  );

  const blob = pdf(SummaryDocument).toBlob();
  blob.then((pdfBlob) => {
    const downloadLink = document.createElement("a");
    downloadLink.href = URL.createObjectURL(pdfBlob);
    downloadLink.download = filename;
    downloadLink.click();
  });
}

export default exportHtmlToPdf;

May 13 '24 20:05 cichy3000

Hey @cichy3000 did you figure this out? I haven't seen the same problem with my build, but I have some ideas.

Have you tried resetting your node_modules, clearing the npm cache and running the build again?

rm -rf node_modules
npm cache clean --force

Also, consider updating vite to the latest version.

Jun 14 '24 23:06 coren-frankel

@cichy3000 are you still having this issue?

Jul 21 '24 21:07 danomatic

Production build - Failed to parse JSON file node_modules/css-tree/lib/index.js