Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

imported css file classes don't get loaded on SSG build when using client:only=react #5167

Closed
1 task
davidvpe opened this issue Oct 22, 2022 · 2 comments · Fixed by #5434
Closed
1 task

imported css file classes don't get loaded on SSG build when using client:only=react #5167

davidvpe opened this issue Oct 22, 2022 · 2 comments · Fixed by #5434
Assignees
@matthewp
Labels
- P4: important Violate documented behavior or significantly impacts performance (priority)

Comments

@davidvpe
Copy link

davidvpe commented Oct 22, 2022 •
edited
Loading

What version of astro are you using?

1.5.2

Are you using an SSR adapter? If so, which one?

None, just SSG

What package manager are you using?

npm v8.15.0 & node v16.17.0

What operating system are you using?

macOS Monterrey 12.6

Describe the Bug

When styles are added using local css files on client:only="react" components, styles don't get loaded into the page when building the page and using preview npm run build && npm run preview which more or less replicates my production deployment situation, using an S3 bucket and CloudFront on AWS. This doesn't affect other client: directives nor does it when using they "styles" prop on the html component or tailwind classes. This just happens when css files are being imported on cliend:only="react" components (not sure about other integrations though),

These are the steps to reproduce:

I've created a react component CoolComponent.tsx

.first {
  background-color: red;
  width: 100px;
  height: 100px;
}

.second {
  background-color: blue;
  width: 50px;
  height: 50px;
}
import React from 'react'
import styles from './styles.module.css' // also happens when using styles.css
type Props = {}

const CoolComponent = (props: Props) => {
  return (
    <div>
      <h1>Cool Component</h1>
      <div className={styles.first}>
        <div className={styles.second}></div>
      </div>
    </div>
  )
}

export default CoolComponent

and I am importing it on the index page

---
import Layout from "../layouts/Layout.astro";
import CoolComponent from "../components/CoolComponent";
---

<Layout title="Welcome to Astro.">
  <CoolComponent client:only="react" />
</Layout>

Since I'm using SSG, and the uploading it to an S3 Bucket I need to run npm run build and then I upload all the files to the bucket

I notice that there is a file that contains the css styles for Cool Component

image

But on the actual page that file never gets imported

Note: I just realised that I can replicate this bug result using npm run preview that way I don't need to upload it to an s3 bucket.

Expected result:
image

Actual result:
image
image

<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.5.2">
		<title>Welcome to Astro.</title>
	<link rel="stylesheet" href="/assets/index.9e07c199.css"></head>
	<body>
		<style>astro-island,astro-slot{display:contents}</style>
		<script>(self.Astro=self.Astro||{}).only=t=>{(async()=>await(await t())())()},window.dispatchEvent(new Event("astro:only"));var l;{const c={0:t=>t,1:t=>JSON.parse(t,o),2:t=>new RegExp(t),3:t=>new Date(t),4:t=>new Map(JSON.parse(t,o)),5:t=>new Set(JSON.parse(t,o)),6:t=>BigInt(t),7:t=>new URL(t),8:t=>new Uint8Array(JSON.parse(t)),9:t=>new Uint16Array(JSON.parse(t)),10:t=>new Uint32Array(JSON.parse(t))},o=(t,s)=>{if(t===""||!Array.isArray(s))return s;const[e,n]=s;return e in c?c[e](n):void 0};customElements.get("astro-island")||customElements.define("astro-island",(l=class extends HTMLElement{constructor(){super(...arguments);this.hydrate=()=>{if(!this.hydrator||this.parentElement&&this.parentElement.closest("astro-island[ssr]"))return;const s=this.querySelectorAll("astro-slot"),e={},n=this.querySelectorAll("template[data-astro-template]");for(const r of n){const i=r.closest(this.tagName);!i||!i.isSameNode(this)||(e[r.getAttribute("data-astro-template")||"default"]=r.innerHTML,r.remove())}for(const r of s){const i=r.closest(this.tagName);!i||!i.isSameNode(this)||(e[r.getAttribute("name")||"default"]=r.innerHTML)}const a=this.hasAttribute("props")?JSON.parse(this.getAttribute("props"),o):{};this.hydrator(this)(this.Component,a,e,{client:this.getAttribute("client")}),this.removeAttribute("ssr"),window.removeEventListener("astro:hydrate",this.hydrate),window.dispatchEvent(new CustomEvent("astro:hydrate"))}}connectedCallback(){!this.hasAttribute("await-children")||this.firstChild?this.childrenConnectedCallback():new MutationObserver((s,e)=>{e.disconnect(),this.childrenConnectedCallback()}).observe(this,{childList:!0})}async childrenConnectedCallback(){window.addEventListener("astro:hydrate",this.hydrate);let s=this.getAttribute("before-hydration-url");s&&await import(s),this.start()}start(){const s=JSON.parse(this.getAttribute("opts")),e=this.getAttribute("client");if(Astro[e]===void 0){window.addEventListener(`astro:${e}`,()=>this.start(),{once:!0});return}Astro[e](async()=>{const n=this.getAttribute("renderer-url"),[a,{default:r}]=await Promise.all([import(this.getAttribute("component-url")),n?import(n):()=>()=>{}]),i=this.getAttribute("component-export")||"default";if(!i.includes("."))this.Component=a[i];else{this.Component=a;for(const d of i.split("."))this.Component=this.Component[d]}return this.hydrator=r,this.hydrate},s,this)}attributeChangedCallback(){this.hydrator&&this.hydrate()}},l.observedAttributes=["props"],l))}</script>
		<astro-island uid="Z2bBTVh" component-url="/CoolComponent.6bbffad3.js" component-export="default" renderer-url="/client.5b2d1ddb.js" props="{&quot;class&quot;:[0,&quot;astro-PDBOP4G2&quot;]}" client="only" opts="{&quot;name&quot;:&quot;CoolComponent&quot;,&quot;value&quot;:&quot;react&quot;}">
			<div>
					<h1>Cool Component</h1>
					<div class="_first_rot62_1">
							<div class="_second_rot62_7"></div>
					</div>
			</div>
		</astro-island>
	</body>
</html>

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-zm1d9c?file=src/pages/index.astro

Participation

  • I am willing to submit a pull request for this issue.
@davidvpe davidvpe changed the title Astro generated css classes don't exist when using client:only=react file.module.css classes don't get loaded on SSG build when using client:only=react Oct 22, 2022
@davidvpe davidvpe mentioned this issue Oct 22, 2022
Closed
1 task
@davidvpe davidvpe changed the title file.module.css classes don't get loaded on SSG build when using client:only=react imported css file classes don't get loaded on SSG build when using client:only=react Oct 22, 2022
@matthewp
Copy link
Contributor

Does it work in dev mode?

@matthewp matthewp added the needs response Issue needs response from OP label Oct 28, 2022
@davidvpe
Copy link
Author

davidvpe commented Oct 28, 2022 •
edited
Loading

Hi @matthewp, yes it does, it only fails when you build + preview

@matthewp matthewp added - P4: important Violate documented behavior or significantly impacts performance (priority) and removed needs response Issue needs response from OP labels Nov 16, 2022
@matthewp matthewp self-assigned this Nov 16, 2022
@matthewp matthewp mentioned this issue Nov 17, 2022
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@matthewp matthewp

Labels
- P4: important Violate documented behavior or significantly impacts performance (priority)
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Use Vite's resolve to resolve paths for client:only withastro/astro
2 participants
@matthewp @davidvpe