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

导入类型时省略.tsx后缀,在defineProps<>中使用导入的类型,会提示Failed to resolve import source "xxxx" #10635

Closed
liudaodanOo opened this issue Apr 2, 2024 · 4 comments · May be fixed by #10762
Labels
has workaround A workaround has been found to avoid the problem 🐞 bug Something isn't working 🔩 p2-edge-case

Comments

@liudaodanOo
Copy link
Contributor

Vue version

3.4.21

Link to minimal reproduction

https://stackblitz.com/edit/vitejs-vite-uqa6ny

Steps to reproduce

  1. constant.tsx 中定义类型“HelloWorldProps”
  2. HelloWorld.vue 中导入“HelloWorldProps”,省略 constant.tsx 的文件扩展名
  3. defineProps<> 使用“HelloWorldProps”

What is expected?

应用正常运行

What is actually happening?

终端报错:

[plugin:vite:vue] [@vue/compiler-sfc] Failed to resolve import source "xxxx"

System Info

No response

Any additional comments?

No response

@unbrain
Copy link

unbrain commented Apr 3, 2024

try rename file as .ts or import ./xxxxx.tsx

@liudaodanOo
Copy link
Contributor Author

try rename file as .ts or import ./xxxxx.tsx

import ./xxx.tsx can solve this problem, but i expect running normally without .tsx. I would like to omit extra name in my project.

@unbrain
Copy link

unbrain commented Apr 4, 2024

maybe can find answer in vite

resolve.extensions doesn't seem to be effective

@liudaodanOo
Copy link
Contributor Author

maybe can find answer in vite

resolve.extensions doesn't seem to be effective

It seems not related to resolve.extensions.
The cause of this error is .tsx been ignored while resolved the type used in defineProps<>.

Related Codes:

/** packages/compiler-sfc/src/script/resolveType.ts */
/** line: 950 */

function resolveExt(filename: string, fs: FS) {
  // #8339 ts may import .js but we should resolve to corresponding ts or d.ts
  filename = filename.replace(/\.js$/, '')
  const tryResolve = (filename: string) => {
    if (fs.fileExists(filename)) return filename
  }
  return (
    tryResolve(filename) ||
    tryResolve(filename + `.ts`) ||
    tryResolve(filename + `.d.ts`) ||
    tryResolve(joinPaths(filename, `index.ts`)) ||
    tryResolve(joinPaths(filename, `index.d.ts`))
  )
}

@sodatea sodatea added 🐞 bug Something isn't working has workaround A workaround has been found to avoid the problem 🔩 p2-edge-case labels Apr 7, 2024
@sodatea sodatea closed this as completed in 34106bc Apr 9, 2024
@github-actions github-actions bot locked and limited conversation to collaborators Apr 24, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
has workaround A workaround has been found to avoid the problem 🐞 bug Something isn't working 🔩 p2-edge-case
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants