[SSR] Use Recoil as state management

[TristanPouliquen]

Hello,

I am trying to build my first Tauri App and I am trying to use Recoil as my state management.

I defined my first atoms and used them in some components.

But when I launch my Tauri App I get an error stating:

Server Error
ReferenceError: window is not defined
This error happened while generating the page. Any console logs will be displayed in the terminal window.

From what I understand, this would come from the SSR of NextJS, but this started appearing when I added Recoil to my project.

Are there specific instructions on how to implement Recoil in a NextJS project for correct SSR?

Here are the atoms & actions I defined: https://github.com/TristanPouliquen/selection-poste-enm/blob/state-management/_state/positions.ts

Here are the relevant components:

• Layout (including RecoilRoot): https://github.com/TristanPouliquen/selection-poste-enm/blob/state-management/components/layout.tsx
• CardSmall: https://github.com/TristanPouliquen/selection-poste-enm/blob/state-management/components/card_small.tsx
• Index page: https://github.com/TristanPouliquen/selection-poste-enm/blob/state-management/pages/index.tsx
• action file: https://github.com/TristanPouliquen/selection-poste-enm/blob/state-management/_state/positions.ts

This page just fetches the list of Position objects from my backend, displays them & handles a focus to open a modal when clicking on an element.

This seems to be caused by a call to @tauri-apps/api during the SSR but I don't understand where. All invoke calls come from my custom hook usePositionActions, I tried to look into loading dynamically but it does not seem to be possible for a function.

Thanks in advance if anyone has an idea!

[FabianLars]

I don't think this is necessarily Recoil's fault (well, i never heard of that lib so maybe it is) but maybe your usage of tauri's apis (invoke in this case). All of tauri's apis need access to the window and some apis need the navigator too.

This basically means that you need to make sure that tauri's apis are only called on the client side (for example inside an componentDidMount-like useEffect hook).

Edit: whoops, didn't see your last message where you basically said the same already, sorry...

[TristanPouliquen]

The problem comes from https://github.com/tauri-apps/tauri/blob/dev/tooling/api/src/window.ts#L2033 thtat is apparently run at the top level of the module, which get run on import.

Would it be possible to change it to if (typeof window !== "undefined" && '__TAURI_METADATA__' in window) ?

[FabianLars]

That code is only executed when you import the window module though (which you don't as far as i can see). If that'd be the problem (without importing the window module) then we would have many more complains about nextjs in tauri.

What i'm thinking is that for whatever reason, using Recoil makes nextjs try to mount the component at build time and therefore triggering the invoke call, which indeed does need access to window too (it will fail at build time even if it has access to the window because the api on the window is only injected in an actual tauri app).

[TristanPouliquen]

Hi, I've continued trying to isolate the project. I also talked with one of the maintainers at NextJs.

What we found is that the error appears when I import my @/_state/actions file, which in turn imports import {invoke} from '@tauri-apps/api.

This file then imports import * as window from './window' which causes the error I linked earlier.

See his post here: vercel/next.js#45605 (reply in thread)

This fails even if I am not using Recoil, as you can see in the two latest commits of this branch: https://github.com/TristanPouliquen/selection-poste-enm/commits/state-management

Just adding an import statement to my actions file makes my application break on window undefined.

[FabianLars]

can you try importing invoke like this then? import {invoke} from '@tauri-apps/api/tauri (i could swear that's what you did, i can't trust my eyes anymore 😂 )

[TristanPouliquen]

Oh, this actually worked indeed!

And it is what is in the Getting started docs actually, sorry for my mistake!

🎉