Web3.js: UMD bundle from CDN doesn't work

[filips123]

Expected behavior

UMD bundle from CDNs (and also downloaded files) should work normally. It should be possible to use Web3 1.0 in browsers with them without requiring any additional packages from NPM or other dependency managers.

Actual behavior

When using Web3 version beta 38 and later (probably this versions) from CDN (jsDelivr and also others) or downloading a file with UMD bundle, there will be an error and it will be impossible to use Web3 1.0.

Steps to reproduce the behavior

1. Create a simple HTML file with required Web3 UMB bundle:

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/web3.umd.min.js"></script>

1. Optionally serve this file with local web server (it would be same with or without server):

python3 -m http.server 80 # Python 3
php -S localhost:80 # PHP

1. Open this file in any browser (Firefox, Chrome, Edge) and open browser's JavaScript console. You will see errors.

Error Logs

Firefox:

TypeError: e is undefined web3.umd.js:1
    <anonimno> web3.umd.js:1
    <anonimno> web3.umd.js:1
    <anonimno> web3.umd.js:1

Chrome:

Uncaught TypeError: Cannot read property 'AbstractWeb3Module' of undefined
    at web3.umd.js:1
    at web3.umd.js:1
    at web3.umd.js:1
(anonymous) @ web3.umd.js:1
(anonymous) @ web3.umd.js:1
(anonymous) @ web3.umd.js:1

Edge:

SCRIPT5007: SCRIPT5007: Unable to get property 'AbstractWeb3Module' of undefined or null reference
web3.umd.min.js (7,1624)

Versions

Web3: 1.0.0-beta.41 (and also other versions)
Browsers: Firefox, Chrome, Edge

[MarkGeeRomano]

We are having similar issues that began with beta.38

Unable to subscribe to networkChanged { code: -32601,
  message: 'The method eth_networkChanged does not exist/is not available' }
Unable to subscribe to accountsChanged { code: -32601,
  message: 'The method eth_accountsChanged does not exist/is not available' }

Locking the version at beta.37 fixes our issues

[7Ds7]

If possible it would be great that the build process bundled one (minified or not) web3.js file.

[nivida]

We will no longer provide a minified full bundle in the NPM package. It's required to bundle your javascript code with Webpack. This because of performance and security reasons.

A Webpack starter project for the Web3.js lib can be found here.

[filips123]

Why? What performance and security reasons are there?

Many developers don't have Node.js installed so they can't use Webpack. For them, the pre-bundled file would be great.

[EddieOne]

How do we use web3 1.0 in the browser with latest version?

[filips123]

@EddieOne You have to install Node.js and Webpack, then download Web3 repository and run Webpack.

[EddieOne]

Yeah, I got all that but still I encounter bugs that should be fixed in the later beta versions. Do we need to rebuild the contracts?

web3.version.api
"0.20.3"

[hbrs]

Can someone explain how to compile web3.js for the browser using webpack? I have never worked with webpack and the documentation also doesn't tell us how it works.

[EddieOne]

https://github.com/ethereum/web3-examples/tree/development/starters/webpack