A error `[plugin:vite:vue-jsx] unknown: Unexpected token` occurs during hot reload. #423

ipcjs · 2024-07-08T16:39:07Z

Related plugins

Describe the bug

Describe

This commit introduced a bug: c891652

When modifying a file containing a type used by defineProps, it throws a [plugin:vite:vue-jsx] unknown: Unexpected token (4:12) error.

Analyse

The key line of code should be this：

vite-plugin-vue/packages/plugin-vue/src/handleHotUpdate.ts

Lines 344 to 349 in 7fc7994

    
           invalidateScript(file) 
        
           const mods = moduleGraph.getModulesByFile(file) 
        
           if (mods) { 
        
             const arr = [...mods] 
        
             affected.add(getScriptModule(arr) || getMainModule(arr)) 
        
           }

It cleared the cache of the <script> block, but only reloaded the <script> block itself without reloading the entire Vue file. As a result, the load method couldn't read the <script> block.

Reproduction

https://github.com/ipcjs/vite-plugin-vue-type-dep-change-bug

Steps to reproduce

pnpm dev
Open the local dev page in the browser
Manually modify the return value of the Position.toString() method

System Info

System:
    OS: macOS 14.5
    CPU: (8) arm64 Apple M1
    Memory: 51.89 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.20.2 - /opt/homebrew/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 10.5.0 - /opt/homebrew/bin/npm
    pnpm: 8.15.4 - /opt/homebrew/bin/pnpm
    bun: 1.0.7 - /opt/homebrew/bin/bun
  Browsers:
    Chrome: 126.0.6478.127
    Safari: 17.5
  npmPackages:
    @vitejs/plugin-vue: ^5.0.5 => 5.0.5 
    @vitejs/plugin-vue-jsx: ^4.0.0 => 4.0.0 
    vite: ^5.3.1 => 5.3.3

Used Package Manager

pnpm

Logs

Click to expand!

ipcjs@ipcjs-Mac-mini /Volumes/Data/github/@vue/demos/vue-jsx-bug (main*)
$ pnpm dev --debug

