#Separating vanilla component code from global hoisted bundle

1 messages · Page 1 of 1 (latest)

charred cedar
#

Is there a way (without using is:inline, because I need to import common utils) to make a vanilla script block into a separate js file on build that doesn't get added to the global hoisted.js file?

I don't want all of my pages to include the code for a component that is only in one page, for example.

ancient marshBOT
#
Quiet in here?

It looks like no-one has responded to your question yet. People might not be available right now or don’t know how to answer your question. Want an answer while you wait? Try asking our experimental bot in #1095492539085230272.

peak yoke
#

Did u try type="module"? From the Astro guide: "Astro’s default bundling behavior will be disabled in some situations. In particular, adding type="module" or any attribute other than src to a <script> tag will cause Astro to treat the tag as if it had an is:inline directive. The same will be true when the script is written in a JSX expression." (https://docs.astro.build/en/guides/client-side-scripts/#script-bundling)

Astro Documentation

How to add client-side interactivity to Astro components using native browser JavaScript APIs.

twilit brook
#

What does your build look like? Also, do you mind sharing a bit more about what your trying to do? Astro should be code splitting everything so that pages only include the code they need, components should not be included on pages that don't use them

charred cedar
charred cedar
#

So the code is running on all pages.

#

What do you need to know about my build?

peak yoke
twilit brook
#

Are you using Astro.glob() anywhere?

charred cedar
twilit brook
#

Do you have a repo you can share?

charred cedar
#

I can't share it but I can try to create a minimal reproducible example

twilit brook
#

That would be great

charred cedar
#

Okay it's a bit tricky to reproduce so it seems like I'm running into some unintended behavior

#

looking further

charred cedar
#

@twilit brook Got it

#

this is a very weird behavior

#

Astro seems to be losing track of which components are on which page if they're inside a parent component (such as a Layout)

#

Going to file an issue

#

I've tracked it down to components being re-exported from a file like

import Component from './Component.astro';
import Layout from './Layout.astro';

export { Component, Layout };
#

which is unfortunately impossible to avoid for me because I'm using a monorepo with a common component library

twilit brook
#

I think the reason this is happening is because everythin is exported from a central file src/components/index.ts, does it work if you import the files directly? I see

charred cedar
#

Yes

twilit brook
#

Is the component library inside a workspace?

charred cedar
#

A pnpm workspace, yes

#

So it's basically just importing the astro files directly

twilit brook
#

Not sure if this has anything to do with it but I normally export components like this: ```js
export { default as Component } from './Component.astro';
export { default as Layout } from './Layout.astro';

charred cedar
#

It does not work

#

I've tracked it down to internals.hoistedScriptIdToPagesMap being incorrect

#

The only place that writes to that is plugin-analyzer

#

pageScripts is wrong

#

The values passed into hoistedScriptScanner > scan are correct

charred cedar
#

do you know if this is intended behavior and a different function should be used for this case, or if this is globally unintended?

twilit brook
#

Honestly I am not too sure if this is intended or not

charred cedar
twilit brook
#

I do but they are offline right now because it is the weekend, they should see your issue and respond in the next day or two