Why can't I use renderToString anymore? How can I print now?

[JacobWeisenburger]

I was using renderToString to make some html and then putting that into an iframe to print it. Is there another way to do this?

I was using:

import { renderToString } from 'react-dom/server'

const html = renderToString( <SomeReactNode /> )
const iframe = document.createElement( 'iframe' )
iframe.id = 'print_pdf'
iframe.style.width = '100vw'
iframe.style.height = '100vh'
document.body.appendChild( iframe )

iframe.contentWindow?.document.open()
iframe.contentWindow?.document.write( html )
iframe.contentWindow?.document.close()

iframe.contentWindow?.print()
document.body.removeChild( iframe )

[blentz100]

I don't know the answer but the error says to open an issue in this repo, have you done that ?

[JacobWeisenburger]

#57716

it got closed instantly

[aziyatali]

As suggested here

• If you use Node.js, use renderToPipeableStream.
• If you use Deno or a modern edge runtime with Web Streams, use renderToReadableStream.

[JacobWeisenburger]

I saw this, but it requires me to change a lot to make it work

[JacobWeisenburger]

[icyJoseph]

I think if you want to render into an iframe with React, you can do:

"use client";
import { PropsWithChildren, useState } from "react";
import { createPortal } from "react-dom";

const CustomIframe = ({ children, ...props }: PropsWithChildren) => {
  const [contentRef, setContentRef] = useState<HTMLIFrameElement | null>(null);

  const mountNode = contentRef?.contentWindow?.document?.body;

  return (
    <iframe {...props} ref={setContentRef}>
      {mountNode && createPortal(children, mountNode)}
    </iframe>
  );
};

export default CustomIframe;

And then:

import CustomIframe from "./CustomIframe";

export default function Home() {
  return (
      <CustomIframe>
        <h1>Hello World!</h1>
      </CustomIframe>
  );
}

If you don't want to do the Portal trick, you might want to try and dynamically import react-dom/server:

export default async function Home() {
  const { renderToString } = await import("react-dom/server");

  return (
      <div
        dangerouslySetInnerHTML={{
          __html: `${renderToString(<h1>Hello world 2</h1>)}`,
        }}
      />
  );
}

[JacobWeisenburger]

next: 14.0.0

"dependencies": {
    "@hookform/resolvers": "^2.9.11",
    "@js-temporal/polyfill": "^0.4.3",
    "date-fns": "^2.30.0",
    "encoding": "^0.1.13",
    "firebase": "^9.20.0",
    "freerstore": "^0.4.0",
    "lodash": "^4.17.21",
    "nanoid": "^5.0.1",
    "next": "^14.0.0",
    "pdf-lib": "^1.17.1",
    "radash": "^10.8.1",
    "react": "18.2.0",
    "react-day-picker": "^8.8.0",
    "react-dom": "18.2.0",
    "react-hook-form": "^7.45.4",
    "sass": "^1.58.3",
    "twind": "^0.16.19",
    "yaml": "^2.2.1",
    "zod": "^3.20.2",
    "zustand": "^4.3.6"
},
"devDependencies": {
    "@types/lodash": "^4.14.191",
    "@types/node": "^18.11.18",
    "@types/react": "^18.0.26",
    "@types/react-dom": "^18.0.10",
    "@typescript-eslint/eslint-plugin": "^5.47.1",
    "@typescript-eslint/parser": "^5.47.1",
    "autoprefixer": "^10.4.7",
    "eslint": "^8.30.0",
    "eslint-config-next": "13.1.6",
    "postcss": "^8.4.14",
    "tailwindcss": "^3.2.0",
    "typescript": "^4.9.4"
},

[icyJoseph]

Oh I guess you are using a client component 🤔 mmm

[icyJoseph]

Does it work to do a visually hidden with also aria-hidden combo on the CustomIframe (approach 1) and render a button next to it, and handle on click, so that you print the iframe ref content?

Or with CSS media queries as OP ended up doing.

[JacobWeisenburger]

Oh I guess you are using a client component 🤔 mmm

Yes, because I'm trying to do it with a button onClick.

---

Thanks for all your help. I was able to find this video, and it worked for me.

[icyJoseph]

Oh right, facepalm, haha media queries to the rescue! Awesome, well, not sure what was the answer here, but please don't forget to mark as answered :) if there was one 🤔