> [email protected] dev /Volumes/Data/github/@vue/demos/vue-jsx-bug
> vite "--debug"

  vite:config bundled config file loaded in 290.59ms +0ms
  vite:config using resolved config: {
  vite:config   plugins: [
  vite:config     'vite:optimized-deps',
  vite:config     'vite:watch-package-data',
  vite:config     'vite:pre-alias',
  vite:config     'alias',
  vite:config     'vite:modulepreload-polyfill',
  vite:config     'vite:resolve',
  vite:config     'vite:html-inline-proxy',
  vite:config     'vite:css',
  vite:config     'vite:esbuild',
  vite:config     'vite:json',
  vite:config     'vite:wasm-helper',
  vite:config     'vite:worker',
  vite:config     'vite:asset',
  vite:config     'vite:vue',
  vite:config     'vite:vue-jsx',
  vite:config     'vite:wasm-fallback',
  vite:config     'vite:define',
  vite:config     'vite:css-post',
  vite:config     'vite:worker-import-meta-url',
  vite:config     'vite:asset-import-meta-url',
  vite:config     'vite:dynamic-import-vars',
  vite:config     'vite:import-glob',
  vite:config     'vite:client-inject',
  vite:config     'vite:css-analysis',
  vite:config     'vite:import-analysis'
  vite:config   ],
  vite:config   resolve: {
  vite:config     mainFields: [ 'browser', 'module', 'jsnext:main', 'jsnext' ],
  vite:config     conditions: [],
  vite:config     extensions: [
  vite:config       '.mjs',  '.js',
  vite:config       '.mts',  '.ts',
  vite:config       '.jsx',  '.tsx',
  vite:config       '.json'
  vite:config     ],
  vite:config     dedupe: [ 'vue' ],
  vite:config     preserveSymlinks: false,
  vite:config     alias: [ [Object], [Object], [Object] ]
  vite:config   },
  vite:config   optimizeDeps: {
  vite:config     holdUntilCrawlEnd: true,
  vite:config     force: undefined,
  vite:config     esbuildOptions: { preserveSymlinks: false }
  vite:config   },
  vite:config   server: {
  vite:config     preTransformRequests: true,
  vite:config     host: undefined,
  vite:config     sourcemapIgnoreList: [Function: isInNodeModules$1],
  vite:config     middlewareMode: false,
  vite:config     fs: {
  vite:config       strict: true,
  vite:config       allow: [Array],
  vite:config       deny: [Array],
  vite:config       cachedChecks: undefined
  vite:config     }
  vite:config   },
  vite:config   define: {
  vite:config     __VUE_OPTIONS_API__: true,
  vite:config     __VUE_PROD_DEVTOOLS__: false,
  vite:config     __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: false
  vite:config   },
  vite:config   ssr: {
  vite:config     target: 'node',
  vite:config     external: [],
  vite:config     optimizeDeps: { noDiscovery: true, esbuildOptions: [Object] }
  vite:config   },
  vite:config   esbuild: { jsxDev: true, include: /\.ts$/ },
  vite:config   configFile: '/Volumes/Data/github/@vue/demos/vue-jsx-bug/vite.config.ts',
  vite:config   configFileDependencies: [ '/Volumes/Data/github/@vue/demos/vue-jsx-bug/vite.config.ts' ],
  vite:config   inlineConfig: {
  vite:config     root: undefined,
  vite:config     base: undefined,
  vite:config     mode: undefined,
  vite:config     configFile: undefined,
  vite:config     logLevel: undefined,
  vite:config     clearScreen: undefined,
  vite:config     optimizeDeps: { force: undefined },
  vite:config     server: { host: undefined }
  vite:config   },
  vite:config   root: '/Volumes/Data/github/@vue/demos/vue-jsx-bug',
  vite:config   base: '/',
  vite:config   rawBase: '/',
  vite:config   publicDir: '/Volumes/Data/github/@vue/demos/vue-jsx-bug/public',
  vite:config   cacheDir: '/Volumes/Data/github/@vue/demos/vue-jsx-bug/node_modules/.vite',
  vite:config   command: 'serve',
  vite:config   mode: 'development',
  vite:config   isWorker: false,
  vite:config   mainConfig: null,
  vite:config   bundleChain: [],
  vite:config   isProduction: false,
  vite:config   css: { lightningcss: undefined },
  vite:config   build: {
  vite:config     target: [ 'es2020', 'edge88', 'firefox78', 'chrome87', 'safari14' ],
  vite:config     cssTarget: [ 'es2020', 'edge88', 'firefox78', 'chrome87', 'safari14' ],
  vite:config     outDir: 'dist',
  vite:config     assetsDir: 'assets',
  vite:config     assetsInlineLimit: 4096,
  vite:config     cssCodeSplit: true,
  vite:config     sourcemap: false,
  vite:config     rollupOptions: {},
  vite:config     minify: 'esbuild',
  vite:config     terserOptions: {},
  vite:config     write: true,
  vite:config     emptyOutDir: null,
  vite:config     copyPublicDir: true,
  vite:config     manifest: false,
  vite:config     lib: false,
  vite:config     ssr: false,
  vite:config     ssrManifest: false,
  vite:config     ssrEmitAssets: false,
  vite:config     reportCompressedSize: true,
  vite:config     chunkSizeWarningLimit: 500,
  vite:config     watch: null,
  vite:config     commonjsOptions: { include: [Array], extensions: [Array] },
  vite:config     dynamicImportVarsOptions: { warnOnError: true, exclude: [Array] },
  vite:config     modulePreload: { polyfill: true },
  vite:config     cssMinify: true
  vite:config   },
  vite:config   preview: {
  vite:config     port: undefined,
  vite:config     strictPort: undefined,
  vite:config     host: undefined,
  vite:config     https: undefined,
  vite:config     open: undefined,
  vite:config     proxy: undefined,
  vite:config     cors: undefined,
  vite:config     headers: undefined
  vite:config   },
  vite:config   envDir: '/Volumes/Data/github/@vue/demos/vue-jsx-bug',
  vite:config   env: { BASE_URL: '/', MODE: 'development', DEV: true, PROD: false },
  vite:config   assetsInclude: [Function: assetsInclude],
  vite:config   logger: {
  vite:config     hasWarned: false,
  vite:config     info: [Function: info],
  vite:config     warn: [Function: warn],
  vite:config     warnOnce: [Function: warnOnce],
  vite:config     error: [Function: error],
  vite:config     clearScreen: [Function: clearScreen],
  vite:config     hasErrorLogged: [Function: hasErrorLogged]
  vite:config   },
  vite:config   packageCache: Map(1) {
  vite:config     'fnpd_/Volumes/Data/github/@vue/demos/vue-jsx-bug' => {
  vite:config       dir: '/Volumes/Data/github/@vue/demos/vue-jsx-bug',
  vite:config       data: [Object],
  vite:config       hasSideEffects: [Function: hasSideEffects],
  vite:config       webResolvedImports: {},
  vite:config       nodeResolvedImports: {},
  vite:config       setResolvedCache: [Function: setResolvedCache],
  vite:config       getResolvedCache: [Function: getResolvedCache]
  vite:config     },
  vite:config     set: [Function (anonymous)]
  vite:config   },
  vite:config   createResolver: [Function: createResolver],
  vite:config   worker: { format: 'iife', plugins: '() => plugins', rollupOptions: {} },
  vite:config   appType: 'spa',
  vite:config   experimental: { importGlobRestoreExtension: false, hmrPartialAccept: false },
  vite:config   getSortedPlugins: [Function: getSortedPlugins],
  vite:config   getSortedPluginHooks: [Function: getSortedPluginHooks]
  vite:config } +4ms
  vite:deps Hash is consistent. Skipping. Use --force to override. +0ms

  VITE v5.3.3  ready in 395 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help
  vite:time 2.20ms / +0ms
  vite:html-fallback Rewriting GET / to /index.html +0ms
  vite:time 27.18ms /index.html +52ms
  vite:resolve 2.84ms /src/main.ts -> /Volumes/Data/github/@vue/demos/vue-jsx-bug/src/main.ts +0ms
  vite:load 5.01ms [fs] /src/main.ts +0ms
  vite:resolve 0.36ms /@vite/client -> /Volumes/Data/github/@vue/demos/vue-jsx-bug/node_modules/.pnpm/[email protected]_@[email protected]/node_modules/vite/dist/client/client.mjs +99ms
  vite:load 61.03ms [fs] /@vite/client +155ms
  vite:resolve 0.16ms @vite/env -> /Volumes/Data/github/@vue/demos/vue-jsx-bug/node_modules/.pnpm/[email protected]_@[email protected]/node_modules/vite/dist/client/env.mjs +114ms
  vite:import-analysis 5.50ms [1 imports rewritten] node_modules/.pnpm/[email protected]_@[email protected]/node_modules/vite/dist/client/client.mjs +0ms
  vite:transform 49.58ms /@vite/client +0ms
  vite:time 117.98ms /@vite/client +218ms
  vite:resolve 1.61ms ./assets/main.css -> /Volumes/Data/github/@vue/demos/vue-jsx-bug/src/assets/main.css +8ms
  vite:resolve 1.79ms ./App.vue -> /Volumes/Data/github/@vue/demos/vue-jsx-bug/src/App.vue +0ms
  vite:resolve 2.10ms vue -> /Volumes/Data/github/@vue/demos/vue-jsx-bug/node_modules/.vite/deps/vue.js?v=98af54ad +0ms
  vite:optimize-deps load /Volumes/Data/github/@vue/demos/vue-jsx-bug/node_modules/.vite/deps/vue.js +0ms
  vite:import-analysis 3.12ms [3 imports rewritten] src/main.ts +7ms
  vite:transform 215.75ms /src/main.ts +6ms
  vite:time 148.13ms /src/main.ts +6ms
  vite:load 4.25ms [plugin] /node_modules/.vite/deps/vue.js?v=98af54ad +66ms
  vite:import-analysis 12.27ms [no imports] node_modules/.vite/deps/vue.js?v=98af54ad +30ms
  vite:transform 25.50ms /node_modules/.vite/deps/vue.js?v=98af54ad +30ms
  vite:load 31.54ms [fs] /src/assets/main.css +27ms
  vite:load 33.95ms [fs] /src/App.vue +3ms
  vite:load 74.41ms [fs] /node_modules/.pnpm/[email protected]_@[email protected]/node_modules/vite/dist/client/env.mjs +34ms
  vite:import-analysis 2.43ms [no imports] node_modules/.pnpm/[email protected]_@[email protected]/node_modules/vite/dist/client/env.mjs +41ms
  vite:transform 2.91ms /node_modules/.pnpm/[email protected]_@[email protected]/node_modules/vite/dist/client/env.mjs +41ms
  vite:cache [304] /node_modules/.pnpm/[email protected]_@[email protected]/node_modules/vite/dist/client/env.mjs +0ms
  vite:time 0.31ms /node_modules/.pnpm/[email protected]_@[email protected]/node_modules/vite/dist/client/env.mjs +72ms
  vite:resolve 0.57ms ./components/HelloWorld.vue -> /Volumes/Data/github/@vue/demos/vue-jsx-bug/src/components/HelloWorld.vue +83ms
  vite:resolve 0.64ms ./components/TheWelcome.vue -> /Volumes/Data/github/@vue/demos/vue-jsx-bug/src/components/TheWelcome.vue +0ms
  vite:cache [memory] /node_modules/.vite/deps/vue.js?v=98af54ad +0ms
  vite:hmr [self-accepts] src/App.vue +0ms
  vite:import-analysis 3.79ms [5 imports rewritten] src/App.vue +14ms
  vite:transform 51.23ms /src/App.vue +14ms
  vite:time 11.89ms /src/App.vue +13ms
  vite:load 1.75ms [plugin] /src/App.vue?vue&type=style&index=0&scoped=7a7a37b1&lang.css +18ms
  vite:load 2.99ms [plugin] plugin-vue:export-helper +2ms
  vite:import-analysis 0.03ms [no imports] plugin-vue:export-helper +23ms
  vite:transform 20.12ms plugin-vue:export-helper +23ms
  vite:hmr [self-accepts] src/App.vue?vue&type=style&index=0&scoped=7a7a37b1&lang.css +24ms
  vite:import-analysis 0.36ms [0 imports rewritten] src/App.vue?vue&type=style&index=0&scoped=7a7a37b1&lang.css +0ms
  vite:transform 22.40ms /src/App.vue?vue&type=style&index=0&scoped=7a7a37b1&lang.css +0ms
  vite:cache [304] /src/App.vue?vue&type=style&index=0&scoped=7a7a37b1&lang.css +42ms
  vite:time 0.30ms /src/App.vue?vue&type=style&index=0&scoped=7a7a37b1&lang.css +29ms
  vite:cache [304] /@id/__x00__plugin-vue:export-helper +8ms
  vite:time 0.40ms /@id/__x00__plugin-vue:export-helper +9ms
  vite:load 38.70ms [fs] /src/components/HelloWorld.vue +35ms
  vite:load 202.23ms [fs] /src/components/TheWelcome.vue +163ms
  vite:cache [memory] /node_modules/.vite/deps/vue.js?v=98af54ad +213ms
  vite:cache [memory] plugin-vue:export-helper +0ms
  vite:hmr [self-accepts] src/components/HelloWorld.vue +189ms
  vite:import-analysis 0.92ms [4 imports rewritten] src/components/HelloWorld.vue +189ms
  vite:transform 174.36ms /src/components/HelloWorld.vue +189ms
  vite:time 176.15ms /src/components/HelloWorld.vue +174ms
  vite:load 0.77ms [plugin] /src/components/HelloWorld.vue?vue&type=script&setup=true&lang.tsx +12ms
  vite:load 1.52ms [plugin] /src/components/HelloWorld.vue?vue&type=style&index=0&scoped=e17ea971&lang.css +1ms
  vite:hmr [self-accepts] src/components/HelloWorld.vue?vue&type=style&index=0&scoped=e17ea971&lang.css +69ms
  vite:import-analysis 0.18ms [0 imports rewritten] src/components/HelloWorld.vue?vue&type=style&index=0&scoped=e17ea971&lang.css +69ms
  vite:transform 66.91ms /src/components/HelloWorld.vue?vue&type=style&index=0&scoped=e17ea971&lang.css +69ms
  vite:cache [memory] /node_modules/.vite/deps/vue.js?v=98af54ad +69ms
  vite:import-analysis 0.15ms [1 imports rewritten] src/components/HelloWorld.vue?vue&type=script&setup=true&lang.tsx +0ms
  vite:transform 67.86ms /src/components/HelloWorld.vue?vue&type=script&setup=true&lang.tsx +0ms
  vite:resolve 0.11ms ./base.css -> /Volumes/Data/github/@vue/demos/vue-jsx-bug/src/assets/base.css +286ms
  vite:cache [304] /src/components/HelloWorld.vue?vue&type=style&index=0&scoped=e17ea971&lang.css +248ms
  vite:time 0.13ms /src/components/HelloWorld.vue?vue&type=style&index=0&scoped=e17ea971&lang.css +73ms
  vite:cache [304] /src/components/HelloWorld.vue?vue&type=script&setup=true&lang.tsx +0ms
  vite:time 0.04ms /src/components/HelloWorld.vue?vue&type=script&setup=true&lang.tsx +0ms
  vite:resolve 0.39ms ./WelcomeItem.vue -> /Volumes/Data/github/@vue/demos/vue-jsx-bug/src/components/WelcomeItem.vue +6ms
  vite:resolve 0.44ms ./icons/IconDocumentation.vue -> /Volumes/Data/github/@vue/demos/vue-jsx-bug/src/components/icons/IconDocumentation.vue +0ms
  vite:resolve 0.45ms ./icons/IconTooling.vue -> /Volumes/Data/github/@vue/demos/vue-jsx-bug/src/components/icons/IconTooling.vue +0ms
  vite:resolve 0.46ms ./icons/IconEcosystem.vue -> /Volumes/Data/github/@vue/demos/vue-jsx-bug/src/components/icons/IconEcosystem.vue +0ms
  vite:resolve 0.47ms ./icons/IconCommunity.vue -> /Volumes/Data/github/@vue/demos/vue-jsx-bug/src/components/icons/IconCommunity.vue +0ms
  vite:resolve 0.47ms ./icons/IconSupport.vue -> /Volumes/Data/github/@vue/demos/vue-jsx-bug/src/components/icons/IconSupport.vue +0ms
  vite:cache [memory] /node_modules/.vite/deps/vue.js?v=98af54ad +8ms
  vite:cache [memory] plugin-vue:export-helper +0ms
  vite:hmr [self-accepts] src/components/TheWelcome.vue +8ms
  vite:import-analysis 1.43ms [8 imports rewritten] src/components/TheWelcome.vue +9ms
  vite:transform 88.14ms /src/components/TheWelcome.vue +9ms
  vite:time 259.18ms /src/components/TheWelcome.vue +5ms
  vite:hmr [self-accepts] src/assets/main.css +5ms
  vite:import-analysis 0.23ms [0 imports rewritten] src/assets/main.css +4ms
  vite:transform 347.71ms /src/assets/main.css +4ms
  vite:time 306.80ms /src/assets/main.css +4ms
  vite:load 6.62ms [fs] /src/components/WelcomeItem.vue +82ms
  vite:cache [memory] /node_modules/.vite/deps/vue.js?v=98af54ad +10ms
  vite:cache [memory] plugin-vue:export-helper +1ms
  vite:hmr [self-accepts] src/components/WelcomeItem.vue +6ms
  vite:import-analysis 0.96ms [3 imports rewritten] src/components/WelcomeItem.vue +6ms
  vite:transform 3.95ms /src/components/WelcomeItem.vue +6ms
  vite:time 4.60ms /src/components/WelcomeItem.vue +6ms
  vite:load 4.77ms [plugin] /src/components/WelcomeItem.vue?vue&type=style&index=0&scoped=bd9b3c35&lang.css +9ms
  vite:hmr [self-accepts] src/components/WelcomeItem.vue?vue&type=style&index=0&scoped=bd9b3c35&lang.css +9ms
  vite:import-analysis 0.34ms [0 imports rewritten] src/components/WelcomeItem.vue?vue&type=style&index=0&scoped=bd9b3c35&lang.css +10ms
  vite:transform 5.09ms /src/components/WelcomeItem.vue?vue&type=style&index=0&scoped=bd9b3c35&lang.css +10ms
  vite:load 20.72ms [fs] /src/components/icons/IconTooling.vue +5ms
  vite:cache [memory] /node_modules/.vite/deps/vue.js?v=98af54ad +12ms
  vite:cache [memory] plugin-vue:export-helper +0ms
  vite:hmr [self-accepts] src/components/icons/IconTooling.vue +3ms
  vite:import-analysis 0.29ms [2 imports rewritten] src/components/icons/IconTooling.vue +2ms
  vite:transform 2.23ms /src/components/icons/IconTooling.vue +2ms
  vite:time 17.18ms /src/components/icons/IconTooling.vue +12ms
  vite:load 23.16ms [fs] /src/components/icons/IconCommunity.vue +3ms
  vite:cache [memory] /node_modules/.vite/deps/vue.js?v=98af54ad +2ms
  vite:cache [memory] plugin-vue:export-helper +0ms
  vite:hmr [self-accepts] src/components/icons/IconCommunity.vue +2ms
  vite:import-analysis 0.52ms [2 imports rewritten] src/components/icons/IconCommunity.vue +3ms
  vite:transform 2.10ms /src/components/icons/IconCommunity.vue +3ms
  vite:time 19.46ms /src/components/icons/IconCommunity.vue +3ms
  vite:load 25.55ms [fs] /src/components/icons/IconDocumentation.vue +2ms
  vite:cache [memory] /node_modules/.vite/deps/vue.js?v=98af54ad +3ms
  vite:cache [memory] plugin-vue:export-helper +0ms
  vite:hmr [self-accepts] src/components/icons/IconDocumentation.vue +3ms
  vite:import-analysis 0.47ms [2 imports rewritten] src/components/icons/IconDocumentation.vue +2ms
  vite:transform 2.15ms /src/components/icons/IconDocumentation.vue +2ms
  vite:time 22.37ms /src/components/icons/IconDocumentation.vue +2ms
  vite:load 28.00ms [fs] /src/components/icons/IconSupport.vue +2ms
  vite:cache [memory] /node_modules/.vite/deps/vue.js?v=98af54ad +2ms
  vite:cache [memory] plugin-vue:export-helper +0ms
  vite:hmr [self-accepts] src/components/icons/IconSupport.vue +2ms
  vite:import-analysis 0.52ms [2 imports rewritten] src/components/icons/IconSupport.vue +3ms
  vite:transform 2.06ms /src/components/icons/IconSupport.vue +3ms
  vite:time 24.79ms /src/components/icons/IconSupport.vue +3ms
  vite:load 32.00ms [fs] /src/components/icons/IconEcosystem.vue +4ms
  vite:cache [memory] /node_modules/.vite/deps/vue.js?v=98af54ad +4ms
  vite:cache [memory] plugin-vue:export-helper +0ms
  vite:hmr [self-accepts] src/components/icons/IconEcosystem.vue +4ms
  vite:import-analysis 0.27ms [2 imports rewritten] src/components/icons/IconEcosystem.vue +3ms
  vite:transform 1.91ms /src/components/icons/IconEcosystem.vue +4ms
  vite:time 27.56ms /src/components/icons/IconEcosystem.vue +4ms
  vite:cache [304] /src/components/WelcomeItem.vue?vue&type=style&index=0&scoped=bd9b3c35&lang.css +43ms
  vite:time 0.32ms /src/components/WelcomeItem.vue?vue&type=style&index=0&scoped=bd9b3c35&lang.css +4ms
  vite:time 3.92ms /src/assets/logo.svg +10ms
  vite:time 0.39ms /favicon.ico +71ms
  vite:hmr [file change] src/components/data.ts +4s
