Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(tanstackstart): Patch ESM properly in Vercel #15537

Draft
wants to merge 1 commit into
base: develop
Choose a base branch
from
Draft
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 30 additions & 0 deletions packages/tanstackstart/docs/hosting-provider-esm-hooks.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
> NOTE: These are docs for the maintainers of the TanStack Start SDK and not for users of the package.

# Hosting Provider ESM Loader Hooks

This file contains the code for ESM loader hooks that can be base64 encoded and passed to the `NODE_OPTIONS` environment variable as `--import "data:text/javascript;base64,1234BASE64HERE1324"`.

Before encoding the snippets below and pasting them in docs or whatever, make sure to minify them as much as possible.

In their current state the hooks are as minimal as possible. Do not remove things from them because you think they can be smaller - unless thoroughly testing them beforehand!

## Vercel

```mjs
import { register, createRequire } from 'module';
if (!process.env.CI) {
try {
const moduleResolutionContext = `file://${process.cwd()}/index.js`;
const req = createRequire(moduleResolutionContext);
const { createAddHookMessageChannel } = req('import-in-the-middle');
const { addHookMessagePort } = createAddHookMessageChannel();
register('import-in-the-middle/hook.mjs', moduleResolutionContext, {
data: { addHookMessagePort, include: [] },
transferList: [addHookMessagePort],
});
globalThis._sentryEsmLoaderHookRegistered = true;
} catch (e) {
globalThis._sentryEsmLoaderHookError = `${e}`;
}
}
```
3 changes: 2 additions & 1 deletion packages/tanstackstart/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,8 @@
"@sentry/core": "9.2.0",
"@sentry/node": "9.2.0",
"@sentry/opentelemetry": "9.2.0",
"@sentry/react": "9.2.0"
"@sentry/react": "9.2.0",
"import-in-the-middle": "^1.13.0"
},
"scripts": {
"build": "run-p build:transpile build:types",
Expand Down
3 changes: 3 additions & 0 deletions packages/tanstackstart/rollup.npm.config.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,9 @@ export default [
'src/server/index.ts',
'src/config/index.ts',
],
packageSpecificConfig: {
external: ['import-in-the-middle/hook.mjs'],
},
}),
),
...makeOtelLoaders('./build', 'sentry-node'),
Expand Down
4 changes: 4 additions & 0 deletions packages/tanstackstart/src/server/index.ts
Original file line number Diff line number Diff line change
@@ -1 +1,5 @@
export * from '@sentry/node';

// We're importing this hook to explicitly tell tools like Vercel's `nft` not to throw the file away because it seems unused, because it is actually used by ESM loader hooks the user defines via node CLI arguments.
import 'import-in-the-middle/hook.mjs';
import 'import-in-the-middle';
Loading