nanostores client side hydration

[fallen stratus]

I'm struggling to find a good solution to this - I have an astro app with a couple of pages and some react islands. I want to fetch some initial data on the server, pass it to these islands for the initial server-side render, but then also store this data in a store (lets say nanostores) so that client side the data can be mutated locally.

[livid compass]

https://inox-tools.fryuni.dev/request-nanostores

Sorry for the long wait

@fallen stratus

[fallen stratus]

no worries, thank you

[fallen stratus]

hi @livid compass it works fine as expected but i don't know why i get this error when i try to import shared function Cannot find module '@it-astro:request-nanostores'

anyway it's fine, i just disturbed about this error

[livid compass]

Hmm interesting

@upper siren When you get a chance figured you may want to know

[livid compass]

Did you install the package with your package manager?

[upper siren]

Can you run astro info and share the results?

[fallen stratus]

yes

[livid compass]

Just figured I would double check 😅

[fallen stratus]

@upper siren so?

[livid compass]

No need for the extra ping, they're obviously aware of the thread 😛

[fallen stratus]

maybe. anyway even it works but the build is failed cuz of this error 🫤

[upper siren]

It should be working, it really only needs to be installed to define the module. Might be related to a problem we've been debugging related to virtual modules defined by integrations.
Can you share you astro.config.mjs?
This is a problem we've seen some people have but so far none of us trying to investigate it manage to reproduce it

[fallen stratus]

here is it

[upper siren]

What about the other integrations? Does it fail even with just the request-nanostore integration?

[fallen stratus]

no the only error it's from the store just this module '@it-astro:request-nanostores'

[upper siren]

I tried with that exact config and same versions you are using and it is working fine.
It is such a weird error we can't replicate to debug

[livid compass]

out of curiosity what does your store look like?

[fallen stratus]

here is my store and my config with all integrations

[livid compass]

Do you get the error if it's a .ts file? no real need for it to be tsx

[fallen stratus]

yes also with .ts

but no error on .js file

[upper siren]

Wait

Is the error on the IDE or when you run the build?

Does it break when running astro build?

[fallen stratus]

yes it break when i run build

[upper siren]

That output is not from astro build it is from astro check

You are probably running npm run build and it has astro check && astro build

[fallen stratus]

yes i run npm run build

[upper siren]

If you created from a template there should be an astro script. Can you try running npm run astro build so it building without typechecking?

If that works then it is an entirely separate problem from what we are debugging. It's just a type thing.

Rename your astro.config.mjs to astro.config.mts. Your tsconfig is not loading the types brought in by your Astro config

[fallen stratus]

i just run npm run astro build so i didn't get any error

i rename it and i still get the same error!!

[upper siren]

Now that is weird. It should work. Can you share your tsconfig?

I have an idea on how to fix this so people don't have to deal with that

[fallen stratus]

what do u think here did i missed something on my tsConfig

[upper siren]

Got it

Your type checking module resolution is not matching what happens for the build. Astro bundles your code so you need "moduleResolution": "bundler"
This is set on the base config you are extending from, so you can just remove that line as well

The node resolution won't load the virtual modules because they are incompatible with Node, without Vite they wouldn't exist

[fallen stratus]

it works fine now i also had to add .mts files here

thanks a lot 🙏

[outer rivet]

@upper siren Did I understand correctly that with this integration I can access my store even in server-side .astro components? If yes, could you please provide a minimal example? I need to get data from the store and display it on a page

[livid compass]

#showcase message

[upper siren]

I need to get data from the store and display it on a page
Be aware that the data only goes one way. Whatever you put in your store on the server will be available on the client, but if you change it on the client it won't be available on following requests to the server.

For that you'll need to use some other mechanism, like cookies or a session database, to keep the state between multiple requests.
I have an example on the repo doing just that: https://github.com/Fryuni/inox-tools/tree/main/examples/request-nanostores

Here is how it works:

• There is Astro Action that receives a cart item and set's it into a cookie
• When you open the page, the server sets the nanostore to be the value of the cookie
• The component that adds an item to the cart calls a function that creates a nanostore task. That task will update the nanostore locally for client reactivity and call the action to update the state for the server.

[outer rivet]

my task is to create just a global store where I will send data in the form of json, which I receive in a .astro file in the script tag. But for some reason when I view the store on other pages, it is empty

I don't need to change the store on the client in any way, I just want to write the different data that I receive from the components there once

[upper siren]

But for some reason when I view the store on other pages, it is empty
The state sharing is per page. On each page you read what was set from the server. If the next page doesn't set the state, it won't be set

[outer rivet]

is there any simple method where I could write my data and then read and take it from anywhere?

[upper siren]

You have two options:

• You can use Nano Stores Persistent which will persist the data you set on it to localStorage, so you'll be sharing the information on the client-side. But if the user navigates directly to one of the pages that use the state and never to the page that sets the state things might break.
• You can set the state of a shared atom from a middleware so it is set from the server on every page

[outer rivet]

thanks

[surreal quail]

If your issue is resolved, please help by doing the following two steps:

1. From the ellipses (3-dot menu) in the top-right corner of the post (not the first message), edit the tags to include the Solved tag.
2. From the same ellipses, select Close Post.
   Your post will still be available to search and can be re-opened simply by replying in it. Closing a post moves it down with older posts, so we can more easily focus on issues that still need to be resovled.
   Thank you for your help!

[upper siren]

The issue was already solved