#Excluding packages from bundle

20 messages · Page 1 of 1 (latest)

cold edge
#

I'm getting these errors:

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

    node_modules/.pnpm/[email protected]/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/[email protected]/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/[email protected]/node_modules/blessed/lib/widgets/terminal.js:93:22: ERROR: Could not resolve "term.js"
node_modules/.pnpm/[email protected]/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\[email protected]\node_modules\esbuild\lib\main.js:1463:15)
    at C:\Users\ethan\Desktop\Projects\fylo\website-v2\node_modules\.pnpm\[email protected]\node_modules\esbuild\lib\main.js:924:25
    at C:\Users\ethan\Desktop\Projects\fylo\website-v2\node_modules\.pnpm\[email protected]\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"]
  }
}

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.

tired canyon
#

can you provide a complete minimal example repo?

cold edge
#

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)
tired canyon
#

if you can share your full example we could have a quick look

cold edge
tired canyon
#

GitHub user name schiller-manuel

cold edge
#

ty

cold edge
#

just added u

tired canyon
#

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

cold edge
#

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"
                              >
tired canyon
#

apparently a browser extension

#

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.