[Bug]: Uncaught Error: Dynamic require of "util" is not supported

[7flash]

What version of Remix are you using?

^1.0.5

Steps to Reproduce

in terminal npx create-remix@latest

in terminal npm install moralis react-moralis

in entry.client.jsx import { MoralisProvider } from "react-moralis";

Expected Behavior

nothing in console

Actual Behavior

error message in console

Uncaught Error: Dynamic require of "util" is not supported at chunk-ZBXWLNC7.js:13 at node_modules/web3-core-requestmanager/lib/index.js

[7flash]

posted this issue in moralis repo too https://github.com/MoralisWeb3/react-moralis/issues/96

[gijoehosaphat]

I get this same issue, but with a different dynamic require, on the xml2js and fast-xml-parser packages.

[SaschaDens]

@gijoehosaphat for the xml2jsI had the same error Uncaught Error: Dynamic require of "events" is not supported

For my use-case I was able to exclude this from the client bundle by renaming the file to .server.ts docs: no-module-side-effects. Maybe this is also an option for you.

[ccssmnn]

I experience this issue when using nodemailer in my action:

Uncaught Error: Dynamic require of "events" is not supported

[akomm]

Following maybe a workaround for some folks:

I have the same error, but with querystring: Dynamic require of "querystring" is not supported.

I do not import querystring in my route directly. The exception & stack produced was not helpful, but I could reproduce it being used by arangojs.

My import in route was: import {aql} from "arangojs"

Its only used in loader without any leaking effect outside.

Creating a new file, reexporting aql from arangojs in this new file, and importing aql inside the route from my newly created file made the error disappear and the code work.

@ryanflorence querystring is also a node lib, maybe related to #114 ? The reexporting of aql from a file seems also similar to your issue

[ccssmnn]

Experiencing this with firebase-admin as well.

chunk-UPHRXYOG.js:13 Uncaught Error: Dynamic require of "fs" is not supported
    at chunk-UPHRXYOG.js:13
    at node_modules/firebase-admin/lib/app/credential-internal.js (credential-internal.js:21)
    at __require2 (chunk-UPHRXYOG.js:19)
    at node_modules/firebase-admin/lib/utils/index.js (index.js:21)
    at __require2 (chunk-UPHRXYOG.js:19)
    at node_modules/firebase-admin/lib/app/index.js (index.js:21)
    at __require2 (chunk-UPHRXYOG.js:19)
    at node_modules/firebase-admin/lib/auth/index.js (index.js:25)
    at __require2 (chunk-UPHRXYOG.js:19)
    at index.js:1
(anonymous) @ chunk-UPHRXYOG.js:13
node_modules/firebase-admin/lib/app/credential-internal.js @ credential-internal.js:21
__require2 @ chunk-UPHRXYOG.js:19
node_modules/firebase-admin/lib/utils/index.js @ index.js:21
__require2 @ chunk-UPHRXYOG.js:19
node_modules/firebase-admin/lib/app/index.js @ index.js:21
__require2 @ chunk-UPHRXYOG.js:19
node_modules/firebase-admin/lib/auth/index.js @ index.js:25
__require2 @ chunk-UPHRXYOG.js:19
(anonymous) @ index.js:1
components.js:179 Uncaught TypeError: Cannot read properties of undefined (reading 'root')
    at RemixRoute (components.js:179)
    at renderWithHooks (react-dom.development.js:14985)
    at mountIndeterminateComponent (react-dom.development.js:17811)
    at beginWork (react-dom.development.js:19049)
    at HTMLUnknownElement.callCallback2 (react-dom.development.js:3945)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994)
    at invokeGuardedCallback (react-dom.development.js:4056)
    at beginWork$1 (react-dom.development.js:23964)
    at performUnitOfWork (react-dom.development.js:22779)
    at workLoopSync (react-dom.development.js:22707)
