ReactDOMServer.renderToString is not a function

[rivasdiego-dev]

Hi, I was following the example in the documentation and this happened to me. I am currently using it in a newly created Vite project, it only has Tailwind. I'm using latest version of Chrome and Windows 10 Pro, here are the packages I am using:

// package.json
{
  "name": "pdf-test1",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },
  "dependencies": {
    "@fileforge/react-print": "^0.1.140",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@types/react": "^18.2.66",
    "@types/react-dom": "^18.2.22",
    "@typescript-eslint/eslint-plugin": "^7.2.0",
    "@typescript-eslint/parser": "^7.2.0",
    "@vitejs/plugin-react": "^4.2.1",
    "autoprefixer": "^10.4.19",
    "eslint": "^8.57.0",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.6",
    "postcss": "^8.4.38",
    "tailwindcss": "^3.4.3",
    "typescript": "^5.2.2",
    "vite": "^5.2.0"
  }
}

When I try to log the HTML, it gives me that error: ReactDOMServer.renderToString is not a function. This comes from the compile function. I've tried changing the import to import { compile } from "@fileforge/react-print/client"; But that just results in the error 'Cannot find module '@fileforge/react-print/client' or its corresponding type declarations.ts(2307)', even though my VS Code recognize and autocompletes it. Now, I've tried in Next.JS 14, and it seems to work just fine in that type of enviorment.

[Titou325]

Hey @rivasdiego-dev, thanks for reporting this. We actually walked into a similar issue with our sandbox earlier today, where Vite treeshaking removes the React DOM dependency. Usually, adding await import("react-dom/server") somewhere in the render code keeps the package in the final tree. You should be able to check the code on the onboarding Stackblitz. Let me know if this helps!

Here is the link to the Stackblitz: https://stackblitz.com/edit/fileforge-clientside?file=src%2Fmain.tsx