12:22:04 AM [vite] hmr update /src/components/HelloWorld.vue
  vite:cache [memory-hmr] /src/components/HelloWorld.vue +4s
  vite:cache [memory] /node_modules/.vite/deps/vue.js?v=98af54ad +0ms
  vite:cache [memory] /src/components/HelloWorld.vue?vue&type=style&index=0&scoped=e17ea971&lang.css +0ms
  vite:cache [memory] plugin-vue:export-helper +0ms
  vite:time 2.47ms /src/components/HelloWorld.vue +4s
  vite:load 2.59ms [fs] /src/components/HelloWorld.vue?vue&type=script&setup=true&lang.tsx +4s
12:22:04 AM [vite] Pre-transform error: unknown: Unexpected token (4:12)

  2 | import type { Position } from './data';
  3 |
> 4 | defineProps<{
    |             ^
  5 |   msg: string
  6 |   position?: Position
  7 | }>()
12:22:04 AM [vite] Pre-transform error: unknown: Unexpected token (4:12)

  2 | import type { Position } from './data';
  3 |
> 4 | defineProps<{
    |             ^
  5 |   msg: string
  6 |   position?: Position
  7 | }>() (x2)
  vite:load 0.26ms [fs] /src/components/HelloWorld.vue?vue&type=script&setup=true&lang.tsx +21ms
12:22:04 AM [vite] Internal server error: unknown: Unexpected token (4:12)

  2 | import type { Position } from './data';
  3 |
> 4 | defineProps<{
    |             ^
  5 |   msg: string
  6 |   position?: Position
  7 | }>()
  Plugin: vite:vue-jsx
  File: /Volumes/Data/github/@vue/demos/vue-jsx-bug/src/components/HelloWorld.vue?vue&type=script&setup=true&lang.tsx:4:12
  2  |  import type { Position } from './data';
  3  |  
  4  |  defineProps<{
     |              ^
  5  |    msg: string
  6  |    position?: Position
      at constructor (/Volumes/Data/github/@vue/demos/vue-jsx-bug/node_modules/.pnpm/@[email protected]/node_modules/@babel/parser/lib/index.js:351:19)
      at TypeScriptParserMixin.raise (/Volumes/Data/github/@vue/demos/vue-jsx-bug/node_modules/.pnpm/@[email protected]/node_modules/@babel/parser/lib/index.js:3233:19)
      at TypeScriptParserMixin.unexpected (/Volumes/Data/github/@vue/demos/vue-jsx-bug/node_modules/.pnpm/@[email protected]/node_modules/@babel/parser/lib/index.js:3253:16)
      at TypeScriptParserMixin.jsxParseIdentifier (/Volumes/Data/github/@vue/demos/vue-jsx-bug/node_modules/.pnpm/@[email protected]/node_modules/@babel/parser/lib/index.js:6586:12)
      at TypeScriptParserMixin.jsxParseNamespacedName (/Volumes/Data/github/@vue/demos/vue-jsx-bug/node_modules/.pnpm/@[email protected]/node_modules/@babel/parser/lib/index.js:6593:23)
      at TypeScriptParserMixin.jsxParseElementName (/Volumes/Data/github/@vue/demos/vue-jsx-bug/node_modules/.pnpm/@[email protected]/node_modules/@babel/parser/lib/index.js:6602:21)
      at TypeScriptParserMixin.jsxParseOpeningElementAt (/Volumes/Data/github/@vue/demos/vue-jsx-bug/node_modules/.pnpm/@[email protected]/node_modules/@babel/parser/lib/index.js:6678:22)
      at TypeScriptParserMixin.jsxParseElementAt (/Volumes/Data/github/@vue/demos/vue-jsx-bug/node_modules/.pnpm/@[email protected]/node_modules/@babel/parser/lib/index.js:6703:33)
      at TypeScriptParserMixin.jsxParseElementAt (/Volumes/Data/github/@vue/demos/vue-jsx-bug/node_modules/.pnpm/@[email protected]/node_modules/@babel/parser/lib/index.js:6715:32)
      at TypeScriptParserMixin.jsxParseElement (/Volumes/Data/github/@vue/demos/vue-jsx-bug/node_modules/.pnpm/@[email protected]/node_modules/@babel/parser/lib/index.js:6766:17)
      at TypeScriptParserMixin.parseExprAtom (/Volumes/Data/github/@vue/demos/vue-jsx-bug/node_modules/.pnpm/@[email protected]/node_modules/@babel/parser/lib/index.js:6776:19)
      at TypeScriptParserMixin.parseExprSubscripts (/Volumes/Data/github/@vue/demos/vue-jsx-bug/node_modules/.pnpm/@[email protected]/node_modules/@babel/parser/lib/index.js:10568:23)
      at TypeScriptParserMixin.parseUpdate (/Volumes/Data/github/@vue/demos/vue-jsx-bug/node_modules/.pnpm/@[email protected]/node_modules/@babel/parser/lib/index.js:10551:21)
      at TypeScriptParserMixin.parseMaybeUnary (/Volumes/Data/github/@vue/demos/vue-jsx-bug/node_modules/.pnpm/@[email protected]/node_modules/@babel/parser/lib/index.js:10529:23)
      at TypeScriptParserMixin.parseMaybeUnary (/Volumes/Data/github/@vue/demos/vue-jsx-bug/node_modules/.pnpm/@[email protected]/node_modules/@babel/parser/lib/index.js:9430:18)
      at TypeScriptParserMixin.parseMaybeUnaryOrPrivate (/Volumes/Data/github/@vue/demos/vue-jsx-bug/node_modules/.pnpm/@[email protected]/node_modules/@babel/parser/lib/index.js:10383:61)
      at TypeScriptParserMixin.parseExprOps (/Volumes/Data/github/@vue/demos/vue-jsx-bug/node_modules/.pnpm/@[email protected]/node_modules/@babel/parser/lib/index.js:10388:23)
      at TypeScriptParserMixin.parseMaybeConditional (/Volumes/Data/github/@vue/demos/vue-jsx-bug/node_modules/.pnpm/@[email protected]/node_modules/@babel/parser/lib/index.js:10365:23)
      at TypeScriptParserMixin.parseMaybeAssign (/Volumes/Data/github/@vue/demos/vue-jsx-bug/node_modules/.pnpm/@[email protected]/node_modules/@babel/parser/lib/index.js:10326:21)
      at /Volumes/Data/github/@vue/demos/vue-jsx-bug/node_modules/.pnpm/@[email protected]/node_modules/@babel/parser/lib/index.js:9368:39
      at TypeScriptParserMixin.tryParse (/Volumes/Data/github/@vue/demos/vue-jsx-bug/node_modules/.pnpm/@[email protected]/node_modules/@babel/parser/lib/index.js:3564:20)
      at TypeScriptParserMixin.parseMaybeAssign (/Volumes/Data/github/@vue/demos/vue-jsx-bug/node_modules/.pnpm/@[email protected]/node_modules/@babel/parser/lib/index.js:9368:18)
      at TypeScriptParserMixin.parseExpressionBase (/Volumes/Data/github/@vue/demos/vue-jsx-bug/node_modules/.pnpm/@[email protected]/node_modules/@babel/parser/lib/index.js:10280:23)
      at /Volumes/Data/github/@vue/demos/vue-jsx-bug/node_modules/.pnpm/@[email protected]/node_modu
... and 26 lines more
  vite:time 6.03ms /src/components/HelloWorld.vue?vue&type=script&setup=true&lang.tsx +29ms

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 vuejs/core 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.

The text was updated successfully, but these errors were encountered:

gaoyuqing18 · 2024-07-18T08:31:35Z

I encountered the same error

yesw6a · 2024-07-25T05:06:03Z

same problem

li2392679534 · 2024-08-14T03:00:32Z

same

li2392679534 · 2024-08-14T03:08:20Z

After I tried to replace the tsx here with ts, the hot update no longer reported an error. Because I did not use the tsx syntax in my vue file, but I declared lang as tsx, so I changed it to ts and there was no error reported anymore.

sgpinkus · 2024-10-29T04:58:23Z

Same issue. It's not just defineProps. It was happening to me when importing ComputedRef too. Crashing dev server constantly.

li2392679534 · 2024-10-29T04:58:56Z

您好，泡泡龙已收到您的邮件。

edison1105 · 2024-10-29T05:39:35Z

@sgpinkus
Try this #446 (comment) preview packages

songpeng154 · 2024-11-05T02:27:46Z

edison1105 · 2024-11-05T02:54:23Z

@songpeng154
It seems not the same as this one. Please follow the issue requirement and create a new one.

songpeng154 · 2024-11-05T08:55:44Z

@songpeng154 好像和这个不一样。请按照问题要求创建一个新的。

@edison1105 之前创建了，然后被关闭了，组件太复杂了我这边没法提供复现链接，不好意思。

songpeng154 · 2024-11-05T09:05:42Z

@edison1105 https://github.com/vitejs/vite-plugin-vue/issues/442

edison1105 · 2024-11-05T09:15:49Z

@songpeng154 好像和这个不一样。请按照问题要求创建一个新的。

@edison1105 之前创建了，然后被关闭了，组件太复杂了我这边没法提供复现链接，不好意思。

没有复现就很难处理了。
你可以尝试一点一点的删除部分代码，保留一个最小的可复现 demo。
或者可以尝试 #446 (comment) 这里的预览版本。看看能不能解决你的问题。

songpeng154 · 2024-11-05T09:24:56Z

@songpeng154希望和这个不一样。请按照问题要求创建一个新的。

@edison1105创建之前，然后就被关闭了，组件变得太复杂了，我无法提供恢复链接，不好意思。

复现就很难处理了。你可以尝试一点一点的删除部分代码，保留一个最小的可复现演示。或者可以尝试#446（评论）这里的预览版本。看看能否解决你的问题。
我先试试

songpeng154 · 2024-11-06T06:04:45Z

@songpeng154 好像和这个不一样。请按照问题要求创建一个新的。

@edison1105 之前创建了，然后被关闭了，组件太复杂了我这边没法提供复现链接，不好意思。

没有复现就很难处理了。你可以尝试一点一点的删除部分代码，保留一个最小的可复现 demo。或者可以尝试 #446 (comment) 这里的预览版本。看看能不能解决你的问题。

@edison1105 好像不报错了，我调试的过程中没有出现过热更新错误了

edison1105 · 2024-11-06T06:31:53Z

@songpeng154
感谢你的回复。我已经将 main 分支 merge 到 #446 上了，在 #446 没有 merge 到 main 之前你可以先使用 #446 的预览包

ipcjs added the pending triage label Jul 8, 2024

ipcjs changed the title ~~A error [plugin:vite:vue-jsx] unknown: Unexpected token (4:12) occurs during hot reload.~~ A error [plugin:vite:vue-jsx] unknown: Unexpected token occurs during hot reload. Jul 8, 2024

edison1105 added p4-important ❗ Violate documented behavior or significantly improves performance (priority) and removed pending triage labels Sep 19, 2024

edison1105 linked a pull request Sep 19, 2024 that will close this issue

fix(hmr): re-resolve script after type dep changed #446

Open

9 tasks

edison1105 added p3-minor-bug 🔨 An edge case that only affects very specific usage (priority) and removed p4-important ❗ Violate documented behavior or significantly improves performance (priority) labels Sep 19, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

A error `[plugin:vite:vue-jsx] unknown: Unexpected token` occurs during hot reload. #423

A error `[plugin:vite:vue-jsx] unknown: Unexpected token` occurs during hot reload. #423

ipcjs commented Jul 8, 2024 •

edited

Loading

gaoyuqing18 commented Jul 18, 2024

yesw6a commented Jul 25, 2024

li2392679534 commented Aug 14, 2024

li2392679534 commented Aug 14, 2024

sgpinkus commented Oct 29, 2024

li2392679534 commented Oct 29, 2024 via email

edison1105 commented Oct 29, 2024

songpeng154 commented Nov 5, 2024

edison1105 commented Nov 5, 2024

songpeng154 commented Nov 5, 2024 •

edited

Loading

songpeng154 commented Nov 5, 2024

edison1105 commented Nov 5, 2024

songpeng154 commented Nov 5, 2024

songpeng154 commented Nov 6, 2024

edison1105 commented Nov 6, 2024

A error [plugin:vite:vue-jsx] unknown: Unexpected token occurs during hot reload. #423

A error [plugin:vite:vue-jsx] unknown: Unexpected token occurs during hot reload. #423

Comments

ipcjs commented Jul 8, 2024 • edited Loading

Related plugins

Describe the bug

Describe

Analyse

Reproduction

Steps to reproduce

System Info

Used Package Manager

Logs

Validations

gaoyuqing18 commented Jul 18, 2024

yesw6a commented Jul 25, 2024

li2392679534 commented Aug 14, 2024

li2392679534 commented Aug 14, 2024

sgpinkus commented Oct 29, 2024

li2392679534 commented Oct 29, 2024 via email

edison1105 commented Oct 29, 2024

songpeng154 commented Nov 5, 2024

edison1105 commented Nov 5, 2024

songpeng154 commented Nov 5, 2024 • edited Loading

songpeng154 commented Nov 5, 2024

edison1105 commented Nov 5, 2024

songpeng154 commented Nov 5, 2024

songpeng154 commented Nov 6, 2024

edison1105 commented Nov 6, 2024

A error `[plugin:vite:vue-jsx] unknown: Unexpected token` occurs during hot reload. #423

A error `[plugin:vite:vue-jsx] unknown: Unexpected token` occurs during hot reload. #423

ipcjs commented Jul 8, 2024 •

edited

Loading

songpeng154 commented Nov 5, 2024 •

edited

Loading