英文:
Vite: unable to build enum (typescript) when using absolute import
问题
尝试绝对导入枚举时,似乎 Vite 无法构建它。 TypeScript 正确解析了绝对导入。 Vite 正试图通过 vite-tsconfig-paths
来实现相同的效果。
Typescript 和 Vite 配置文件:
// tsconfig.json
{
"paths": {
"@*": [
"src/*"
],
"@types/*": [
"src/enums/*"
]
}
}
// vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tsconfigPaths from 'vite-tsconfig-paths'
export default defineConfig({
plugins: [react(), tsconfigPaths()],
test: {
globals: true,
environment: 'jsdom',
setupFiles: './test/setup.js',
},
})
枚举定义如下:
// src/enums/common/fooEnum.ts
export enum foo = {
BAR = 'bar',
BAZ = 'baz'
}
Common
文件夹还包含一个 index.ts
,只是重新导出了枚举:
// src/enums/common/index.ts
export { foo } from './fooEnum'
然后在文件中导入如下:
// reactComponent.tsx
import { foo } from '@types/common'
TypeScript 正确导入它,IDE 不会报错,但 Vite 在应用的预览中显示以下错误:
[plugin:vite:import-analysis] Failed to resolve import "@enums/common" from "src/path/to/file.tsx". Does the file exist?
20 |
21 | import { foo } from "@types/common";
| ^
22 | const Expenses = ({
23 | rent,
此错误仅影响枚举的导入/导出。我能够导入类型或任何其他类型的数据而无问题。
使用的版本信息为:React v18.2
、Vite v4.1
、vite-tsconfig-paths v4.2
和 Typescript v4.9
。
英文:
When trying to absolute import an Enum, it seems that Vite is unable to build it.
Typescript correctly resolve the absolut import. Vite is trying to do the same via vite-tsconfig-paths
Typescript and Vite config files:
// tsconfig.json
{...}
"paths": {
"@*": [
"src/*"
],
"@types/*": [
"src/enums/*",
],
{...}
// vite.config.ts
/// <reference types="vitest" />
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tsconfigPaths from 'vite-tsconfig-paths'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react(), tsconfigPaths()],
test: {
globals: true,
environment: 'jsdom',
setupFiles: './test/setup.js',
},
})
Enum is something like this:
// src/enums/common/fooEnum.ts
export enum foo = {
BAR = 'bar',
BAZ = 'baz'
}
Common
folder also contains an index.ts
that just re-exports the enum:
// src/enums/common/index.ts
export {foo} from './fooEnum'
Then importing in a file like so:
// reactComponent.tsx
import {foo} from '@types/common'
Typescript imports it correctly, IDE doesn`t throw any errors, but Vite in the previsualization of the app shows the next error:
[plugin:vite:import-analysis] Failed to resolve import "@enums/common" from "src/path/to/file.tsx". Does the file exist?
20 |
21 | import { foo } from "@types/common";
| ^
22 | const Expenses = ({
23 | rent,
The error only affects enum imports/exports. I am able to import types or any other kind of data without problems.
Using React v18.2
, Vite v4.1
, vite-tsconfig-paths v4.2
and Typescript v4.9
答案1
得分: 0
已解决: 我认为发生的情况是,将枚举作为@types/
的绝对导入会与依赖模块的其他@types/
文件夹发生冲突。将导入重命名为其他名称,例如@_types
,然后重新加载vite开发服务器就可以解决此问题。
英文:
RESOLVED: What I think it happens is that absolute importing enums as @types/
was having conflicts with other @types/
folders from dependency modules. Renaming the import to something else like @_types
and reloading vite dev server just fixed the issue.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论