@torthu/fix-imports

Vite does not rely on Node module resolution. Therefore, it expects imports to include file extensions. It also does not support directory imports.

This util 1) rewrites imports to include .js file extension and 2) replaces directory imports with imports from the index.js file.

You only need this package if you:

1. are using a naive tsc build
2. are not merging/minifying output
3. are using barrel files / directory imports / extensionless imports
4. are consuming whatever you are building in a project without Node module resolution

Installation and usage

npm i -D @torthu/fix-imports

pnpm add -D @torthu/fix-imports

In your package.json:

"scripts": {
    "fix-imports": "fix-imports --dir ./dist"
}

In my use case I have set up a simple build command using rimraf to clean the dist-folder, tsc to compile the code and fix-imports to rewrite the imports:

"scripts": {
    "build": "rimraf dist && tsc && fix-imports --dir ./dist"
}

| Argument | Description | | ------------ | --------------------------------------------------------------------------- | | --dir | Path to dist folder. Defaults to "dist" if no --dir or --tsconfig is passed | | --tsconfig | Path to tsconfig.json (compilerOptions.outDir will be used as dir) | | --verbose | Print verbose output | | --dry-run | Dry run: log files that would be impacted |

Note: if passing both --dir and --tsconfig, --dir will take precedence.

Note: if neither --dir or --tsconfig is passed, dist will be used as default.

Example library build setup

tsconfig.json

{
  "$schema": "https://json.schemastore.org/tsconfig",
  "compilerOptions": {
    "target": "ES2022",
    "module": "ESNext",
    "lib": ["DOM", "ESNext"],
    "jsx": "react-jsx",
    "strict": true,
    "moduleResolution": "node",
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "baseUrl": ".",
    "noEmit": false,
    "declaration": true,
    "declarationMap": false,
    "outDir": "dist",
    "rootDir": "src",
    "emitDeclarationOnly": false,
    "sourceMap": false,
  },
  "include": ["src"]
}

package.json

{
    "name": "my-package",
    "version": "1.0.0",
    "files": [
        "./dist"
    ],
    "scripts": {
        "build": "tsc && fix-imports dist"
    },
    "devDependencies": {
        "@torthu/fix-imports": "^1.0.0",
        "typescript": "^5.0.4"
    },
}

file structure

  src/
    index.ts
    utils/
      index.ts
      utils.ts
  dist/
    index.js
    utils/
      index.js
      utils.js
  package.json
  tsconfig.json