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

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

Closed
7flash opened this issue Nov 26, 2021 · 12 comments
Closed

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

7flash opened this issue Nov 26, 2021 · 12 comments

Comments

@7flash
Copy link

7flash commented Nov 26, 2021

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 7flash added the bug Something isn't working label Nov 26, 2021
@7flash
Copy link
Author

7flash commented Nov 26, 2021

posted this issue in moralis repo too MoralisWeb3/react-moralis#96

@gijoehosaphat
Copy link

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

@SaschaDens
Copy link

SaschaDens commented Dec 11, 2021

@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
Copy link
Contributor

ccssmnn commented Jan 4, 2022

I experience this issue when using nodemailer in my action:

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

@akomm
Copy link

akomm commented Jan 6, 2022

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
Copy link
Contributor

ccssmnn commented Jan 8, 2022

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
Copy link

sebruiz commented Jan 11, 2022

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)

@akomm
Copy link

akomm commented Jan 25, 2022

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
Copy link
Contributor

ccssmnn commented Jan 25, 2022

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
Copy link
Collaborator

machour commented Jan 24, 2023

@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.

@machour machour added needs-response We need a response from the original author about this issue/PR and removed bug Something isn't working labels Jan 24, 2023
@sebruiz
Copy link

sebruiz commented Jan 24, 2023

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

@github-actions github-actions bot removed the needs-response We need a response from the original author about this issue/PR label Jan 24, 2023
@juliankrispel
Copy link

@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 👍

@machour machour closed this as completed May 1, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

9 participants