Result in dev & after build is different

[ganjarsetia]

What version of astro are you using?

2.1.0

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

Node

What package manager are you using?

yarn

What operating system are you using?

Linux

What browser are you using?

Brave

Describe the Bug

I'd like to report a bug where there is a difference in result when running in development mode (yarn run dev) and after build (yarn build)

Here steps to reproduce:

1. Get the source from https://stackblitz.com/edit/withastro-astro-9stbmj?file=src/components/Second.jsx
2. yarn install
3. yarn run dev
4. open http://localhost:3000/ and wait until page show DETAIL button. Then click it. It should show like this
5. Stop it using CTRL+C
6. yarn run build
7. HOST=0.0.0.0 node ./dist/server/entry.mjs
8. open http://localhost:3000/ and wait until page show DETAIL button. Then click it. It should show the problem

It should show the same result as in dev mode

Link to Minimal Reproducible Example

https://stackblitz.com/edit/withastro-astro-9stbmj?file=src/components/Second.jsx

Participation

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

[rishi-raj-jain]

I see the exact same thing with yarn run dev vs yarn run build && yarn run preview. Also, can you create a more minimal example of this that'll help us isolate the issue.

[ganjarsetia]

I see the exact same thing with yarn run dev vs yarn run build && yarn run preview. Also, can you create a more minimal example of this that'll help us isolate the issue.

I'm not quite understand what you mean "more minimal example". I already put the Link to Minimal Reproducible Example. You can fork that

[rishi-raj-jain]

Minimal Reproducible Example.

By that I mean like as you said in the issue dev and after build are different, but in the stackblitz if you run both of the commands as above we see the same thing, hence asked for a setup that isn't using multiple things (like in your project using react, vue, etc..) so that gives us too many variables to look from.

[mandar1jn]

Hi. This is probably because autoproducent is disabled in dev

[bluwy]

I can reproduce this in the repro given (though I agree it's not really minimal), the issue is that you have this:

// potensiStyle.scss
.ka-table {
  width: 1065px !important;
}

And that file is imported in src/components/Second.jsx, which is imported in src/pages/second.astro. So ideally, this CSS should only kick-in in /second.html which is true in dev. But in build, it kicks in on the main /index.html page, which import graph doesn't seem to import Second.jsx.

It seems like the CSS got merged after build, so it is a bug. I'm not sure if it's within Vite's CSS bundling, or Astro's CSS tracking that's the issue yet though.

[ganjarsetia]

Thank you guys for the reply.

Minimal Reproducible Example.

By that I mean like as you said in the issue dev and after build are different, but in the stackblitz if you run both of the commands as above we see the same thing, hence asked for a setup that isn't using multiple things (like in your project using react, vue, etc..) so that gives us too many variables to look from.

Oh I'm sorry about that. Actually it was my real project & I know how to solve it using temporary solution. So I just need to remove unused code or package right? If that true, I will refactor it for minimal repro example

I can reproduce this in the repro given (though I agree it's not really minimal), the issue is that you have this:

// potensiStyle.scss
.ka-table {
  width: 1065px !important;
}

And that file is imported in src/components/Second.jsx, which is imported in src/pages/second.astro. So ideally, this CSS should only kick-in in /second.html which is true in dev. But in build, it kicks in on the main /index.html page, which import graph doesn't seem to import Second.jsx.

It seems like the CSS got merged after build, so it is a bug. I'm not sure if it's within Vite's CSS bundling, or Astro's CSS tracking that's the issue yet though.

Yeah that's exactly the problem.