Packaged Modules Unnecessarily Shipped | Astro Lounge | Page 1

brisk heart Jan 4, 2023, 12:31 PM

#

Hi, I'm trying to setup a monorepo with multiple instances of Astro drawing from a shared component library.
I'm most of the way there, with workspaces and the component library setup through npm, but I've run into a problem. Modules from the component library are being included in the head when they're not being used in the page. Is there a way to make it so that they are only included when they are used? I don't understand why this isn't the case by default (unless I've done something wrong...)
Using Astro 1.9.0

proven walrus Jan 4, 2023, 5:01 PM

#

are you sure they're not indirectly included ? I think a minimal example could help here.

brisk heart Jan 5, 2023, 12:01 AM

#

@proven walrus thanks for the reply.
In this instance, I have a layout in my layouts folder (PolicyDocLayout) that is also in the components library and it's being duplicated. On the page (an mdx page), the layout is included in the frontmatter (layout: '../layouts/PolicyDocLayout.astro'), but the version from the library is also being included for some reason. This means that, for example and event listen that toggles some classes is duplicated and so cancels itself out. It may also be causing some other irregularities, but obviously this is not ideal either way.
The index.js file for the library is as follows
"export { default as PolicyDocLayout } from './layouts/PolicyDocLayout.astro'
export { default as BaseLayout } from './layouts/BaseLayout.astro'
export { default as DocControlTable } from './components/DocControlTable.astro'
export { default as SidebarToggle } from './components/SidebarToggle.astro'
export { default as Header } from './components/Header.astro'
export { default as TableofContents } from './components/TableofContents.astro'
export { default as VersionControlTable } from './components/VersionControlTable.astro'"

#

A snip from dev tools

proven walrus Jan 5, 2023, 6:09 PM

#

it is not easy for me to have an impression of the project from the provided chat description, the project itself would be the easiest way to go, in case your project have private data, you could reproduce the part you'd like to get support on with a minimal example you can share on github.
I do not promise a solution, but in case it's confirmed you could file a real issue, which also requires then necessarily a reproduction example.

brisk heart Jan 5, 2023, 10:09 PM

#

No worries - https://github.com/rohannelson/learning-astro (sorry that I didn't think to do this earlier - I'm new to web dev). The 'component library' is under ./shared-components, and the page that actually has content in it is under ./websites/shared-documentation

GitHub

GitHub - rohannelson/learning-astro: Learning Astro + mdx integration

Learning Astro + mdx integration. Contribute to rohannelson/learning-astro development by creating an account on GitHub.

proven walrus Jan 6, 2023, 8:03 AM

#

I looked into websites/68waverley/dist/index.html and I can't tell if the shared-components version is being included. How can you tell that ? If you could make an easier way like using colors or something that can make the test easier.

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <link rel="icon" type="image/svg+xml" href="/favicon.svg">
        <meta name="generator" content="Astro v1.9.1">
        <title>Welcome to Astro.</title>
    <link rel="stylesheet" href="/assets/index.c54c09e6.css" /></head>

when I remove Card and Layout from index.html, nothing is being included, so I assume the shared-components was not included

<!DOCTYPE html>
<link rel="stylesheet" href="/assets/index.70810af9.css" /><main class="astro-DNLJ5PPL">
        <h1 class="astro-DNLJ5PPL">Welcome to <span class="text-gradient astro-DNLJ5PPL">Astro</span></h1>
        <p class="instructions astro-DNLJ5PPL">
            To get started, open the directory <code class="astro-DNLJ5PPL">src/pages</code> in your project.<br class="astro-DNLJ5PPL">
            <strong class="astro-DNLJ5PPL">Code Challenge:</strong> Tweak the "Welcome to Astro" message above.
        </p>
        <ul role="list" class="link-card-grid astro-DNLJ5PPL">
        </ul>
    </main>

#Packaged Modules Unnecessarily Shipped