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: @vitejs/plugin-vue not read updated code #508

Open
7 tasks done
Simon-He95 opened this issue Jan 17, 2025 · 1 comment
Open
7 tasks done

Bug: @vitejs/plugin-vue not read updated code #508

Simon-He95 opened this issue Jan 17, 2025 · 1 comment
Labels
bug Something isn't working feat: hmr

Comments

@Simon-He95
Copy link

Describe the bug

I want to make some updates to the code after hot update, but @vitejs/plugin-vue still reads the original code, causing the scoped index to not find the corresponding style

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    myPlugin() as any,
  ],
});

function myPlugin() {
  return {
    name: 'myplugin',
    enforce: 'pre',
    transform(code, id) {
      if (!/\.vue$/.test(id))
        return
      const css = `${code}\n<style scoped>div{color:red;}</style>`
      if (css) {
        return {
          code: css,
          map: null,
        }
      }
    },
    handleHotUpdate(ctx) {
      const read = ctx.read
      if (/\.vue$/.test(ctx.file)) {
        ctx.read = async () => {
          const code = await read()
          return `${code}\n<style scoped>div{color:red;}</style>`
        }
      }
    },
  }
}

Reproduction

https://stackblitz.com/edit/vitejs-vite-nmyrdmto?file=vite.config.ts,src%2FApp.vue

Steps to reproduce

npm run dev
update class and save

System Info

System:
    OS: macOS 14.5
    CPU: (10) arm64 Apple M1 Pro
    Memory: 136.30 MB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.16.0 - ~/.local/state/fnm_multishells/31127_1737095175498/bin/node
    Yarn: 1.22.22 - ~/.local/state/fnm_multishells/31127_1737095175498/bin/yarn
    npm: 10.8.1 - ~/.local/state/fnm_multishells/31127_1737095175498/bin/npm
    pnpm: 9.6.0 - ~/.local/state/fnm_multishells/31127_1737095175498/bin/pnpm
    bun: 1.1.21 - ~/.bun/bin/bun
    Watchman: 2024.09.09.00 - /opt/homebrew/bin/watchman
  Browsers:
    Chrome: 131.0.6778.266
    Safari: 17.5
  npmPackages:
    @vitejs/plugin-vue: ^5.2.1 => 5.2.1 
    vite: ^6.0.7 => 6.0.7

Used Package Manager

npm

Logs

No response

Validations

@sapphi-red sapphi-red transferred this issue from vitejs/vite Jan 18, 2025
@edison1105
Copy link
Member

Side note: It worked before v4.3.1. It stopped working after PR #227.

@edison1105 edison1105 added bug Something isn't working feat: hmr and removed pending triage labels Jan 20, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working feat: hmr
Projects
None yet
Development

No branches or pull requests

2 participants