uppy: Uncaught ReferenceError: Buffer is not defined

Hi! I’m having this weird error message using Vite as a bundler which seems to happen in a very specific scenario.

I couldn’t reproduce it using the default vite dev server (ie.: npx vite), but I managed to create a small repro of the scenario I have in another project that uses Phoenix and does not use vite’s dev server.

I can confirm though that the error only happens when the last import is present (@uppy/transloadit):

import Uppy from '@uppy/core'
import Dashboard from '@uppy/dashboard'
import Transloadit from '@uppy/transloadit'

Creating an simple HTML file and adding a script tag to the head works fine using vite’s dev server (npx vite):

index.html

<script type="module">
  import Uppy from '@uppy/core'
  import Dashboard from '@uppy/dashboard'
  import Transloadit from '@uppy/transloadit'
<script>

But it doesn’t work if I use vite build with my current config for some reason. Here’s a small repro that illustrates the problem: vite-repro.zip

Instructions:

npm i --prefix assets
npm run build --prefix assets
npm run start --prefix assets (for the HTTP server).
See error in Chrome dev tools (I’m using version 94.0.4606.81)

About this issue

Original URL
State: closed
Created 3 years ago
Comments: 21 (6 by maintainers)

Most upvoted comments

It was a bit of a confusing process to reproduce this with only socket.io-client and not through @uppy/transloadit but I did in the end. I reported it to them (see reference above) and offered interest in contributing, but it seems I can’t fix this on our side as it seems to be a dual publishing issue on their end.

Murderlon on Nov 10, 2021

@thiagomajesk my current work around is to load uppy from the CDN rather than bundle it via vite, basically add:

<script src="https://releases.transloadit.com/uppy/v2.2.3/uppy.min.js"></script>

to index.html and then use window.Uppy to reference it from the code … it is far from ideal, but it does work and our project still has a ways to go before hitting production and we can punt on this for a little longer in the hope of a more formal fix.

RobWalker on Nov 9, 2021

This now has been fixed! It was fixed in engine.io-client, which through semver is automatically in socket.io-client, and in turn in @uppy/transloadit.

Here is a minimal working example: https://stackblitz.com/edit/vitejs-vite-vgvw5x?file=main.js

Reinstall @uppy/transloadit to make it work.

Murderlon on Nov 15, 2021

I ran into this issue in a Vue 3 project, and the best workaround I found was to defer the loading of the components that relied on Uppy.

In my case all the Uppy code was within an ImageContentPanel component, so changing the usage of this component from

  import ImageContentPanel from '@editor/components/settings/ImageContentPanel.vue';

const ImageContentPanel = defineAsyncComponent(() =>
  import('@editor/components/settings/ImageContentPanel.vue')
);

Caused the production vite build to bundle those libraries separately … and everything just worked.

I don’t quite understand /why/ it works at runtime with this approach vs a single bundle since Buffer is still undefined.

As far as this Uppy is concerned to @Murderlon point … it would be ideal if socket.io could be more selective even if only because it sounds like a bunch of unused code is getting loaded/executed which is never ideal in the browser.

RobWalker on Oct 27, 2021

@thiagomajesk I am afraid that I can’t repro this. It’s confusing since two projects that shares the same code has difference in success. I’ll probably check the CDN work around if that ever solves it temporarily. At least, just to keep everything consistent.

lxsmnsyc on Nov 10, 2021

Thanks for the updates. I have been trying to get this to work today but it has been less obvious than I hoped to solve it. I understand this is a timely issue and my goal is to get it released this workweek.

Murderlon on Nov 9, 2021

Try out this example: https://stackblitz.com/edit/vitejs-vite-uvhc2g

If you run just vite in the terminal and click the button everything works fine, the Uppy dialog opens

If you run vite build then vite preview then it builds OK but you get a runtime ‘Buffer’ is not defined error on startup:

RobWalker on Nov 9, 2021

Thanks for the detailed updates. We are discussing this internally at the moment how to best solve this. I will post an update once we have something.

Murderlon on Nov 5, 2021

@thiagomajesk I can confirm that this happened to us as well. Started from the Buffer error then when we tried polyfilling Buffer, it then raised the error regarding the missing “Writeable”, which turned out, on further inspection, to be an empty module. I also tried using terser instead of esbuild for minification but to no avail. It’s weird that the error only happens in build and not on dev.

At this point we’ll probably ditch the Transloadit Plugin and look for alternatives as this broke the entire app we’re working on.

lxsmnsyc on Nov 5, 2021

Hi, I don’t think another issue in Vite will help here as it is the same problem as has been surfaced in multiple discussions, unless it’s specifically around trying to work around this instance. We are considering patching socket.io with yarn patch in our repository to remove the code we don’t use, which includes the Buffer usage, so it should also fix the build in Vite. But this is not sure yet so I wouldn’t make it your first bet on resolving this.

Regarding the response from the maintainers from Vite, I agree with the sentiment, but it’s a very unnuanced take as it’s not always feasible to “swap it out with something more modern”. We rely heavily on socket.io, and swapping it would be a risky procedure.

Lastly, socket.io uses Buffer to support binary messages, which is always included even if it’s unused like in our project. So we could open an issue there if that could be resolved somehow.

Murderlon on Oct 27, 2021

Hi, @thiagomajesk. As I initially expected, this is not an issue with Uppy but a bundler issue. I’m not familiar with bundlers so it left me confused for a bit so pardon me for the late reply. We don’t use Buffer, but our dependency socket.io does. In Vite, Node build-ins are not shimmed. I would as a starting point suggest taking a look at this discussion on how to shim Buffer: https://github.com/vitejs/vite/discussions/3126

Murderlon on Oct 26, 2021