Can't use NPM package I'm working on | Astro Lounge | Page 1

sage relic Jan 18, 2023, 6:55 PM

#

hello! I'm starting with astro and I can't use a brand new library I'm creating using react.

looks like everything is good (no errors on vs code nor browser), but components aren't rendered. any idea?

dusk lion Jan 18, 2023, 7:11 PM

#

Hard to say with little information, but perhaps you haven't set the right client directive on the component use?

client:loadwould be one to start with, if for your purposes possibly client:only="react"could better suit?

sage relic Jan 18, 2023, 7:20 PM

#

nice, this client:only="react" solved the issue. what is the difference with client:load? and why is not working by default?

dusk lion Jan 18, 2023, 7:29 PM

#

[explanation updated, as I'd left out important parts the first time]
client:load builds the component, rendering as far as it can, on the static page. It then will hydrate on the client, adding or changing presentation.
client:only="framework" only builds and renders on the browser.
Both of these may continue to update on the browser, if the hydration is reactive to further fetches.

You'd see the difference right away if the component creates itself due to information only on or retrieved actively by the browser. -- you'd see a jumping component, as it first rendered empty, and then filled in.

It's worth getting familiar with and understanding all the directives in that section I linked you to -- besides uses, you'll understand what Astro is, better...

sage relic Jan 18, 2023, 7:49 PM

#

thanks a lot!

sage relic Jan 19, 2023, 12:08 PM

#

I'm here again. Do you have extra information on how to create components that can work using client:load directive?

My goal is to have all the content on the source of the page, right now, I'm seeing this instead:

<astro-island
  uid="Z1Ome3r"
  component
  url="/@fs/Users/zlnk/Git/making/vs/kb/astro-docs/node_modules/.vite/deps/@vs_kb.js?v=e4e60aae"
  component-export="Heading"
  renderer-url="/@fs/Users/zlnk/Git/making/vs/kb/astro-docs/node_modules/.vite/deps/@astrojs_react_client__js.js?v=e4e60aae"
  props='{"hasMargin":[0,true],"size":[0,400],"class":[0,"astro-PLQGFEM7"]}'
  ssr=""
  client="only"
  before-hydration-url="/@id/astro:scripts/before-hydration.js"
  opts='{"name":"Heading","value":"react"}'
  await-children=""
  ><template data-astro-template>Section Header</template></astro-island
>```

Instead of this:

```html
<h1 class="_s400_py9id_29 _hasMargin_py9id_11">Section Header</h1>

Thank you in advance!

dusk lion Jan 19, 2023, 9:40 PM

#

hmm - I may have led you astray here, not seeing what you were after in your brief question.

Also, what I said about client:load wasn't quite right -- it's the html of your component that it provides from the server, hydrating it [perhaps again...] later on the client. Which is the code you saw this time.

If you didn't have any client directive, you'd just get what your component can emit as HTML, on basis of what it knows at build time on your laptop. So did you really see nothing?

This would only occur if you had no HTML from any data the build has. In fact, it appears that you may have had a title showing for the original 'blank' component -- "Section Header". Was that true, or can you try it again using no client: directive, to see?

I'll fix my first response, but how do we get you what you need? It sounds you want the browser to have only html -- no active hydration, thus fully static from server. There are two ways you can do this:

create the full component output at build time. If you need data from elsewhere, you can use Astro's own fetch (see doc) in proper async ways to pull it then. Or if the data is actually or quasi- static, you can pull it from file/s at build time, using Astro's functions for that.
If your data is only ready at page load time, you could go to SSR, server side rendering, where you'd have the server pull the data and hydrate your component into HTML before it gets sent to the browser.

doco for Astro fetch: https://docs.astro.build/en/guides/data-fetching/
doco for Astro SSR: https://docs.astro.build/en/guides/server-side-rendering/

Note that for SSR, you'd need to add an adaptor, so that you have a rendering ability connected into Astro on the server, perhaps choosing Node as that's familiar. The SSR doc tells ho

All of these tactics are done in normal ways, once you see how they fit properly into Astro's framework.

Interested what you choose, and how you have success in it, am sure others will be also 🙂

sage relic Jan 20, 2023, 6:34 PM

#

Note that for SSR, you'd need to add an adaptor, so that you have a rendering ability connected into Astro on the server, perhaps choosing Node as that's familiar. The SSR doc tells ho

I'll try this, I think I was missing the adaptor, because my components are pretty simple, only CSS and HTML

This is really helpful. Thanks again!

dusk lion Jan 20, 2023, 9:20 PM

#

Most welcome, and some interest to see this solves your problem 🚗

dusk lion Jan 21, 2023, 4:29 AM

#

@sage relic , it's evening here, but I had a thought, which might add something for you.

I wondered, what exactly you wanted to accomplish, in wishing for 'pure html & css' on the page? Speed, I'm sure, but then Astro may have something unexpected to offer you.

it's true that with the adapter, you can do SSR and produce the pure thing, at effort...
but then it's worth asking what that <astro-island> block really is. The hint is where it lists 'component-url: url/to/your/component/code' . You'll find another link for hydration. But this little <astro-island> block isn't necessarily going to pull your code for it at the time the block itself loads.
in fact, what happens is governed by the client:directive item we discussed. If it's one of the deferral directives, client:idle, or client:visible, the component code won't be requested from the server until their condition is fulfilled.
this means that if a component will be at first off-page, and you indicate client:visible for it, your page will load free of any code for that component -- and so you get a fast page, which further requests and fills in if the viewer scrolls down, rendering what they'll see then at that time.
client:idle will wait to request that element's code until other activity is completed. So again you get potentially a fast page.
the caveats on this seem to be a) because it will be built with rendering javascript, the component will be really invisible until the directive triggers to load it, and b) depending on your active javascript, the component may not appear as rapidly as it would from SSR. That's the tradeoff.
you can verify the way this happens with the Network display on the browser., .where you'll see your component not requested until the directive's trigger. And you can look at what's returned on the Network line, to see how the component will be built.

#Can't use NPM package I'm working on