RemixRoute @ components.js:179
renderWithHooks @ react-dom.development.js:14985
mountIndeterminateComponent @ react-dom.development.js:17811
beginWork @ react-dom.development.js:19049
callCallback2 @ react-dom.development.js:3945
invokeGuardedCallbackDev @ react-dom.development.js:3994
invokeGuardedCallback @ react-dom.development.js:4056
beginWork$1 @ react-dom.development.js:23964
performUnitOfWork @ react-dom.development.js:22779
workLoopSync @ react-dom.development.js:22707
renderRootSync @ react-dom.development.js:22670
performSyncWorkOnRoot @ react-dom.development.js:22293
scheduleUpdateOnFiber @ react-dom.development.js:21881
updateContainer @ react-dom.development.js:25482
(anonymous) @ react-dom.development.js:26021
unbatchedUpdates @ react-dom.development.js:22431
legacyRenderSubtreeIntoContainer @ react-dom.development.js:26020
hydrate2 @ react-dom.development.js:26086
(anonymous) @ entry.client.tsx:4
/Applications/Sizzy.app/Contents/Resources/app.asar/build/plugins.js:1 The above error occurred in the <RemixRoute> component:

    at RemixRoute (http://localhost:3000/build/_shared/chunk-OHT6FAVK.js:1581:3)
    at Routes (http://localhost:3000/build/_shared/chunk-OHT6FAVK.js:1564:7)
    at Router (http://localhost:3000/build/_shared/chunk-UPHRXYOG.js:2144:21)
    at RemixCatchBoundary (http://localhost:3000/build/_shared/chunk-OHT6FAVK.js:118:10)
    at RemixErrorBoundary (http://localhost:3000/build/_shared/chunk-OHT6FAVK.js:43:5)
    at RemixEntry (http://localhost:3000/build/_shared/chunk-OHT6FAVK.js:1461:12)
    at RemixBrowser (http://localhost:3000/build/_shared/chunk-OHT6FAVK.js:2161:27)

React will try to recreate this component tree from scratch using the error boundary you provided, RemixErrorBoundary.

[sebruiz]

I experienced this with the @walletconnect/client library. The understanding is:

• walletconnect relies on some node apis. “buffer” in this case
• webpack would normally just include a polyfill in the bundle
• not doing that here because remix uses esbuild, which doesnt do that for you

To overcome it I followed the comment below which patches the @remix-run/dev package. Don't forget to add patch-package to your package.json postinstall. https://github.com/remix-run/remix/issues/114#issuecomment-981169767

[akomm]

This is seriously broken, I keep encoutering different triggers for this error. Now suddenly totally unrelated routes randomly break, when I use an import in another route.

Example, routes:

• product/$id
• unrelated/route/whatever/$id <-- resource route

product/$id has no problem. Once I add an import into a resource route, that uses the same library, re-exported in a file to workaround this issue, suddenly product/$id blows up...

The workaround re-exporting seem to not work with resource/action routes. On top of it, it breaks all other routes that used the workaround file re-export.

Now need to both re-export everything that touches node, aswell as name everything that does so .server. Only .server is not enough. At least a workaround is possible.

[ccssmnn]

Here is a minimal reproduction on remix crashing, when nodemailer is imported directly in a route vs being imported from entry.server.tsx. I have to use the second approach for server dependencies like nodemailer or firebase-admin, to avoid running into any issues.

[machour]

@7flash it seems that your problem was fixed upstream, can you confirm?

For other commenters, if you're using a package meant to be only used server side, then it must be used in a file with the .server.tsx suffix.

[sebruiz]

I experienced this with the @walletconnect/client library. The understanding is:

• walletconnect relies on some node apis. “buffer” in this case
• webpack would normally just include a polyfill in the bundle
• not doing that here because remix uses esbuild, which doesnt do that for you

To overcome it I followed the comment below which patches the @remix-run/dev package. Don't forget to add patch-package to your package.json postinstall. #114 (comment)

This was the fix for us in the end https://github.com/rainbow-me/rainbowkit/blob/main/examples/with-remix/app/polyfills.ts

[juliankrispel]

@7flash it seems that your problem was fixed upstream, can you confirm?

For other commenters, if you're using a package meant to be only used server side, then it must be used in a file with the .server.tsx suffix.

fixed for me :+1: