Can't stop unstable_parseMultipartFormData from being included in client side bundles

[Alazoral]

Hi there!

I'm really enjoying my time with Remix but I've hit a bit of a snag. Right now Remix is bundling unstable_parseMultipartFormData into my client side bundle, apparently, as I'm getting this error in the browser console:

Uncaught ReferenceError: Buffer is not defined
    at node_modules/dicer/lib/HeaderParser.js (HeaderParser.js:6:15)
    at __require2 (chunk-MCRSUEN6.js:19:50)
    at node_modules/dicer/lib/Dicer.js (Dicer.js:7:20)
    at __require2 (chunk-MCRSUEN6.js:19:50)
    at node_modules/busboy/lib/types/multipart.js (multipart.js:11:13)
    at __require2 (chunk-MCRSUEN6.js:19:50)
    at node_modules/busboy/lib/main.js (main.js:84:3)
    at __require2 (chunk-MCRSUEN6.js:19:50)
    at node_modules/@remix-run/node/parseMultipartFormData.js (parseMultipartFormData.js:16:14)
    at __require2 (chunk-MCRSUEN6.js:19:50)

This is invisible in Chrome but in Safari it results in a full-on Application Error crash that blocks the website from even rendering:

Application Error

RemixRoute@http://localhost:3000/build/_shared/chunk-TYJFRY4N.js:14924:19
renderWithHooks@http://localhost:3000/build/_shared/chunk-6FRLRXYH.js:11497:35
mountIndeterminateComponent@http://localhost:3000/build/_shared/chunk-6FRLRXYH.js:14727:36
beginWork$1@http://localhost:3000/build/_shared/chunk-6FRLRXYH.js:18886:31
performUnitOfWork@http://localhost:3000/build/_shared/chunk-6FRLRXYH.js:18365:31
workLoopSync@http://localhost:3000/build/_shared/chunk-6FRLRXYH.js:18302:30
renderRootSync@http://localhost:3000/build/_shared/chunk-6FRLRXYH.js:18281:27
performSyncWorkOnRoot@http://localhost:3000/build/_shared/chunk-6FRLRXYH.js:18041:42
performSyncWorkOnRoot@[native code]
flushSyncCallbacks@http://localhost:3000/build/_shared/chunk-6FRLRXYH.js:8610:38
flushSync@http://localhost:3000/build/_shared/chunk-6FRLRXYH.js:18125:33
legacyCreateRootFromDOMContainer@http://localhost:3000/build/_shared/chunk-6FRLRXYH.js:20368:22
legacyRenderSubtreeIntoContainer@http://localhost:3000/build/_shared/chunk-6FRLRXYH.js:20408:53
module code@http://localhost:3000/build/entry.client-2IMICVNP.js:16:30
evaluate@[native code]
moduleEvaluation@[native code]

The only place I am importing unstable_parseMultipartFormData though is inside a file with a .server.ts extension, app/utils/parseEmail.server.ts. I must be missing something, but I can't think of what. Any help would be greatly appreciated.

[ivosabev]

Same here, but in Chrome with remix 1.3.4, unstable_parseMultipartFormData is used inside *.server.ts file.

Uncaught ReferenceError: Buffer is not defined
    at node_modules/dicer/lib/HeaderParser.js (HeaderParser.js:6:15)
    at __require2 (chunk-LOA6QJHP.js:19:50)
    at node_modules/dicer/lib/Dicer.js (Dicer.js:7:20)
    at __require2 (chunk-LOA6QJHP.js:19:50)
    at node_modules/busboy/lib/types/multipart.js (multipart.js:11:13)
    at __require2 (chunk-LOA6QJHP.js:19:50)
    at node_modules/busboy/lib/main.js (main.js:84:3)
    at __require2 (chunk-LOA6QJHP.js:19:50)
    at node_modules/@remix-run/node/parseMultipartFormData.js (parseMultipartFormData.js:16:14)
    at __require2 (chunk-LOA6QJHP.js:19:50)
    ```

[davidsoderberg]

this happens to me to... 😢

[ivosabev]

I think this is not a bug, and the issue arises when you have a complex import hierarchy and Remix cannot separate the code between client/server. I fixed it by finding which file on the client was importing the backend code and adding .server to make sure it is only included in the server bundle.

[machour]

@ivosabev that's what I was thinking too, hence the request for a reproducing case to help find the culprit. Glad you sorted it out

[ivosabev]

Sorry I couldn't find the time for a test case. Nevertheless currently the remix errors when server code leaks to the client are extremely unhelpful and in most of the cases do not give any clue to what the issue might be. Any work in that direction would be quite helpful. Thanks!

[davidsoderberg]

I have had luck when I moved redirect and json method to it's own file and then import them from that .server.ts. seems to work every time...