Skip to main content

CRA, Vite, Webpack or Other

Webpack 5.x

In Webpack V5, it doesn't provide default polyfills for NodeJS API. You need to add the following config to your webpack.config.js .(Webpack resolve.fallback official document)

  • install crypto-browserify and buffer dependencies.
npm install -D crypto-browserify buffer
# or use yarn
yarn install -D crypto-browserify buffer
  • add resolve.fallback to tell Webpack where to find the polyfills.
  • add webpack.ProvidePlugin to tell Webpack to inject the polyfills to the global scope.

Update your webpack.config.js:

module.exports = {
// ...other config
resolve: {
fallback: {
crypto: require.resolve("crypto-browserify"),
buffer: require.resolve("buffer/"),
path: false,
stream: false,
},
},

plugins: [
// ...your origin plugin for webpack
new webpack.ProvidePlugin({ Buffer: ["buffer", "Buffer"] }),
],
}

Create React App

Create React App build system based on Webpack, but need some patch via react-app-rewired

First install react-app-rewired, crypto-browserify and buffer dependencies.

npm install -D react-app-rewired crypto-browserify buffer
# or use yarn
yarn install -D react-app-rewired crypto-browserify buffer

Then create a config-overrides.js file in yout root directory of project. and add the following code to it.

const webpack = require("webpack")
module.exports = function override(config, env) {
config.resolve.fallback = {
...config.resolve.fallback,
crypto: require.resolve("crypto-browserify"),
buffer: require.resolve("buffer/"),
path: false,
stream: false,
}

config.plugins = [...config.plugins, new webpack.ProvidePlugin({ Buffer: ["buffer", "Buffer"] })]

return config
}

Finally, override the scripts field in package.json to use react-app-rewired.

{
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test"
}
}

Also, eject create-react-app is available, after do it, see Webpack polyfills Section to config.

Vite

Please follow these step.

npm install -D rollup-plugin-polyfill-node @rollup/plugin-inject
  • config vite.config.js
import { defineConfig } from "vite"
import react from "@vitejs/plugin-react"
import inject from "@rollup/plugin-inject"
import nodePolyfills from "rollup-plugin-polyfill-node"
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
react(),
// add node polyfills
nodePolyfills(),

// inject Buffer to global
inject({
Buffer: ["buffer", "Buffer"],
}),
],
})

Next.js

Next.js supports customizing the webpack config in nextjs.config.mjs

import { createRequire } from "node:module"

const require = createRequire(import.meta.url)

/** @type {import('next').NextConfig} */
const nextConfig = {
webpack: (config, { buildId, dev, isServer, defaultLoaders, nextRuntime, webpack }) => {
config.resolve.fallback = {
...config.resolve.fallback,
crypto: require.resolve("crypto-browserify"),
buffer: require.resolve("buffer/"),
path: false,
stream: false,
}

config.plugins = [...config.plugins, new webpack.ProvidePlugin({ Buffer: ["buffer", "Buffer"] })]
return config
},
}

export default nextConfig

Docusaurus

Docusaurus also packs project via webpack, so we just need to tell Docusaurus webpack that the following configuration needs to be added

// docusaurus.config.js

module.exports = {
plugins: [
() => ({
name: "node-polyfill",
configureWebpack() {
return {
resolve: {
fallback: {
crypto: require.resolve("crypto-browserify"),
buffer: require.resolve("buffer/"),
path: false,
stream: false,
},
},
plugins: [new webpack.ProvidePlugin({ Buffer: ["buffer", "Buffer"] })],
}
},
}),
],
}