Import Path Issues with `bundle: false` and Suggestion for Built-in Fixes
- Dominant language
- TypeScript
- Stars
- 11.3k
- Forks
- 275
- PR merge metrics
- No merged PRs in 30d
Description
Hi,
First, thank you for the fantastic work on `tsup`!
I've encountered some import path issues when using `tsup` with `bundle: false`. Specifically, the problems are:
1. **Missing File Extensions**: When `bundle: false` is set, the output files sometimes have import statements without explicit file extensions (like `.js`, `.mjs`, or `.cjs`). This can cause runtime errors in environments that require explicit file extensions.
2. **Directory Imports**: Importing from directories without specifying the `index` file (e.g., `import { something } from './utils';`) can lead to module resolution issues because some environments don't automatically resolve to `index` files.
3. **Unresolved Path Aliases**: Path aliases defined in `tsconfig.json` aren't correctly resolved in the output when not bundling, resulting in broken imports.
To address these issues, I created a package called [`esbuild-fix-imports-plugin`](https://www.npmjs.com/package/esbuild-fix-imports-plugin) that combines three ESBuild plugins to modify the output files:
- **`fixAliasPlugin`**: Resolves path aliases from `tsconfig.json` to relative paths.
- **`fixFolderImportsPlugin`**: Converts directory imports to explicit paths pointing to `index` files.
- **`fixExtensionsPlugin`**: Appends correct file extensions to relative import paths.
**Suggestion**:
Would it be possible to integrate similar fixes directly into `tsup` when `bundle: false` is used? This could greatly enhance the developer experience by:
- Automatically appending the correct file extensions to imports in the output.
- Resolving path aliases defined in `tsconfig.json`.
- Adjusting directory imports to explicitly reference `index` files.
**Example of the Issues**:
Given a source file with:
```typescript
import { myFunction } from './utils'; // Importing using folder path
import { myFunction } from './utils/myFunction'; // Importing using file path
import { myAliasFunction } from '@alias/utils/myFunction'; // Importing using alias
```
After building with `tsup` and `bundle: false`, the output might contain:
```javascript
const { myFunction } = require('./utils');
const { myFunction } = require('./utils/myFunction');
const { myAliasFunction } = require('@alias/utils/myFunction');
```
This can cause runtime errors due to unresolved imports.
**Proposed Solution**:
Integrate logic similar to the plugins in `esbuild-fix-imports-plugin` to process the output files when `bundle: false` is set. This could be an opt-in feature or enabled by default when not bundling.
**Alternative**:
If direct integration isn't feasible, perhaps the documentation could mention this issue and recommend using `esbuild-fix-imports-plugin` or similar solutions.
**Additional Context**:
Here's how I currently use the plugin with `tsup`:
```typescript
import { defineConfig } from 'tsup';
import { fixImportsPlugin } from 'esbuild-fix-imports-plugin';
export default defineConfig({
// Other configurations
bundle: false,
esbuildPlugins: [fixImportsPlugin()],
// ...
});
```
**References**:
- [esbuild-fix-imports-plugin on npm](https://www.npmjs.com/package/esbuild-fix-imports-plugin)
- [esbuild-fix-imports-plugin GitHub repo](https://github.com/aymericzip/esbuild-fix-imports-plugin)
Thank you for considering this suggestion!
Best regards,
Contributor guide
Research direction
Start by reviewing the `defineConfig` options for `bundle: false` and `esbuildPlugins`, then compare their behavior with the referenced `esbuild-fix-imports-plugin`. Define coverage for missing extensions, directory imports, and `tsconfig.json` path aliases, and determine whether the behavior should be opt-in or documented as an alternative. Done means the chosen fixes work reliably or the limitation is clearly documented.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- build-system
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 30/100