Vite: Module "path" has been externalized for browser compatibility

Problem

I am using Vite for some front end development, and when I used an external library which is using the "path" library, it throws this error:

Module "path" has been externalized for browser compatibility and cannot be accessed in client code.

Solution

Steps:

1. Install "path-browserify":

$ npm install path-browserify

1. Add code to vite.config.ts:

import path from "path-browserify"

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      path: "path-browserify",
    },
  },
})

Reference:

• https://blog.csdn.net/qq_32063079/article/details/120769787
• https://github.com/vitejs/vite/discussions/4479#discussioncomment-1121552
• https://github.com/EvinqWang/vite_vue3_web3/blob/main/vite.config.ts

Comments

[Mohammad Jawad (Kasir) Barati]

How about when we want to use node:path in our vite.config.ts? I am trying to use it but to no avail.

[Ikbel]

Thank you!

[Shishir Raven]

Thanks for sharing Shishir Raven