Page works as expected in dev, but not production build

[thdoan]

What version of astro are you using?

2.3.0

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

No

What package manager are you using?

npm

What operating system are you using?

Windows

What browser are you using?

Chrome

Describe the Bug

After spending countless hours perfecting our site in dev mode (astro dev), we were dismayed to find that many things broke in production (astro build). Steps to reproduce:

1. See it working as expected, with the text sliding up on page load.
2. Download the project, run astro build and view the same page in your browser.

ISSUE -- The page doesn't load the same as in dev mode (step 1):

https://www.loom.com/share/802aa43daf594ae9b3fc0b71fa444e97

The main reason for this bug report is to point out that the development and production output should be visibly identical so that developers can have confidence that whatever they're building in dev will be reflected accurately in production. I hope the build process can be improved such that either the dev environment also produces the "yoyo" glitch seen in the loom, or the prod environment no longer produces the glitch -- either way is fine as long as both environments produce a consistent output.

Note that I've verified that this issue can be resolved by inlining the CSS, a scenario in which PR #6659 would come in very handy.

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-y5t9cq

Participation

• I am willing to submit a pull request for this issue.

[lilnasy]

_.mov

The build output animates like it says.

[matthewp]

I'm seeing the same as @lilnasy here. Maybe it was fixed in a patch? Please file a new issue if you have problems. Thanks.

[thdoan]

Thanks for checking. I tried publishing the minimal test case on Netlify and was not able to reproduce the issue. It seems this issue is only reproducible in my local web server (Mongoose v4.1).

[hansfigo]

I have similar problem but mine is the javascript is not working on certain pages in build production. but in dev mode its works perfectly. I haven't found a solution yet. Perhaps anyone give me some suggestions?

[vasi26ro]

I have similar problem but mine is the javascript is not working on certain pages in build production. but in dev mode its works perfectly. I haven't found a solution yet. Perhaps anyone give me some suggestions?

I have the same issue. Did you found a fix?

[Albertyhu]

I am also experiencing the same problem where my site renders fine in development mode, but the css and javascript files could not be loaded in production mode.

site: https://main--idyllic-crumble-facf8a.netlify.app/
Github repository: https://github.com/Albertyhu/uthan-template

[lilnasy]

@Albertyhu This is not a bug. Astro does not process <link> tags, it leaves them as-is.

You may want to read the documentation for styling.
https://docs.astro.build/en/guides/styling/#import-a-local-stylesheet

Feel free to create a support thread if you need help.
https://docs.astro.build/en/guides/troubleshooting/#need-more

[Albertyhu]

@lilnasy Thanks for the suggestion.