import {
unstable_createMemoryUploadHandler,
unstable_parseMultipartFormData,
} from "remix";
const uploadHandler = unstable_createMemoryUploadHandler({
maxFileSize: 5_000_000,
});
export async function uploadAvatar(request: Request) {
const formData = await unstable_parseMultipartFormData(
request,
uploadHandler
const file = formData.get("file");
console.log("file in action function: ", file);
return file;
I have moved to Next.js for the moment as i already have some working examples of what i'm trying to do.
Please @fergusmeiklejohn if this solution is working for you, let me know so i can close this issue.
Thanks
@Shaquu I'm having roughly the same issues as well. I'm using Cloudflare Pages as my preferred Remix setup. I tried the example locally and it seems to build fine in dev mode using the @remix-run/serve package.
I also tried to change the emotion context files to context.server.ts and context.client.ts to better model their documentation to see if the compiler would leave out the that code but it appears that it's not.
Hopefully that info helps others who are troubleshooting this. TBH, I tried styled-components first but ran into SSR issues and inconsistencies between the server and client generated classes. I tried shimming Linaria but there's too many unknowns with that so I came to emotion. It seems like a fully baked example but this one issue just seems to be sticky
@drewdecarme to be honest, I just removed emotion references from the code and I am going forward.
It is not that important to stop me from getting to know remix.
Yeah I'm completely with you on that one. I'm fine with writing the styles I need outside the context of the component. I just love the convenience of co-locating the styles with the component which I've gotten accustomed to over the years.
Maybe try this one?
emotion-js/emotion#2554 (comment)
Sure you just do something like this:
const uploadHandler = unstable_createMemoryUploadHandler({
maxFileSize: 5_000_000,
});Checked on 1.3.2 and still can't use Buffer on client.
If you just try to use Buffer on the client, it compiles but you get runtime error: ReferenceError: Buffer is not defined
If you install polyfill buffer package, you get the error: It appears you're using a module that is built in to node, but you installed it as a dependency which could cause problems. Please remove buffer before continuing.
This is why I have the patch that removes the check for node builtins.
Hello!
I was trying to achieve the same as in the doc here https://remix.run/docs/en/v1/api/remix#unstable_createfileuploadhandler and this Buffer is not defined error happened to me as well...
But I noticed that if instead of this:
// Code from the doc
const uploadHandler = unstable_createFileUploadHandler({
maxFileSize: 5_000_000,
file: ({ filename }) => filename,
});
export const action: ActionFunction = async ({ request }) => {
const formData = await unstable_parseMultipartFormData(
request,
uploadHandler
const file = formData.get('avatar');
// file is a "NodeFile" which has a similar API to "File"
// ... etc
you do this:
// Notice the uploadHandler being defined INSIDE the action function
export const action: ActionFunction = async ({ request }) => {
const uploadHandler = unstable_createFileUploadHandler({
maxFileSize: 5_000_000,
file: ({ filename }) => filename,
});
const formData = await unstable_parseMultipartFormData(
request,
uploadHandler
const file = formData.get('avatar');
// file is a "NodeFile" which has a similar API to "File"
// ... etc
Then the error doesn't appear anymore and the file is available with formData.get('avatar')
I just started using Remix, so not sure it's a correct approach, but maybe it's at least a step in the right direction 🙂
I actually got this error on 1.3.3 also when only using the regular formData parser like await request.formData(); in an action but downgrading to 1.3.2 fixed it.
Pretty big bug since crashes all the client side js.
I'm also running into this error since upgrading to Remix 1.3.4. Downgrading to Remix 1.3.2 resolves the error.
Edit:
I encountered this issue on a project built on the Remix grunge stack.
I cannot reproduce this issue in a newly initialised project. That includes a new Remix grunge stack and a new vanilla remix project.
After seeing that the error only occurs in my project, i started chopping out code. In my case the error was triggered by a Cypress test route with two imports:
import { createUser } from "~/models/user.server";
import { createUserSession } from "~/session.server";Removing these imports was enough to avoid triggering the error.
This same code exists in the Remix grunge stack project and doesn't trigger the error, so something else may be at play here. I haven't dug any deeper yet.
FYI, I am working on this, but in the mean time you can either create a separate .server.js file as mentioned before, or initialize your server code inside your loader or action instead of the top-level scope of the route module.
I spoke with @jacob-ebey about this and the problem ultimately is our documentation. When you call a function in the top-level scope of your route module, our compiler can't reliably code-split that bit from the browser build. And while we do shim Node built-ins, we don't shim Node globals and would prefer that Buffer not end up in your browser build at all.
So to solve this, you have two options:
Create a separate *.server.js file that wraps your server handlers so that our compiler can reliably remove it from the browser, as documented here
Initialize the handler inside your loader or action instead of the root level, as we already remove those exports from the browser build
// instead of this...
let uploadHandler = unstable_createFileUploadHandler({
maxFileSize: 5_000_000,
file: ({ filename }) => filename,
});
export async function action({ request }) {
let formData = await unstable_parseMultipartFormData(request, uploadHandler);
// ...
// do this...
export async function action({ request }) {
let uploadHandler = unstable_createFileUploadHandler({
maxFileSize: 5_000_000,
file: ({ filename }) => filename,
});
let formData = await unstable_parseMultipartFormData(request, uploadHandler);
// ...
Understand that unstable_createFileUploadHandler is the example, but this "gotcha" would generally apply to any functions you might call in a route. Functions called at the top-level or the Route component will be included in both bundles, functions called in actions/loaders will only be in the server bundle.
In the meantime, I'll make sure all of our examples and documentation are updated to fix any bugs and clarify!
A few of our examples incorrectly called server-only functions at the
top-level scope of a route module which will result in an error when
they use Node globals. The examples were fixed and clarity added where
needed. Addresses issue raised in #2248.
@chaance
i dont get it: why the same route code, migrating to react18 + latest remix throws the error? I’m not using any unstable_parseMultipartFormData as i posted early.
I'm unsure how React 18 specifically would cause an issue like this, but this isn't just about unstable_parseMultipartFormData, it's about any code that should only be in your server bundle.
If you can create a new issue with a minimal repro showing your problem with React 18 we can try to help out there.
A few of our examples incorrectly called server-only functions at the
top-level scope of a route module which will result in an error when
they use Node globals. The examples were fixed and clarity added where
needed. Addresses issue raised in #2248.
@chaance Unfortunately, I'm still getting the same issues when trying to follow the emotion example in the examples directory for Remix. I've tried a few of the fixes that you have mentioned before but still experiencing the
ReferenceError: Buffer is not defined
I would assume that the culprit is @emotion/server/create-instance/dist/emotion-server-create-instance.cjs.dev.js and it's getting bundled in the code. It's strange since this is being called in the entry.server.tsx file so I'd wonder if you would have any guidance based upon how the example is setup in the docs at the moment?
For what it's worth, I'm using Cloudflare Pages and am currently using Remix 1.4.1
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)
I'd like to point out that if you're a dummy like me, and googling Uncaught ReferenceError: Buffer is not defined brought you here while setting up WebSockets in the Remix client. You might have done this:
// ws.client.ts
import WebSocket from 'ws';
const ws = new WebSocket('ws://localhost: 3000');Turns out WebSocket is native to modern browsers, so you really just need to omit the import and you're good to go
I hope this helps at least one other dev out there!
rnvsrivastava, korzewski, makerovski, mhmdunl1, and mzaatar reacted with thumbs up emoji
Ismailhachimi, makerovski, mzaatar, and 0xACCE55 reacted with heart emoji
All reactions
