I have a react app with webpack recently upgraded to version 5.
I am getting the following error and need help in fixing it
Uncaught (in promise) TypeError: crypto.createSign is not a function
at Object.sign (index.js:151)
at Object.jwsSign [as sign] (sign-stream.js:32)
at GoogleToken.requestToken (index.js:225)
at GoogleToken.getTokenAsyncInner (index.js:163)
at GoogleToken.getTokenAsync (index.js:142)
at GoogleToken.getToken (index.js:94)
at JWT.refreshTokenNoCache (jwtclient.js:158)
at JWT.refreshToken (oauth2client.js:143)
at JWT.authorizeAsync (jwtclient.js:139)
at JWT.authorize (jwtclient.js:135)
when the following code is executed (The credentials are correct)
const { GoogleSpreadsheet } = require("google-spreadsheet");
.
.
.
let submitOrderDetails = async () => {
const SPREADSHEET_ID = "working-id-here";
const doc = new GoogleSpreadsheet(SPREADSHEET_ID);
// this fails
await doc.useServiceAccountAuth({
client_email: creds.client_email,
private_key: creds.private_key,
});
.
.
.
}
webpack.config.json
const HtmlWebPackPlugin = require("html-webpack-plugin");
const path = require("path");
const webpack = require("webpack");
module.exports = {
context: __dirname,
entry: "./src/index.js",
output: {
path: path.join(__dirname, "build"),
filename: "main.js",
publicPath: "/",
},
target: "web",
devServer: {
historyApiFallback: true,
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: "babel-loader",
},
{
test: /\.scss$/,
use: [
"style-loader", //3. Inject styles into DOM
"css-loader", //2. Turns css into commonjs
"sass-loader", //1. Turns sass into css
],
},
{
test: /\.(png|jp?g|svg|gif)?$/,
use: {
loader: "file-loader",
},
},
],
},
plugins: [
new HtmlWebPackPlugin({
template: path.join(__dirname, "public/index.html"),
filename: "index.html",
}),
new webpack.ProvidePlugin({
process: "process/browser",
}),
],
resolve: {
fallback: {
fs: false,
tls: false,
net: false,
path: false,
zlib: false,
http: false,
https: false,
stream: false,
crypto: false,
"crypto-browserify": require.resolve("crypto-browserify"),
os: require.resolve("os-browserify/browser"),
child_process: false,
},
},
};
package.json
{
"name": "my-project",
"version": "0.1.0",
"private": true,
"dependencies": {
"crypto": "^1.0.1",
"crypto-browserify": "^3.12.0",
"fs": "0.0.1-security",
"google-spreadsheet": "^3.2.0",
"googleapis": "^67.0.0",
"http": "0.0.1-security",
"https-browserify": "^1.0.0",
"net": "^1.0.2",
"os": "^0.1.2",
"path": "^0.12.7",
"prettier": "^2.5.1",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-router-dom": "^5.3.0",
"react-scripts": "4.0.1",
"stream": "0.0.2",
"tls": "0.0.1",
"zlib": "^1.0.5"
},
"scripts": {
"start": "webpack serve --mode development",
"build": "webpack --mode production",
"pretty": "prettier --write \"./**/*.*\""
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"@babel/core": "^7.16.5",
"@babel/plugin-proposal-class-properties": "^7.16.5",
"@babel/plugin-transform-runtime": "^7.16.5",
"@babel/preset-env": "^7.16.5",
"@babel/preset-react": "^7.16.5",
"babel-loader": "^8.2.3",
"clean-webpack-plugin": "^4.0.0",
"css-loader": "^5.2.7",
"file-loader": "^6.2.0",
"html-webpack-plugin": "^5.5.0",
"mini-css-extract-plugin": "^2.4.5",
"node-sass": "^6.0.1",
"optimize-css-assets-webpack-plugin": "^6.0.1",
"process": "^0.11.10",
"sass-loader": "^12.4.0",
"style-loader": "^2.0.0",
"terser-webpack-plugin": "^5.3.0",
"webpack": "^5.65.0",
"webpack-cli": "^4.9.1",
"webpack-dev-server": "^3.11.3",
"webpack-merge": "^5.8.0"
}
}
Answering my own question. I updated the webpack config by adding fallbacks.
Here are the updated webpack.config.json and package.json
webpack.config.json
const HtmlWebPackPlugin = require("html-webpack-plugin");
const path = require("path");
const webpack = require("webpack");
module.exports = {
context: __dirname,
entry: "./src/index.js",
output: {
path: path.join(__dirname, "build"),
filename: "main.js",
publicPath: "/",
},
target: "web",
devServer: {
historyApiFallback: true,
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: "babel-loader",
},
{
test: /\.scss$/,
use: [
"style-loader", //3. Inject styles into DOM
"css-loader", //2. Turns css into commonjs
"sass-loader", //1. Turns sass into css
],
},
{
test: /\.(png|jp?g|svg|gif)?$/,
use: {
loader: "file-loader",
},
},
],
},
plugins: [
new HtmlWebPackPlugin({
template: path.join(__dirname, "public/index.html"),
filename: "index.html",
}),
new webpack.ProvidePlugin({
process: "process/browser",
Buffer: ["buffer", "Buffer"],
}),
],
resolve: {
fallback: {
fs: false,
tls: "empty",
child_process: false,
util: require.resolve("util/"),
buffer: require.resolve("buffer"),
assert: require.resolve("assert/"),
http: require.resolve("stream-http"),
path: require.resolve("path-browserify"),
https: require.resolve("https-browserify"),
os: require.resolve("os-browserify/browser"),
stream: require.resolve("stream-browserify"),
crypto: require.resolve("crypto-browserify"),
"crypto-browserify": require.resolve("crypto-browserify"),
},
},
};
package.json
{
"name": "sigmaprints",
"version": "1.0.0",
"private": true,
"scripts": {
"start": "webpack serve --mode development",
"build": "webpack --mode production",
"pretty": "prettier --write \"./**/*.*\""
},
"devDependencies": {
"@babel/core": "^7.12.1",
"@babel/plugin-proposal-class-properties": "^7.12.1",
"@babel/plugin-transform-runtime": "^7.14.5",
"@babel/preset-env": "^7.12.1",
"@babel/preset-react": "^7.12.1",
"babel-loader": "^8.1.0",
"clean-webpack-plugin": "^3.0.0",
"copy-webpack-plugin": "^6.2.1",
"cross-env": "^7.0.2",
"css-loader": "^5.0.0",
"file-loader": "^6.2.0",
"css-minimizer-webpack-plugin": "^1.1.5",
"process": "0.11.10",
"html-webpack-plugin": "^4.5.0",
"node-sass": "^4.14.1",
"optimize-css-assets-webpack-plugin": "^5.0.4",
"prettier": "^2.1.2",
"sass-loader": "^10.0.3",
"style-loader": "^2.0.0",
"terser-webpack-plugin": "^4.2.3",
"webpack": "^5.1.2",
"webpack-cli": "^4.0.0",
"webpack-dev-server": "^3.11.0",
"webpack-merge": "^5.2.0"
},
"browser": {
"crypto": false
},
"dependencies": {
"assert": "^2.0.0",
"buffer": "^6.0.3",
"crypto-browserify": "^3.12.0",
"google-spreadsheet": "^3.1.15",
"http-browserify": "^1.7.0",
"https-browserify": "^1.0.0",
"net": "^1.0.2",
"os-browserify": "^0.3.0",
"path-browserify": "^1.0.1",
"react": "^16.14.0",
"react-dom": "^16.14.0",
"react-router-dom": "^5.2.0",
"stream-browserify": "^3.0.0",
"stream-http": "^3.2.0",
"tls": "0.0.1",
"util": "^0.12.4"
}
}