T
TanStack•4mo ago
equal-aqua

Excluding packages from bundle

I'm getting these errors: 
X [ERROR] Could not resolve "term.js"

    node_modules/.pnpm/blessed@0.1.81/node_modules/blessed/lib/widgets/terminal.js:93:22:
      93 │   this.term = require('term.js')({
         ╵                       ~~~~~~~~~

  You can mark the path "term.js" as external to exclude it from the bundle, which will remove this
  error and leave the unresolved path in the bundle. You can also surround this "require" call with
  a try/catch block to handle this failure at run-time instead of bundle-time.

X [ERROR] Could not resolve "pty.js"

    node_modules/.pnpm/blessed@0.1.81/node_modules/blessed/lib/widgets/terminal.js:218:21:
      218 │   this.pty = require('pty.js').fork(this.shell, this.args, {
          ╵                      ~~~~~~~~

  You can mark the path "pty.js" as external to exclude it from the bundle, which will remove this
  error and leave the unresolved path in the bundle. You can also surround this "require" call with
  a try/catch block to handle this failure at run-time instead of bundle-time.

14:20:58 [vite] (client) error while updating dependencies:
Error: Build failed with 2 errors:
node_modules/.pnpm/blessed@0.1.81/node_modules/blessed/lib/widgets/terminal.js:93:22: ERROR: Could not resolve "term.js"
node_modules/.pnpm/blessed@0.1.81/node_modules/blessed/lib/widgets/terminal.js:218:21: ERROR: Could not resolve "pty.js"
    at failureErrorWithLog (C:\Users\ethan\Desktop\Projects\fylo\website-v2\node_modules\.pnpm\esbuild@0.25.4\node_modules\esbuild\lib\main.js:1463:15)
    at C:\Users\ethan\Desktop\Projects\fylo\website-v2\node_modules\.pnpm\esbuild@0.25.4\node_modules\esbuild\lib\main.js:924:25
    at C:\Users\ethan\Desktop\Projects\fylo\website-v2\node_modules\.pnpm\esbuild@0.25.4\node_modules\esbuild\lib\main.js:1341:9
    at process.processTicksAndRejections (node:internal/process/task_queues:105:5)
X [ERROR] Could not resolve "term.js"

    node_modules/.pnpm/blessed@0.1.81/node_modules/blessed/lib/widgets/terminal.js:93:22:
      93 │   this.term = require('term.js')({
         ╵                       ~~~~~~~~~

  You can mark the path "term.js" as external to exclude it from the bundle, which will remove this
  error and leave the unresolved path in the bundle. You can also surround this "require" call with
  a try/catch block to handle this failure at run-time instead of bundle-time.

X [ERROR] Could not resolve "pty.js"

    node_modules/.pnpm/blessed@0.1.81/node_modules/blessed/lib/widgets/terminal.js:218:21:
      218 │   this.pty = require('pty.js').fork(this.shell, this.args, {
          ╵                      ~~~~~~~~

  You can mark the path "pty.js" as external to exclude it from the bundle, which will remove this
  error and leave the unresolved path in the bundle. You can also surround this "require" call with
  a try/catch block to handle this failure at run-time instead of bundle-time.

14:20:58 [vite] (client) error while updating dependencies:
Error: Build failed with 2 errors:
node_modules/.pnpm/blessed@0.1.81/node_modules/blessed/lib/widgets/terminal.js:93:22: ERROR: Could not resolve "term.js"
node_modules/.pnpm/blessed@0.1.81/node_modules/blessed/lib/widgets/terminal.js:218:21: ERROR: Could not resolve "pty.js"
    at failureErrorWithLog (C:\Users\ethan\Desktop\Projects\fylo\website-v2\node_modules\.pnpm\esbuild@0.25.4\node_modules\esbuild\lib\main.js:1463:15)
    at C:\Users\ethan\Desktop\Projects\fylo\website-v2\node_modules\.pnpm\esbuild@0.25.4\node_modules\esbuild\lib\main.js:924:25
    at C:\Users\ethan\Desktop\Projects\fylo\website-v2\node_modules\.pnpm\esbuild@0.25.4\node_modules\esbuild\lib\main.js:1341:9
    at process.processTicksAndRejections (node:internal/process/task_queues:105:5)
So I added this to my app config: 
build: {
  rollupOptions: {
    external: ["pty.js", "term.js"]
  }
}
build: {
  rollupOptions: {
    external: ["pty.js", "term.js"]
  }
}
But the errors still show. I don't use these packages however have reason to believe that they stem from a package I import in a file called pm2 which is a server-only package. I've also tried excluding pm2 but to no avail.
12 Replies
extended-salmon
extended-salmon•4mo ago
can you provide a complete minimal example repo?
equal-aqua
equal-aquaOP•4mo ago
i can't get it to reproduce in a minimal repo :/ removing pm2 i now get this browser error: 
__vite-browser-exter…:node:async_hooks:3 Uncaught (in promise) Error: Module "node:async_hooks" has been externalized for browser compatibility. Cannot access "node:async_hooks.AsyncLocalStorage" in client code.  See https://vite.dev/guide/troubleshooting.html#module-externalized-for-browser-compatibility for more details.
    at Object.get (__vite-browser-exter…de:async_hooks:3:13)
__vite-browser-exter…:node:async_hooks:3 Uncaught (in promise) Error: Module "node:async_hooks" has been externalized for browser compatibility. Cannot access "node:async_hooks.AsyncLocalStorage" in client code.  See https://vite.dev/guide/troubleshooting.html#module-externalized-for-browser-compatibility for more details.
    at Object.get (__vite-browser-exter…de:async_hooks:3:13)
extended-salmon
extended-salmon•4mo ago
if you can share your full example we could have a quick look
equal-aqua
equal-aquaOP•4mo ago
would you mind sending me your github email so i can add you to the repo
extended-salmon
extended-salmon•4mo ago
GitHub user name schiller-manuel
equal-aqua
equal-aquaOP•4mo ago
ty just added u
extended-salmon
extended-salmon•4mo ago
you are calling server only functions from a loader loader and beforeLoad are isomorphic in start this means that they run on both the server and the client initially, during SSR, on the server then on subsequent client navigations they run on the client if you want something to always execute on the server, you need to wrap into a server function
equal-aqua
equal-aquaOP•4mo ago
ohhh tysm!! the last error i get is: 
hook.js:608 A tree hydrated but some attributes of the server rendered HTML didn't match the client properties. This won't be patched up. This can happen if a SSR-ed Client Component used:

- A server/client branch `if (typeof window !== 'undefined')`.
- Variable input such as `Date.now()` or `Math.random()` which changes each time it's called.
- Date formatting in a user's locale which doesn't match the server.
- External changing data without sending a snapshot of it along with the HTML.
- Invalid HTML tag nesting.

It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.

https://react.dev/link/hydration-mismatch

  ...
    <Matches>
      <SafeFragment fallback={null}>
        <Transitioner>
        <MatchesInner>
          <CatchBoundary getResetKey={function getResetKey} errorComponent={function ErrorComponent} ...>
            <CatchBoundaryImpl getResetKey={function getResetKey} onCatch={function onCatch}>
              <MatchImpl matchId="__root__">
                <SafeFragment fallback={null}>
                  <SafeFragment getResetKey={function getResetKey} errorComponent={function ErrorComponent} ...>
                    <SafeFragment fallback={function fallback}>
                      <MatchInnerImpl matchId="__root__">
                        <RootComponent>
                          <RootDocument>
                            <html lang="en">
                              <head>
                              <body
-                               cz-shortcut-listen="true"
                              >
hook.js:608 A tree hydrated but some attributes of the server rendered HTML didn't match the client properties. This won't be patched up. This can happen if a SSR-ed Client Component used:

- A server/client branch `if (typeof window !== 'undefined')`.
- Variable input such as `Date.now()` or `Math.random()` which changes each time it's called.
- Date formatting in a user's locale which doesn't match the server.
- External changing data without sending a snapshot of it along with the HTML.
- Invalid HTML tag nesting.

It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.

https://react.dev/link/hydration-mismatch

  ...
    <Matches>
      <SafeFragment fallback={null}>
        <Transitioner>
        <MatchesInner>
          <CatchBoundary getResetKey={function getResetKey} errorComponent={function ErrorComponent} ...>
            <CatchBoundaryImpl getResetKey={function getResetKey} onCatch={function onCatch}>
              <MatchImpl matchId="__root__">
                <SafeFragment fallback={null}>
                  <SafeFragment getResetKey={function getResetKey} errorComponent={function ErrorComponent} ...>
                    <SafeFragment fallback={function fallback}>
                      <MatchInnerImpl matchId="__root__">
                        <RootComponent>
                          <RootDocument>
                            <html lang="en">
                              <head>
                              <body
-                               cz-shortcut-listen="true"
                              >
extended-salmon
extended-salmon•4mo ago
apparently a browser extension
extended-salmon
extended-salmon•4mo ago
https://github.com/vercel/next.js/discussions/72035
GitHub
Hydration Error in Next.js 15 with React 19 Due to cz-shortcut-list...
To Reproduce Description: After updating my Next.js application to: Next.js: 15.0.2 React: 19.0.0-rc-02c0e824-20241028 React-DOM: 19.0.0-rc-02c0e824-20241028 I encountered a new hydration error tha...
extended-salmon
extended-salmon•4mo ago
The cz-shortcut-listen="true" attribute injected by Colorzilla causes a mismatch during the server-client hydration process in Next.js. When Colorzilla is disabled, the hydration error resolves.
equal-aqua
equal-aquaOP•4mo ago
perf thanks, there's no error when i go in incognito

Did you find this page helpful?