Skip to content

Difference in output between sfc playground and plugin-vue #631

@brc-dd

Description

@brc-dd

Related plugins

Describe the bug

<template>
  <!-- prettier-ignore -->
  <img srcset=" " />
</template>

is being transformed to

const __sfc__ = {  };
import { createCommentVNode as _createCommentVNode, createElementVNode as _createElementVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"

const _hoisted_1 = { srcset: " " }
function render(_ctx, _cache, $props, $setup, $data, $options) {
  return (_openBlock(), _createElementBlock(_Fragment, null, [
    _createCommentVNode(" prettier-ignore "),
    _createElementVNode("img", _hoisted_1)
  ], 2112 /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */))
}
__sfc__.render = render
__sfc__.__file = "src/App.vue"
export default __sfc__

on sfc playground

and

import { createHotContext as __vite__createHotContext } from "/@vite/client";import.meta.hot = __vite__createHotContext("/src/App.vue");const _sfc_main = {  }
import { createCommentVNode as _createCommentVNode, createElementVNode as _createElementVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from "/node_modules/.vite/deps/vue.js?v=302c3524"

const _hoisted_1 = 
const _hoisted_2 = { srcset: _hoisted_1 }

function _sfc_render(_ctx, _cache) {
  return (_openBlock(), _createElementBlock(_Fragment, null, [
    _createCommentVNode(" prettier-ignore "),
    _createElementVNode("img", _hoisted_2)
  ], 2112 /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */))
}

// hmr stuff...

with vite-plugin-vue.

Notice the broken syntax near const _hoisted_1 = . This shouldn't happen.

It is likely invalid HTML, but since the vue compiler doesn't generate invalid JS for it, vite plugin shouldn't either?

It might be possibly because vite-plugin-vue tries to import srcset.

downstream - vuejs/vitepress#4839

Reproduction

https://stackblitz.com/edit/vitejs-vite-mmydcsb3?file=src/App.vue

Steps to reproduce

Run dev and open browser console / network tab or just run build.

System Info

System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 20.19.1 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.8.2 - /usr/local/bin/npm
    pnpm: 8.15.6 - /usr/local/bin/pnpm
  npmPackages:
    @vitejs/plugin-vue: ^6.0.0 => 6.0.0 
    vite: ^7.0.4 => 7.0.4 
    vue: ^3.5.17 => 3.5.17

Used Package Manager

npm

Logs

No response

Validations

Metadata

Metadata

Assignees

No one assigned

    Type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions