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.

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

[bug]Vite production build lose order of execution in js #7264

Closed
7 tasks done
dabuside opened this issue Mar 11, 2022 · 2 comments
Closed
7 tasks done

[bug]Vite production build lose order of execution in js #7264

dabuside opened this issue Mar 11, 2022 · 2 comments

Comments

@dabuside
Copy link

dabuside commented Mar 11, 2022

Describe the bug

Step to Reproduction

  1. open url
  2. run vite dev console output is 100
  3. run vite build && vite preview console output is undefined
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="favicon.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite App</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module">
      window.a = 100;
    </script>
    <script type="module">
      import '@dabuside/test';  //only `console.log(window.a)`
    </script>
  </body>
</html>

Real UseCase: a npm package need global data which initialize in main app.js(script module).
production build puts all npm package in vendor(modulepreload), which call stack is defferent from dev mode.

Reproduction

https://stackblitz.com/edit/vitejs-vite-mngeim?file=index.html

System Info

System:
    OS: Windows 10 10.0.17763
    CPU: (4) x64 Intel(R) Core(TM)2 Duo CPU     T7700  @ 2.40GHz
    Memory: 3.07 GB / 8.00 GB
  Binaries:
    Node: 16.13.1 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.17 - C:\Program Files\nodejs\yarn.CMD
    npm: 8.1.2 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 99.0.4844.51
    Edge: Spartan (44.17763.1.0)
    Internet Explorer: 11.0.17763.1

Used Package Manager

npm

Logs

No response

Validations

@dabuside dabuside changed the title [bud]Vite production build lose order of execution in js [bug]Vite production build lose order of execution in js Mar 11, 2022
@ygj6
Copy link
Member

ygj6 commented Mar 11, 2022

According to the PR #6534

from Vite 2.9, manualChunks is no longer modified by default.

vite/docs/guide/build.md

Lines 46 to 58 in dddda1e

## Chunking Strategy
You can configure how chunks are split using `build.rollupOptions.output.manualChunks` (see [Rollup docs](https://rollupjs.org/guide/en/#outputmanualchunks)). Until Vite 2.8, the default chunking strategy divided the chunks into `index` and `vendor`. It is a good strategy for some SPAs, but it is hard to provide a general solution for every Vite target use case. From Vite 2.9, `manualChunks` is no longer modified by default. You can continue to use the Split Vendor Chunk strategy by adding the `splitVendorChunkPlugin` in your config file:
```js
// vite.config.js
import { splitVendorChunkPlugin } from 'vite'
module.exports = defineConfig({
plugins: [splitVendorChunkPlugin()]
})
```
This strategy is also provided as a `splitVendorChunk({ cache: SplitVendorChunkCache })` factory, in case composition with custom logic is needed. `cache.reset()` needs to be called at `buildStart` for build watch mode to work correctly in this case.

You can now bump the vite version to v2.9.0-beta.0 to fix this issue.

@dabuside
Copy link
Author

dabuside commented Apr 2, 2022

Works fine with vite@2.9.1
thank @ygj6

@dabuside dabuside closed this as completed Apr 2, 2022
@github-actions github-actions bot locked and limited conversation to collaborators Apr 17, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

No branches or pull requests

2 participants