Vue acts different locally than production

[mmeester]

Describe the bug

I have written a Vue 3 package with a component and a composable, the component uses the composable for logic and is exposed outside the app to be used on other parts of the actual application.

Vite Demo

The code of the implementation can be found here: https://github.com/mmeester/component-composable-demo

Expected behaviour
The state inside and outside the component is changed synchronous (reactive),

Actual local behaviour
❌ Both states are separated and change independently

Build / Production behaviour
✅ Works as expected and can be viewed here: https://unruffled-newton-d68d59.netlify.app/

Vue-CLI

I've also tried to run the same example with the vue CLI to see if this has anything to do with vue or particularly with vite. The code of the vue-cli can be found here: https://github.com/mmeester/component-composable-vue-demo

Expected behaviour
The state inside and outside the component is changed synchronous (reactive),

Actual local behaviour
✅ Works as expected

Build / Production behaviour
✅ Works as expected and can be viewed here: https://hopeful-sammet-11ef56.netlify.app/

Reproduction

1. Clone repo on: https://github.com/mmeester/component-composable-demo
2. npm i
3. npm run dev
4. open in browser and see mismatch in states

System Info

System:
    OS: macOS 12.0.1
    CPU: (10) arm64 Apple M1 Max
    Memory: 3.05 GB / 64.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.13.0 - ~/.nvm/versions/node/v16.13.0/bin/node
    Yarn: 1.22.15 - ~/.nvm/versions/node/v16.13.0/bin/yarn
    npm: 8.1.4 - ~/.nvm/versions/node/v16.13.0/bin/npm
  Browsers:
    Chrome: 96.0.4664.55
    Edge: 96.0.1054.43
    Firefox: 94.0.2
    Safari: 15.1
  npmPackages:
    @vitejs/plugin-vue: ^1.9.3 => 1.10.1
    vite: ^2.6.4 => 2.6.14

Used Package Manager

npm

Logs

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/vue-next instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[poyoho]

Because your package depends on vue, rebuilding vue causes the two component states not to share.

vite will pre-bundled packages, and the dependent packages do not declare dependent vue, so vite will rebuilding vue.

• will ignore your package on pre-bundled

export default defineConfig({
  plugins: [vue()],
  optimizeDeps: {
    exclude: [
      'component-composable'
    ]
  }
})

[mmeester]

Thanks @poyoho this fixes the issue, wonder if this should be documented somewhere.

[bluwy]

Possibly related to #26 and vitejs/vite#7454 (comment). I wonder if resolve.dedupe: ['vue'] would fix this too.

[bluwy]

Closing as this has a similar setup as vitejs/vite#7454 with the same core issue. And the issue has notes about Nuxt.

[bluwy]

My bad it looks like it's slightly different with the issue arising in dev only.