从 npm 时发生错误，而不是在本地时发生错误：不支持 vite 目录导入，解析从 导入的 es 模块

问题描述 投票：0回答：1

我在网络上检查了这个错误，特别是针对vite，虽然这似乎是一个常见的讨论，但我不明白为什么它对我的情况不起作用：

我尝试在本地导入我的包，如下所示：

package.json

"dependencies": {
    "@sveltejs/adapter-node": "1.3.1",
    "@tsconfig/svelte": "^5.0.2",
    "preline": "^1.9.0",
    "user-credits": "link:..\\UserCredits"
}

一切正常，依赖关系已解决：当我运行时

vite dev

然后我将整个项目复制到另一个文件夹，并导入该项目的 npm 版本：

"dependencies": {
    "@sveltejs/adapter-node": "1.3.1",
    "@tsconfig/svelte": "^5.0.2",
    "preline": "^1.9.0",
    "user-credits": "0.9.7-alpha"
}

现在，当我启动应用程序时，我得到：

Directory import 'C:\Users\zhamd\work\user-credits-ui\node_modules\.pnpm\[email protected]\node_modules\user-credits\dist\db\dao' is not supported resolving ES modules imported from C:\Users\zhamd\work\user-credits-ui\node_modules\.pnpm\[email protected]\node_modules\user-credits\dist\index.js
Error [ERR_UNSUPPORTED_DIR_IMPORT]: Directory import 'C:\Users\zhamd\work\user-credits-ui\node_modules\.pnpm\[email protected]\node_modules\user-credits\dist\db\dao' is not supported resolving ES modules imported from C:\Users\zhamd\work\user-credits-ui\node_modules\.pnpm\[email protected]\node_modules\user-credits\dist\index.js
    at new NodeError (node:internal/errors:399:5)
    at finalizeResolution (node:internal/modules/esm/resolve:319:17)
    at moduleResolve (node:internal/modules/esm/resolve:945:10)

所以我从第一个项目转到我的包 json，并将其指向从 npm 解压的目录，如下所示：

"dependencies": {
    "@sveltejs/adapter-node": "1.3.1",
    "@tsconfig/svelte": "^5.0.2",
    "preline": "^1.9.0",
    "user-credits": "link:..\\user-credits-ui\\node_modules\\.pnpm\\[email protected]\\node_modules\\user-credits"
}

惊喜！一切正常！

有人可以给我解释一下吗？

完整的package.json如下：

{
    "name": "svelte-user-credits",
    "version": "0.0.1",
    "private": true,
    "scripts": {
        "dev": "vite dev",
        "build": "vite build",
        "preview": "vite preview",
        "test": "npm run test:integration && npm run test:unit",
        "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
        "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
        "lint": "prettier --plugin-search-dir . --check . && eslint .",
        "format": "prettier --plugin-search-dir . --write .",
        "test:integration": "playwright test",
        "test:unit": "vitest"
    },
    "devDependencies": {
        "@playwright/test": "^1.28.1",
        "@sveltejs/adapter-auto": "^2.0.0",
        "@sveltejs/kit": "^1.26.0",
        "@typescript-eslint/eslint-plugin": "^6.0.0",
        "@typescript-eslint/parser": "^6.0.0",
        "autoprefixer": "^10.4.14",
        "eslint": "^8.28.0",
        "eslint-config-prettier": "^8.5.0",
        "eslint-plugin-svelte": "^2.30.0",
        "postcss": "^8.4.24",
        "postcss-load-config": "^4.0.1",
        "prettier": "^2.8.0",
        "prettier-plugin-svelte": "^2.10.1",
        "svelte": "^4.0.5",
        "svelte-check": "^3.4.3",
        "tailwindcss": "^3.3.2",
        "tslib": "^2.4.1",
        "typescript": "^5.2.2",
        "vite": "^4.4.2",
        "vitest": "^0.32.2"
    },
    "type": "module",
    "dependencies": {
        "@sveltejs/adapter-node": "1.3.1",
        "@tsconfig/svelte": "^5.0.2",
        "preline": "^1.9.0",
        "user-credits": "0.9.7-alpha"
    }
}

我在 vite 存储库上打开 an issues，可以在 here 找到复制品（在主文件中注释导入使项目再次显示）

注意：这是有问题的 npm 项目的 github，这是 客户的

更新：即使我尝试向文件夹导入添加索引，它仍然没有解决：

Cannot find module 'C:\Users\zhamd\work\user-credits-ui\node_modules\.pnpm\[email protected]\node_modules\user-credits\dist\db\dao\index' imported from C:\Users\zhamd\work\user-credits-ui\node_modules\.pnpm\u[email protected]\node_modules\user-credits\dist\index.js

** 是否在搜索index.js或index.ts文件？因为在 C:\Users\zhamd\work\user-credits-ui 处有一个index.js 和index.d.ts 文件 ode_modules.pnpm\us[电子邮件受保护] ode_modules\user-credits\dist\db\dao\ **

typescript node-modules vite typescript-module-resolution
1个回答
0
投票

答案由多个步骤组成：

  1. 所有类型导出都必须导出或重新导出（例如在index.ts中）为

    export type

  2. 所有导入都必须显式导入为类型

    import type
    。

  3. package.json 文件必须指向生成的类型文件索引：

    {
  "name": "user-credits",
  "author": "Zied Hamdi",
  "type": "module",
  "version": "0.9.10-alpha",
  "license": "MIT",
  "keywords": [
    "user-credits",
    "credit-flow",
    "credits-balance",
    "payment-screens"
  ],
  "description": "user-credits is an open-source library designed to simplify the implementation of pay-as-you-go features in your web or mobile applications. Credit flow is managed locally instead of being sent back and forth to payment platforms as Stripe, in addition, you own your data without paying the price of long development hours.",
  "main": "./dist/index.js",
  "types": "./dist/index.d.ts",
  "module": "./dist/index.js",
  "exports": {
    ".": {
      "import": "./dist/index.js",
      "require": "./dist/index.js"
    }
  },
  "files": [
    "dist"
  ], //...}}

在某个时刻，我决定从头开始并阅读有关 TS 的内容（我来自 Java 和 Dart 世界）

所以我读过这篇文章意识到我必须添加类型 另外，出于绝望，我成功地用 vite 编译了我的库，这要归功于 this link 绝对值得一读。但是，vite.config.ts 已经过时了，我用它替换它以使其正常工作：

// vite.config.ts
import {defineConfig} from 'vite'
import {resolve} from 'path'
import dtsPlugin from "vite-plugin-dts";

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [
        dtsPlugin({
            insertTypesEntry: true,
        }),
    ],
    build: {
        target:'es2020',
        lib: {
            entry: resolve(__dirname, 'src/index.ts'),
            formats: ['es']
        }
    },
    resolve: {
        alias: {
            src: resolve('src/')
        }
    },
})
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.