node.jstypescriptvitenpm-package

Creating a Typescript Library Using Vite, leads to import errror: "TypeError: au.release is not a function" in the project

Questions:. Where does the error come from? And why it appears if additional imports happen in the library? How can I export my custom library in other project without breaking the project - possibility to run? Please note this is my first library which I am creating so lot of unknowns. I believe issue lies in my configuration in either ts, vite or pck is incorrect, though if that is the case, not sure which part.

Issue description: When I import a custom made library, code does not compile and gives an error message. When looking in the compiled code, this appears to be shown when <tag>.release().split(".") is being performed (6 instanses) or au.release().toLowerCase().includes("microsoft") (1 instanse).

"TypeError: au.release is not a function"

if (process.platform === "win32") {
  var Au = au.release().split(".");
  return Number(process.versions.node.split(".")[0]) >= 8 && Number(Au[0]) >= 10 && Number(Au[2]) >= 10586 ? Number(Au[2]) >= 14931 ? 3 : 2 : 1;
}

It is seen in the project, where it is imported. From what it looks it only appears when the library has a function which uses an import statement from other 3rd party libraries.

In the below code block, if I export this function from the vite library I will for sure get this error (mentioned previously), though the library itself will compile and build without issues. I cannot see what is wrong with it.

import axios from "axios";

export async function dosAttack(
  url: string,
  qty: number,
  ms: number
): Promise<{ err: number; pass: number }[]> {
  const result: { err: number; pass: number }[] = [];

  for (let time = 0; time < qty; time++) {
    const requests = [];
    let err = 0;
    let pass = 0;

    for (let attack = 0; attack < qty; attack++) {
      requests.push(
        axios
          .get(url)
          .then(() => pass++)
          .catch(() => err++)
      );
    }

    await Promise.all(requests);
    console.log({ err, pass });
    result.push({ err, pass });
    await new Promise((resolve) => setTimeout(resolve, ms));
  }

  return result;
}

Issue in VS Code: enter image description here

I have tried multiple settings, though not sure if there were any which actually made sense. The below function do work without any issues, though they don't have any 3rd dependencies installed in them. enter image description here]2

Configuration in package.json, vite.config.ts, tsconfig.json:

vite.config.ts

// vite.config.js
import { resolve } from "path";
import { defineConfig } from "vite";
import dts from "vite-plugin-dts";
import viteTsconfigPaths from "vite-tsconfig-paths";

const packageName = "qa-library";

export default defineConfig({
  base: "",
  plugins: [
    viteTsconfigPaths(),
    dts({
      insertTypesEntry: true,
    }),
  ],
  build: {
    lib: {
      entry: resolve(__dirname, "src/index.ts"),
      name: packageName,
      fileName: "index",
      formats: ["es", "cjs"],
    },
    emptyOutDir: false,
  },
  resolve: {
    alias: {
      lib: "/src",
      enums: "/src/enums",
      interface: "/src/interface",
      service: "/src/service",
    },
  },
});

tsconfig.json

{
  "compilerOptions": {
    "target": "ESNext",
    "lib": ["ESNext"],
    "types": ["vite/client", "node"],
    // "allowJs": false,
    "skipLibCheck": true,
    // "esModuleInterop": false,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "CommonJS",
    "moduleResolution": "Node",
    "resolveJsonModule": true,
    // "isolatedModules": true,
    "noEmit": true,
    "baseUrl": "./",
    "paths": {
      "@/*": ["./src/*"],
      "lib/*": ["./src/*"],
      "enums/*": ["./src/enums/*"],
      "interface/*": ["./src/interface/*"],
      "service/*": ["./src/service/*"]
    }
  },
  "include": ["./src"],
  "exclude": ["node_modules"]
}

package.json

{
  "name": "qa-library",
  "private": false,
  "version": "0.1.303",
  "type": "module",
  "exports": {
    ".": {
      "import": "./dist/index.js",
      "require": "./dist/index.cjs",
      "types": "./dist/index.d.ts"
    }
  },
  "main": "./dist/index.cjs",
  "module": "./dist/index.js",
  "typings": "./dist/index.d.ts",
  "files": [
    "/dist/*"
  ],
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview"
  },
  "devDependencies": {
    "@rollup/plugin-typescript": "^8.5.0",
    "@types/node": "^18.18.5",
    "prettier": "2.6.2",
    "rollup-plugin-typescript-paths": "^1.5.0",
    "tslib": "^2.7.0",
    "typescript": "^5.5.3",
    "vite": "^5.4.1"
  },
  "dependencies": {
    "@faker-js/faker": "^8.4.1",
    "@playwright/test": "^1.47.0",
    "@standardsdigital/qa-library": "^0.1.302",
    "axios": "^1.7.7",
    "moment": "^2.30.1",
    "vite-plugin-dts": "^4.2.1",
    "vite-tsconfig-paths": "^4.2.3"
  }
}
Solution

  • The Answer was so much trivial than I anticipated. It is circular dependencies.

    1. I accidently installed my own package in the package I was creating.

    2. Other libraries which I was using in the project were required to be removed.

      rollupOptions: {
   external: ["@playwright/test", "axios"],
 },