underfin / vite-plugin-vue2

Vue2 plugin for Vite
620 stars 83 forks source link

fix: no corresponding SFC entry in the cache #155

Closed inkyMountain closed 2 years ago

inkyMountain commented 2 years ago

A reproduction can be viewed via: https://github.com/inkyMountain/vue2-vite

Reproduction steps:

npm i
npm run dev
open http://localhost:3000

When will this bug occur? Assuming we have a sfc named App.vue with a script block using src attribute like this:

<template>
<!--some html here-->
</template>

<script src="./appScript.ts">
</script>
// appScript.ts
import {add} from './utils'

console.log(add(1, 2))
export default {}
// utils.ts
export const add = (a: number, b: number) => a + b

The request for utils.ts will cause a bug cause its url looks like: /Users/chenyitao/dev/demos/vue2-vite/src/appScript.ts?vue&type=script&src&from=/Users/chenyitao/dev/demos/vue2-vite/src/App.vue&lang.ts

It's the request for utils.ts but end up with appScript.ts. The reason for this bug is that the from query contains slashes ( / ). The import statement in appScript.ts import {add} from './utils' will be transformed to:

import {add} from '/Users/chenyitao/dev/demos/vue2-vite/src/appScript.ts?vue&type=script&src&from=/Users/chenyitao/dev/demos/vue2-vite/src/App.vue&lang.ts'

The transforming works this way:

  1. vite-plugin-vue2 skips the transform for appScript.ts because its type is script instead of style or template.
  2. So vite:analysis-plugin takes over the transform.
  3. vite:import-analysis plugin call resolve method, so plugin container does a resolve action.
  4. vite:resolve plugin starts resolving, and one line of this plugin's code use path.dirname. The slashes in the query influence the result of path.dirname, which should transition from /foo/bar?from=/Users/foo/bar to /foo?from=/Users/foo/bar, but actually transition from /foo/bar?from=/Users/foo/bar to /foo/bar?from=/Users/foo.

A description in Chinese below. appScript.tsutils.ts 的引入路径 被 vite:resolve 插件错误地转换了,因为appScript.ts的请求路径中包含了from参数,参数的值里有 / ,但是没有被转译。vite:resolve 插件内部使用了path.dirname,这个方法被from参数中的 / 影响,输出了错误的结果。可以看一下我最上面贴的复现repo。

bazz commented 2 years ago

Just encountered same issue. Any plans to merge this fix?