egoist / egoist/tsup

Import Path Issues with `bundle: false` and Suggestion for Built-in Fixes

Open
#1,240 4 comments 8 reactions 0 assignees View on GitHub
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.