Powerapps code components with react and web3

Question

I am doing a very simple powerapps code component project using react and web3. As soon as I build the project, I get a bunch of errors. Many of them I managed to clear them out, however I have 7 persistent ones, and I searched for hours, however, I cannot seem to find a answer. I installed all the modules that are being suggested in the error screen.

Note: This only happens when I introduce Web3.

import * as React from 'react';
import { Label } from '@fluentui/react';
import Web3 from "web3"

export function HelloWorld(){

  function webbing(){
    const web3 = new Web3("HTTP://127.0.0.1:7545")
  }
  return(
    <h1>hi</h1>
  )
}

ERROR in ./node_modules/eth-lib/lib/bytes.js 9:193-227 Module not found: Error: Can't resolve 'crypto' in 'C:\Users\RobertGatt-TDF\Desktop\powerapps\testing-12-05-2022\node_modules\eth-lib\lib'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default. This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to: - add a fallback 'resolve.fallback: { "crypto": require.resolve("crypto-browserify") }' - install 'crypto-browserify' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "crypto": false } @ ./node_modules/swarm-js/lib/api-browser.js 32:12-40 @ ./node_modules/web3-bzz/lib/index.js 25:12-31 @ ./node_modules/web3/lib/index.js 42:10-29 @ ./VirtualControl/HelloWorld.tsx 10:13-28 @ ./VirtualControl/index.ts 8:19-42

ERROR in ./node_modules/web3-eth-accounts/lib/index.js 37:74-91 Module not found: Error: Can't resolve 'crypto' in 'C:\Users\RobertGatt-TDF\Desktop\powerapps\testing-12-05-2022\node_modules\web3-eth-accounts\lib'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default. This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to: - add a fallback 'resolve.fallback: { "crypto": require.resolve("crypto-browserify") }' - install 'crypto-browserify' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "crypto": false } @ ./node_modules/web3-eth/lib/index.js 45:15-43 @ ./node_modules/web3/lib/index.js 34:10-29 @ ./VirtualControl/HelloWorld.tsx 10:13-28 @ ./VirtualControl/index.ts 8:19-42

ERROR in ./node_modules/web3-eth-accounts/node_modules/eth-lib/lib/bytes.js 7:193-227 Module not found: Error: Can't resolve 'crypto' in 'C:\Users\RobertGatt-TDF\Desktop\powerapps\testing-12-05-2022\node_modules\web3-eth-accounts\node_modules\eth-lib\lib'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default. This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to: - add a fallback 'resolve.fallback: { "crypto": require.resolve("crypto-browserify") }' - install 'crypto-browserify' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "crypto": false } @ ./node_modules/web3-eth-accounts/node_modules/eth-lib/lib/account.js 1:12-30 @ ./node_modules/web3-eth-accounts/lib/index.js 35:14-44 @ ./node_modules/web3-eth/lib/index.js 45:15-43 @ ./node_modules/web3/lib/index.js 34:10-29 @ ./VirtualControl/HelloWorld.tsx 10:13-28 @ ./VirtualControl/index.ts 8:19-42

ERROR in ./node_modules/web3-providers-http/lib/index.js 30:11-26 Module not found: Error: Can't resolve 'http' in 'C:\Users\RobertGatt-TDF\Desktop\powerapps\testing-12-05-2022\node_modules\web3-providers-http\lib'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default. This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to: - add a fallback 'resolve.fallback: { "http": require.resolve("stream-http") }' - install 'stream-http' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "http": false } @ ./node_modules/web3-core-requestmanager/lib/index.js 56:16-46 @ ./node_modules/web3-core/lib/index.js 23:21-56 @ ./node_modules/web3/lib/index.js 32:11-31 @ ./VirtualControl/HelloWorld.tsx 10:13-28 @ ./VirtualControl/index.ts 8:19-42

ERROR in ./node_modules/web3-providers-http/lib/index.js 32:12-28 Module not found: Error: Can't resolve 'https' in 'C:\Users\RobertGatt-TDF\Desktop\powerapps\testing-12-05-2022\node_modules\web3-providers-http\lib'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default. This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to: - add a fallback 'resolve.fallback: { "https": require.resolve("https-browserify") }' - install 'https-browserify' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "https": false } @ ./node_modules/web3-core-requestmanager/lib/index.js 56:16-46 @ ./node_modules/web3-core/lib/index.js 23:21-56 @ ./node_modules/web3/lib/index.js 32:11-31 @ ./VirtualControl/HelloWorld.tsx 10:13-28 @ ./VirtualControl/index.ts 8:19-42

ERROR in ./node_modules/xhr2-cookies/dist/xml-http-request.js 41:11-26 Module not found: Error: Can't resolve 'http' in 'C:\Users\RobertGatt-TDF\Desktop\powerapps\testing-12-05-2022\node_modules\xhr2-cookies\dist'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default. This is no longer the case. Verify if you need this module and configure a polyfill for it. If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "https": false } @ ./node_modules/xhr2-cookies/dist/index.js 13:9-38 @ ./node_modules/web3-providers-http/lib/index.js 27:11-49 @ ./node_modules/web3-core-requestmanager/lib/index.js 56:16-46 @ ./node_modules/web3-core/lib/index.js 23:21-56 @ ./node_modules/web3/lib/index.js 32:11-31 @ ./VirtualControl/HelloWorld.tsx 10:13-28 @ ./VirtualControl/index.ts 8:19-42

7 errors have detailed information that is not shown. Use 'stats.errorDetails: true' resp. '--stats-error-details' to show it.

webpack 5.72.1 compiled with 7 errors in 13295 ms [pcf-scripts] [Error] encountered unexpected error: Error: An error occurred compiling or bundling the control.