Vite:在使用绝对导入时无法构建枚举(TypeScript)。

huangapple go评论71阅读模式
英文:

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.2Vite v4.1vite-tsconfig-paths v4.2Typescript 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.

huangapple
  • 本文由 发表于 2023年5月26日 14:26:28
  • 转载请务必保留本文链接:https://go.coder-hub.com/76338135.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定