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