How to use Winston in Vite

• winston

  51 22,011 7.9 JavaScript

  A logger for just about everything.

  

The issue I ran into when using Vite recently is because my company uses an internally library that wraps around the open source logger Winston.

• vite

  784 64,457 9.9 TypeScript

  Next generation frontend tooling. It's fast!

  

After checking the internet for this error, you will probably come across this closed Vite issue on Github. This led me to understand that I have to polyfill the NodeJs functions Winston is looking for, but the Vite team isn't going to do that for me. I wish they would, but again, it seems the JS ecosystem is moving away from this, because we really shouldn't be supporting old or unsupported API's and code that uses them. On the other hand, you can't just tell these packages that have millions of dependents to just refactor and catch up overnight. Everyone knows the technical debt in those libraries must be a nightmare.

• SurveyJS

  surveyjs.io sponsored

  Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

  

• esbuild-plugins

  2 274 3.5 JavaScript

  Collection of useful esbuild js plugins

// yarn add --dev @esbuild-plugins/node-globals-polyfill import { NodeGlobalsPolyfillPlugin } from "@esbuild-plugins/node-globals-polyfill"; // yarn add --dev @esbuild-plugins/node-modules-polyfill import { NodeModulesPolyfillPlugin } from "@esbuild-plugins/node-modules-polyfill"; // You don't need to add this to deps, it's included by @esbuild-plugins/node-modules-polyfill import rollupNodePolyFill from "rollup-plugin-node-polyfills"; import react from "@vitejs/plugin-react"; import tsconfigPaths from "vite-tsconfig-paths"; export default { plugins: [ react(), tsconfigPaths(), { name: "fix-node-globals-polyfill", setup(build) { build.onResolve({ filter: /util\.js/ }, ({ path }) => ({ path })); }, }, ], resolve: { alias: { // This Rollup aliases are extracted from @esbuild-plugins/node-modules-polyfill, // see https://github.com/remorses/esbuild-plugins/blob/master/node-modules-polyfill/src/polyfills.ts // process and buffer are excluded because already managed // by node-globals-polyfill util: "util", sys: "util", events: "rollup-plugin-node-polyfills/polyfills/events", stream: "rollup-plugin-node-polyfills/polyfills/stream", path: "rollup-plugin-node-polyfills/polyfills/path", querystring: "rollup-plugin-node-polyfills/polyfills/qs", punycode: "rollup-plugin-node-polyfills/polyfills/punycode", url: "rollup-plugin-node-polyfills/polyfills/url", /******** Remove the string decoder below *********/ // string_decoder: "rollup-plugin-node-polyfills/polyfills/string-decoder", http: "rollup-plugin-node-polyfills/polyfills/http", https: "rollup-plugin-node-polyfills/polyfills/http", os: "rollup-plugin-node-polyfills/polyfills/os", assert: "rollup-plugin-node-polyfills/polyfills/assert", constants: "rollup-plugin-node-polyfills/polyfills/constants", _stream_duplex: "rollup-plugin-node-polyfills/polyfills/readable-stream/duplex", _stream_passthrough: "rollup-plugin-node-polyfills/polyfills/readable-stream/passthrough", _stream_readable: "rollup-plugin-node-polyfills/polyfills/readable-stream/readable", _stream_writable: "rollup-plugin-node-polyfills/polyfills/readable-stream/writable", _stream_transform: "rollup-plugin-node-polyfills/polyfills/readable-stream/transform", timers: "rollup-plugin-node-polyfills/polyfills/timers", console: "rollup-plugin-node-polyfills/polyfills/console", vm: "rollup-plugin-node-polyfills/polyfills/vm", zlib: "rollup-plugin-node-polyfills/polyfills/zlib", tty: "rollup-plugin-node-polyfills/polyfills/tty", domain: "rollup-plugin-node-polyfills/polyfills/domain", }, }, optimizeDeps: { esbuildOptions: { /********* New line inserted ***********/ inject: ['./vite-polyfills/setImmediate.js'], // Node.js global to browser globalThis define: { global: "globalThis", }, // Enable esbuild polyfill plugins plugins: [ NodeGlobalsPolyfillPlugin({ process: true, buffer: true, }), NodeModulesPolyfillPlugin(), ], }, }, build: { rollupOptions: { plugins: [ // Enable rollup polyfills plugin // used during production bundling rollupNodePolyFill(), ], }, }, };

• setImmediate

  1 1,286 0.0 JavaScript

  A cross-browser implementation of the new setImmediate API.

  

I finally decided to stop letting other people try to solve my problem for me (kind of) and do it myself, so I went to the [ES Build] Docs and see if there was something I could do to attach a polyfill for setImmediate. This is assuming I could find a polyfill, which I did find at YuzuJS's polyfill for setImmediate.

Suggest a related project