// 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.tsimport {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:
vite-plugin-vue2 skips the transform for appScript.ts because its type is script instead of style or template.
So vite:analysis-plugin takes over the transform.
vite:import-analysis plugin call resolve method, so plugin container does a resolve action.
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.ts中 utils.ts 的引入路径 被 vite:resolve 插件错误地转换了,因为appScript.ts的请求路径中包含了from参数,参数的值里有 / ,但是没有被转译。vite:resolve 插件内部使用了path.dirname,这个方法被from参数中的 / 影响,输出了错误的结果。可以看一下我最上面贴的复现repo。
A reproduction can be viewed via: https://github.com/inkyMountain/vue2-vite
Reproduction steps:
When will this bug occur? Assuming we have a sfc named App.vue with a script block using src attribute like this:
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:The transforming works this way:
appScript.ts
because its type is script instead of style or template./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.ts
中utils.ts
的引入路径 被 vite:resolve 插件错误地转换了,因为appScript.ts
的请求路径中包含了from参数,参数的值里有 / ,但是没有被转译。vite:resolve 插件内部使用了path.dirname,这个方法被from参数中的 / 影响,输出了错误的结果。可以看一下我最上面贴的复现repo。