Replies: 13 comments 33 replies
-
|
How can I make it work with typescript? |
Beta Was this translation helpful? Give feedback.
-
|
No idea, sorry, I don’t use it beyond type definitions. |
Beta Was this translation helpful? Give feedback.
-
|
My bad, the question was poorly worded. I'm using Svelte with Typescript, and I couldn't find any information on a way to declare globalThis like you did here. If I just paste your code as is into my index.ts, the compiler rejects it. |
Beta Was this translation helpful? Give feedback.
-
|
This might help you: https://stackoverflow.com/questions/59459312/using-globalthis-in-typescript#62031493 Again, sorry, I don’t use TypeScript for the same reason I don’t code in Java and transpile to JavaScript :) Wait, you don’t think… goes to check… Sweet jeez, of course someone’s made a tool for that… http://www.jsweet.org/ smh :) |
Beta Was this translation helpful? Give feedback.
-
import { Buffer as BufferPolyfill } from 'buffer'
declare var Buffer: typeof BufferPolyfill;
globalThis.Buffer = BufferPolyfill
console.log('buffer', Buffer.from('foo', 'hex'))Works perfectly. @aral thanks for the hint importing buffer as polyfill |
Beta Was this translation helpful? Give feedback.
-
|
I could only make this solution work by adding the injection to global, i.e. When I added this to my project's index.ts, it didn't work. I think vitejs loads all imports before executing any code, like the snippet above. So |
Beta Was this translation helpful? Give feedback.
-
|
Hi, do you know how I can do this with with SvelteKit? |
Beta Was this translation helpful? Give feedback.
-
|
same |
Beta Was this translation helpful? Give feedback.
-
|
Adding Buffer to window.Buffer worked great for the live server. However, I had problems with the prod build where the entry point script was not being loaded fast enough and the troublesome ledger package prevented the app from loading. Solved with the rollup inject plugin: 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'] })],
},
},
}) |
Beta Was this translation helpful? Give feedback.
-
|
Update: the buffer package name doesn't have an uppercase... don't know why it was working with my typo, but the plugin affected other packages when using the proper lowercase name, so I changed the options to only apply the inject plugin on what needed it inject({
include: ['node_modules/@ledgerhq/**'],
modules: { Buffer: ['buffer', 'Buffer'], }
}) |
Beta Was this translation helpful? Give feedback.
-
|
For some reason it doesnt seem to work for me, at least not with cypress. |
Beta Was this translation helpful? Give feedback.
-
|
I was having issues with this using the vite Anyone else have suggestions? |
Beta Was this translation helpful? Give feedback.
-
|
Works for me in SvelteKit. |
Beta Was this translation helpful? Give feedback.
-
|
same problem. It works on my Mac, but on build env (Unbuntu) it gots error. change |
Beta Was this translation helpful? Give feedback.
-
|
even easier......add support for esbuild plugins for dev in addition to rollup plugins for prod, where there is already a fantastic node polyfill plugin that includes typedefs: https://www.npmjs.com/package/@esbuild-plugins/node-modules-polyfill |
Beta Was this translation helpful? Give feedback.
-
|
Do I add it in optimizeDeps.esbuildOptions.plugins and build.rollupOptions.(?) in the config? |
Beta Was this translation helpful? Give feedback.
-
|
It was working fine, but now I have |
Beta Was this translation helpful? Give feedback.
-
|
This no longer seems to work (original post). It produces the following error when running vite dev: |
Beta Was this translation helpful? Give feedback.
-
|
yes any solution pls!! |
Beta Was this translation helpful? Give feedback.
-
|
I'm also experiencing this bizarre error |
Beta Was this translation helpful? Give feedback.
-
|
please add a reproduction |
Beta Was this translation helpful? Give feedback.
-
|
I got to this page when having the same error as above. Maybe it helps another poor soul reading this. |
Beta Was this translation helpful? Give feedback.
-
|
since when node is case sensitive? |
Beta Was this translation helpful? Give feedback.
-
|
I am using Vitejs with TypeScript. I need the polyfills for another package that I am using. But as soon as I add the polyfills I get the a buffer error. |
Beta Was this translation helpful? Give feedback.
-
|
test by only 1 one of them in project, see if they work without polyfilling or give your whole list of dependencies here and I'll give a solution when I have time |
Beta Was this translation helpful? Give feedback.
-
|
I would do it myself, but I don't really know what you mean by one of them? Thanks for your time! |
Beta Was this translation helpful? Give feedback.
-
|
Update: I was able to fix it. |
Beta Was this translation helpful? Give feedback.
-
|
you save my day! |
Beta Was this translation helpful? Give feedback.
-
|
In Vite 4.4.5, you can resolve the missing Buffer issue using the following approach， |
Beta Was this translation helpful? Give feedback.
-
|
The original solution wasn't working for me, so I checked the polyfill docs and noticed that you need a trailing slash when importing import { Buffer } from "buffer/";
window.Buffer = Buffer; |
Beta Was this translation helpful? Give feedback.
-
|
thank you for this, the other solutions did not work for me but this one did. Very much appreciated. There was no docs that I could personally find that were not third party. I think the vite docs should have a section around polyfilling node globals as its pretty fundamental for transitioning from something like webpack to vite. |
Beta Was this translation helpful? Give feedback.
-
|
This is how I've made this work with plotly.js, it seems more robust than other solutions: npm add node-stdlib-browser
npm add -D vite-plugin-node-stdlib-browser// vite.config.js
import { defineConfig } from 'vite'
import nodePolyfills from 'vite-plugin-node-stdlib-browser'
export default defineConfig({
// other options
plugins: [nodePolyfills()]
})It uses this open-source vite plugin. |
Beta Was this translation helpful? Give feedback.
-
|
Doesn't support Vite 4 yet |
Beta Was this translation helpful? Give feedback.
-
|
好用 |
Beta Was this translation helpful? Give feedback.
-
|
Not work get an error |
Beta Was this translation helpful? Give feedback.
-
|
For me using the
export default defineConfig({
// your config
resolve: {
alias: {
buffer: 'buffer/',
}
},
}) |
Beta Was this translation helpful? Give feedback.
-
|
I changed to |
Beta Was this translation helpful? Give feedback.
-
|
Thank you, legend! |
Beta Was this translation helpful? Give feedback.
-
|
the way I got it to work is:
|
Beta Was this translation helpful? Give feedback.
-
|
Beta Was this translation helpful? Give feedback.
-
|
I just spent a couple hours troubleshooting issues: This plugin worked for me: |
Beta Was this translation helpful? Give feedback.
-
|
Hello Mike Starr, I wanted to extend my sincere gratitude for your prompt assistance in resolving the issue I encountered with the 'buffer' module in my Vite + React project. Your guidance was incredibly helpful, and I greatly appreciate the time and effort you put into providing a clear and effective solution. With your help, I was able to implement the recommended changes successfully, and my project is now functioning as expected. Your expertise and support have been invaluable to me, and I'm truly thankful for your contributions to the community. Once again, thank you for your invaluable assistance! Warm regards, Tahidul Islam |
Beta Was this translation helpful? Give feedback.
and others
-
I’m just playing with porting a Snowpack app to Vite and thought I’d share something I found in case it helps anyone else.
If your client-side code uses Buffer (e.g., you’re doing stuff with cryptography and you’re using a Node.js library) and you get a “Buffer is not a function”-type error, you don’t have to mess with rollup plugins, etc. (which I went down a rabbit-hole with, unsuccessfully).
Instead, install Feross’s Buffer polyfill:
And, in your JS entrypoint (e.g., index.js), do something like this:
And it should work.
Similarly, you can implement other Node polyfills directly in your code, if and when you need them.
(In Snowpack, there is a
polyfillNodeoption you can use in the configuration that should do this for you automatically but there’s been a recent regression so I took it as an opportunity to try out Vite. Given that Vite doesn’t have the same directory-related issues and – with this small workaround – seems to just work in my tests, I’m going to start using it instead for our Small Web stuff. Also, expect a Vite + Svelte template for Site.js soon… I actually encountered the issues while working on a Snowpack version, which I’ll release once/if the regressions are fixed.)Beta Was this translation helpful? Give feedback.
All reactions