unstable_parseMultipartFormData causes "ReferenceError: Buffer is not defined" error

[gabimor]

What version of Remix are you using?

1.2.3

Steps to Reproduce

1. create a remix route route with an action (just an action, no loader or export default Component)
2. import unstable_parseMultipartFormData to that file and use it
3. when accessing that route the browser console errors with "ReferenceError: Buffer is not defined"

adding a default export solves this:

export default function Index() {
  return ""
}

Expected Behavior

not sure what the issue is but there should be a better error explaining it. and to my understanding this should just work even without a component export

Actual Behavior

"ReferenceError: Buffer is not defined" in the browser

[herrmannplatz]

Guess you need to define your uploadHandler inside the action function. Run into the same issue when following the docs.

https://github.com/remix-run/remix/blob/main/examples/file-and-cloudinary-upload/app/routes/local-upload.tsx

[gabimor]

I think i tried that, but why does defining a component export solve that?

[kiliman]

@gabimor It's hard to say without seeing the actual route file. Can you post it? You can remove any private code.

[MichaelDeBoey]

This seems to be related to #2248

[chaance]

Duplicate of #2248, working on it! Will update there when we can.

[shymarrai]

for me what worked was:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
import inject from '@rollup/plugin-inject'

export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
'@': path.resolve(__dirname, 'src'),
}
},
build: {
rollupOptions: {
plugins: [inject({ Buffer: ['buffer', 'Buffer'] })],
},
},
})

reply to this comment:

vitejs/vite#2785 (reply in thread)