evanw / evanw/esbuild

Rewriting import paths in the output

Open
#2,209 1 comment 0 reactions 0 assignees View on GitHub
Dominant language
Go
Stars
40.1k
Forks
1.3k
PR merge metrics
No merged PRs in 30d

Description

Hello! My project has the following file structure:
```
dist
node_modules
src
├─ app
| └─ App.tsx
├─ client
| └─ index.tsx
└─ server
├─ index.ts
└─ routes
├─ route-api.ts
└─ route-app.ts
build.js
package.json
```
The general idea is to reuse the same app code on the client and on the server. I tried to make two separate bundles: the client one (that includes the app part) and the server one (that also includes the app part for server-side rendering). This works without any issues.

But I would like to bundle the app part as a separate bundle (without any client or server code involved) and to include it as an ES module from the server code. I would like the resulting server part file structure to be as close as possible to the original server part file structure, ideally just transpiling files from TypeScript to JS.

In order to do this I am marking `app/App` as external so that the import is preserved. This leads to the problem I am trying to solve right now. The `server/index.ts` module imports the `server/routes/route-app.ts` module, while the `server/routes/route-app.ts` module imports the `app/App.tsx` module respectively. After the build is completed, the `dist` directory have a file structure like the below:
```
dist
├─ app
| └─ App.js
├─ client
| └─ index.js
└─ server
└─ index.js
```
The `server/index.ts` and the respective `server/routes/*` modules are bundled into the "server/index.js" module, while the `app/App.tsx` module is bundled into the `app/App.js` module. The problem is that the import of the `app/App` module in the `server/index.js` remains unchanged, so the path cannot be resolved. Rather, the import should be changed to `../app/App.js`.

Is there any esbuild plugin which is able to rewrite the imports so that they point to the correct modules in the output directory?

Contributor guide

No contributing guide indexed for this repository

Research direction

Start by reviewing the reported build.js setup and package.json alongside the external app/App import behavior. Trace how the server/index.ts and server/routes/route-app.ts imports are represented in the output, then verify that the completed build rewrites the import to ../app/App.js while preserving the requested output structure.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, typescript
Domain
build-system, compilers
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.