[SOLVED] Can I substitute dependencies for a module (for example, replace node-fetch with the inbuilt fetch) using Vite?

Can I substitute dependencies for a module (for example, replace node-fetch with the inbuilt fetch) using Vite?

I have a number of packages that depend on node-fetch:

$ npm ls node-fetch
myapp@1.0.0 /home/mike/Code/myapp@1.0.0 
├─┬ @metaplex-foundation/js@0.18.1
│ ├─┬ @bundlr-network/client@0.8.9
│ │ └─┬ near-api-js@0.44.2
│ │   └── node-fetch@2.6.7 deduped
│ └── node-fetch@2.6.7
├─┬ @solana/spl-token-registry@0.2.7
│ └─┬ cross-fetch@3.1.5
│   └── node-fetch@2.6.7 deduped
└─┬ @solana/web3.js@1.73.2
  └── node-fetch@2.6.7 deduped

Fetch is now part of Node 18, and recent versions remove the warning about it being experimental.

Is it possible to replace any imports of node-fetch to just use Node's global.fetch?

I imagining something like a Vite build option, but I don't know what to search for. I've already looked at the Vite docs and since Vite uses Rollup the Rollup docs.

Reading https://vitejs.dev/config/shared-options.html#resolve-alias I can see there are aliases from a package to another package, I just have to work out if/how I make this use a global instead.

Solution

Yes, you can. This is called an alias in Vite.

There doesn't seem to be a way to replace an NPM module with an inbuilt object, but I wrote a small NPM module that exposes the inbuilt globalThis.fetch as a default export. This can be used as a node-fetch substitute:

npm i just-use-native-fetch

Then add an alias in your Vite config:

export default defineConfig({
  ...
  resolve: {
    alias: {
      "node-fetch": "just-use-native-fetch",
    },
  },
  ...
}