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

[aymericzip]

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 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:

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:

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:

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
• esbuild-fix-imports-plugin GitHub repo

Thank you for considering this suggestion!

Best regards,

Upvote & Fund

• We're using Polar.sh so you can upvote and help fund this issue.
• We receive the funding once the issue is completed & confirmed by you.
• Thank you in advance for helping prioritize & fund our backlog.

[dennemark]

hi, did you find another way to deal with this? also running into the relative path issue.

[aymericzip]

Hi @dennemark,

I haven't done any research since this issue was posted.
But try the provided plugin and let me know if it works for you

[dennemark]

@aymericzip thx! I sticked to bundle: true now, dont remember how the plugin worked, but I think there were other issues appearing.

[aymericzip]

@dennemark

Some fixes have been provided over the past few weeks

If you feel like trying again and encounter any issues, feel free to open an issue. It could be helpful for others as well! 😊