How to fix "ReferenceError: btoa is not defined" while running build with Node.js?

[m-yahya]

Expected behavior

The bundle bundle.js created with the webpack should run without error with the command node bundle.js.

Actual behavior

I'm getting the following error:

webpack:///./app/node_modules/web3/node_modules/web3-providers-ws/src/helpers.js?:21
_btoa = btoa.bind(window);
^

ReferenceError: btoa is not defined
at Object.eval (webpack:///./app/node_modules/web3/node_modules/web3-providers-ws/src/helpers.js?:21:5)
at eval (webpack:///./app/node_modules/web3/node_modules/web3-providers-ws/src/helpers.js?:32:30)
at Object../app/node_modules/web3/node_modules/web3-providers-ws/src/helpers.js (C:\Users\User\Desktop\dApp-nodeJS-webpack-master\dist\bundle.js:4491:1)
at webpack_require (C:\Users\User\Desktop\dApp-nodeJS-webpack-master\dist\bundle.js:20:30)
at eval (webpack:///./app/node_modules/web3/node_modules/web3-providers-ws/src/index.js?:26:15)
at Object../app/node_modules/web3/node_modules/web3-providers-ws/src/index.js (C:\Users\User\Desktop\dApp-nodeJS-webpack-master\dist\bundle.js:4503:1)
at webpack_require (C:\Users\User\Desktop\dApp-nodeJS-webpack-master\dist\bundle.js:20:30)
at eval (webpack:///./app/node_modules/web3/node_modules/web3-core-requestmanager/src/index.js?:53:24)
at Object../app/node_modules/web3/node_modules/web3-core-requestmanager/src/index.js (C:\Users\User\Desktop\dApp-nodeJS-webpack-master\dist\bundle.js:4141:1)
at webpack_require (C:\Users\User\Desktop\dApp-nodeJS-webpack-master\dist\bundle.js:20:30)

Steps to reproduce the behavior

1. $ git clone https://github.com/olisystems/dApp-nodeJS-webpack.git
2. $ cd dApp-nodeJS-webpack
3. $ npm install
4. $ cd app && npm i
5. $ npm run ganache
6. open the new terminal and run $ npm run migrate
7. $ cd dApp-nodeJS-webpack
8. $ npm run dev
9. open a new terminal and run cd dist && node bundle.js

Environment

Node.js: 12
Web3: 1.2.11
OS: Windows, Ubunut 20.04

[m-yahya]

@GregTheGreek I upgraded to the latest release of web3, but still getting the same error.

[GregTheGreek]

This might be an issue with your webpack configuration

[m-yahya]

Thanks for the reply.
I'm using the following webpack configs:

const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const path = require('path')

module.exports = {
  entry: './index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  plugins: [new CleanWebpackPlugin()],
}

Update: You may find the project here.
Can you please be kind enough to help me what I'm missing here?

[GregTheGreek]

@cgewecke Any chance you have an idea here?

[mikhaili]

@cgewecke Any chance you have an idea here?
https://www.reddit.com/r/typescript/comments/em13kc/missing_basic_dom_types_in_typescript_project/