Error: Module "http" has been externalized for browser compatibility...

[FredrikMeyer]

So I'm trying to use a library ("redoc") that uses some Node builtins.

I have now spent many hours trying to understand how to polyfill/shim the dependencies in Vite, but I'm quite stuck.

I get this error message in the browser:

redoc.js?v=9dba5ef8:5437 Uncaught Error: Module "http" has been externalized for browser compatibility and cannot be accessed in client code.

I have looked into @rollup/plugin-node-resolve, nodepolyfills-plugin, etc etc, but nothing seems to solve the problem.

Is there a general recipe for working around this issue?

[Niputi]

if you take a look at https://github.com/EvinqWang/vite_vue3_web3/blob/main/vite.config.ts and https://github.com/EvinqWang/vite_vue3_web3/blob/main/index.html you can see an example of how to polyfill vite with browserify modules

[FredrikMeyer]

Thank's a lot! I got it working now.

Turns out I was looking at the completely wrong solutions.

[cfmj]

it works in dev mode,but not works after build

[nestle49]

Isn't working solution

[mkhennoussi]

Thanks @Niputi for your help, but I think we need a detailed answer from the team and @yyx990803. I saw some discussions about the way node_modules are processed by Vite. I've seen a lot of issues related to this (for instance with the AWS Amplify SDK). I tried to use google-spreadsheet and even with your example and quite a lot of research with trials/errors this doesn't work.

Vite is phenomenal, the speed and DX we have is amazing, but it can be a deal breaker if we can not use some libs (even if these libs are supposed to work primarily on the server side).

[Niputi]

you should be using the browsers fetch api

[erikhansenmujica]

Okay thanks :))

[rodrigoslino]

I have the same issue.

This is how to reproduce it:
https://stackblitz.com/edit/vitejs-vite-h3wgkp?file=vite.config.ts&terminal=dev

Is there a way to fix it?

[rodrigoslino]

This seems the solution: web3/web3.js#4453 (comment)

I tested and it worked well

[Niputi]

@rodrigoslino no need to polyfill. fetch and axios example here https://stackblitz.com/edit/vitejs-vite-lr8qsf?file=src/App.tsx
no need for axios as fetch api is plenty good

[Terkea]

The following vite.config.ts worked for me

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import viteTsconfigPaths from "vite-tsconfig-paths";
import svgrPlugin from "vite-plugin-svgr";

// https://vitejs.dev/config/
export default defineConfig({
    // https://github.com/vitejs/vite/issues/1973
    define: {
        // "process.env": process.env,
        // // By default, Vite doesn't include shims for NodeJS/
        // // necessary for segment analytics lib to work
        "global": {},
    },
    resolve: {
        alias: {
            process: "process/browser",
            buffer: "buffer",
            crypto: "crypto-browserify",
            stream: "stream-browserify",
            assert: "assert",
            http: "stream-http",
            https: "https-browserify",
            os: "os-browserify",
            url: "url",
            util: "util",
        },
    },
    plugins: [react(), viteTsconfigPaths(), svgrPlugin()],
});

[Booligoosh]

The Vite docs warn against the defining global like that, better to put window.global ||= window at the top of your index.js

[acenturyandabit]

I came here from importing sanitize-html which imports postcss which imports a bunch of node builtins. I did the following:

1. Created an empty file src/.junk/builtins_placeholder.txt
2. Added the following snippet to my vite.config.js
3. Restarted Vite since I did not have a vite.config.js before this issue.

export default {
    resolve: {
        alias: {
            "url": "./src/.junk/builtins_placeholder.tsx",
            "path": "./src/.junk/builtins_placeholder.tsx",
            "source-map-js": "./src/.junk/builtins_placeholder.tsx",
             ...etc
        }
    }
}

[adaptive-shield-matrix]

Thanks, your solution works wonderfully for me!
Much better than importing some external polyfill library

[anton-p-ivanov]

Thanks! Solution is working for me.

[john-subba]

Thanks! Solution worked for me. But i don't understand this solution. Will you help me understanding it?

[phazei]

So, we came across the same issue when switching from WebPack to Vite and it turns out it's due to our use of sanitize-html. Unfortunately, I really don't understand this solution at all either, so our solution ended up being to use domPurify instead.

Edit: oh, it just clicked. So this is setting the import alias for these methods to that empty file so it doesn't bother building with them, but if sanitize-html is being used client-side, then wouldn't it end up not properly sanitizing anyway because they're missing?