#Separating vanilla component code from global hoisted bundle
1 messages · Page 1 of 1 (latest)
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.
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)
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
I don't want is:inline. I want typescript support and to be able to import common util functions from my other files.
I've got an "add to cart button" component that is only on certain pages, but one of the pages it's not on throws an error because the getElementById is failing
So the code is running on all pages.
What do you need to know about my build?
Do you mean other functionalities as those in other .ts or .js files or in .astro files? Using type=module u'll be able to import any .ts and .js stuff, but not .astro stuff and it will be inlined only on the .html where your component is in. I don't know if there's a way to bundle it separately, but maybe there's some vite config or plugin for it
Are you using Astro.glob() anywhere?
I am not, nor content
Do you have a repo you can share?
I can't share it but I can try to create a minimal reproducible example
That would be great
Okay it's a bit tricky to reproduce so it seems like I'm running into some unintended behavior
looking further
@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
I think the reason this is happening is because everythin is exported from a central file I seesrc/components/index.ts, does it work if you import the files directly?
Yes
Is the component library inside a workspace?
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';
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
@twilit brook the walkParentInfo here: https://github.com/withastro/astro/blob/main/packages/astro/src/core/build/graph.ts
doesn't take into account which values are imported from a file - it treats it as if all the exports are imported for everything
do you know if this is intended behavior and a different function should be used for this case, or if this is globally unintended?
Honestly I am not too sure if this is intended or not
do you know someone who would?
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