How can I load a library which uses window object?

[MarcosCunhaLima]

Simple project which imports a library that references window object.

...
import { useRef } from 'react';

import printJS from 'print-js'; // <-- this library


export const meta = () => {
  return [{ title: "New Remix App" }];
};
export default function Index() {

  const onPrintPrintJS = () => { 
    if (typeof document !== "undefined") {
      printJS({ printable: dados, type: 'pdf', base64: true })
    }

It builds OK but when I refresh the page, I get this error:

ReferenceError: window is not defined
    at Object.<anonymous> (/Users/marcos/javascript_projects/printPdf/node
```_modules/print-js/dist/webpack:/printJS/webpack/universalModuleDefinition:10:2)

Is there a way to signal to Remix that a library is used only at client-side? 

[sergiodxa]

Two options

1. Use import("print-js") in an effect or event emitter, so it's only imported client-side
2. Create a client-only file (.client.tsx) to import it, then use Remix Utils's ClientOnly component to avoid rendering the component from your .client.tsx file.

[MarcosCunhaLima]

I would like to know why Remix "opens" each library or what it does in order to generate this error? Is there any documentation regarding this? Even better, we have 15-20 libraries in our project, how do we know if we have a "client" library which relies internally on "window" or "document" or not? Em sex., 19 de mai. de 2023 às 15:29, Sergio Xalambrí < ***@***.***> escreveu:

…

Two options 1. Use import("print-js") in an effect or event emitter, so it's only imported client-side 2. Create a client-only file (.client.tsx) to import it, then use Remix Utils's ClientOnly component to avoid rendering the component from your .client.tsx file. — Reply to this email directly, view it on GitHub <#6424 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAGH5LM3ZA7QJ6TXSEMIQFDXG63Z3ANCNFSM6AAAAAAYG6THQE> . You are receiving this because you authored the thread.Message ID: ***@***.***>

-- Marcos Cunha Lima *Futura Tecnologia* (11) 3864-9092 ***@***.*** <http://www.futuranet.com.br>

[kiliman]

Remix/esbuild doesn't really "open" the package. It simply bundles it. The error will appear if the code with client-only objects tries to execute during SSR. Most React packages will work without any issues. The ones that typically break are highly interactive components.

[MarcosCunhaLima]

What I expected from "bundle it" was that it would just copy the library (minimizing it, etc) but wouldn't run any code inside it, right? So, if I protect my code with some guard clause which assures that my code would run only at browsers, I wouldn't have any problems using a client-side library. Em sáb., 20 de mai. de 2023 às 12:33, Michael Carter < ***@***.***> escreveu:

…

Remix/esbuild doesn't really "open" the package. It simply bundles it. The error will appear if the code with client-only objects tries to execute during SSR. Most React packages will work without any issues. The ones that typically break are highly interactive components. — Reply to this email directly, view it on GitHub <#6424 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAGH5LPIDN7W7DACGYXUEGTXHDP6HANCNFSM6AAAAAAYG6THQE> . You are receiving this because you authored the thread.Message ID: ***@***.***>

-- Marcos Cunha Lima *Futura Tecnologia* (11) 3864-9092 ***@***.*** <http://www.futuranet.com.br>

[kiliman]

By default, Remix will render your React component on both the server and the client. Remix doesn't care. @sergiodxa has already explained how to add a "guard clause" to ensure it only runs on the client.

[MarcosCunhaLima]

Yes, I've read. What I am trying to do is to understand it because this library is only used in an event (a button click) which is protected (it runs only if document is defined). I understand that Remix runs on both client and server but I don't understand what it does when it loads a library. To me, a library is something passive that we call when we need it (sometimes when rendering, sometimes in this case only in a button click).

[sergiodxa]

To me, a library is something passive that we call when we need it

This is true for most libraries but not for all, there are librerías that cause side effects when importing them, most likely your lib has this behavior.

[KienTPhan]

I think this is a print-js issue, this solution helped me.