FCL does not bundle with create-react-app on node v16 and latest Webpack

Instructions

Please fill out the template below to the best of your ability and include a label indicating which tool/service you were working with when you encountered the problem.

Problem

When following the FCL quickstart tutorial https://docs.onflow.org/fcl/tutorials/flow-app-quickstart/ , on Node 16 Webpack throws an error (see below)

Steps to Reproduce

Node version: v16.13.1

Follow first steps of the FCL quickstart tutorial above, namely:

npx create-react-app flow-app
cd flow-app
npm install @onflow/fcl --save
# ... (create config.js with appropriate contents)
# ... (update App.js to contain all relevant quickstart code)
npm run start

Will result in:

ERROR in ./node_modules/@improbable-eng/grpc-web-node-http-transport/lib/index.js 8:11-26

Module not found: Error: Can't resolve 'http' in '/Users/mac/Desktop/flow/flow-dapp/node_modules/@improbable-eng/grpc-web-node-http-transport/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 }

Acceptance Criteria

Make FCL bundleable with new versions of webpack. This is also somewhat connected to #711 , as FCL is quite flaky with bundlers in general, as it doesn’t have proper ESM support. See https://github.com/samatechtw/onflow-fcl-esm for example of fix (this is working correctly for Vite)

Context

Not able to reproduce FCL quickstart tutorial

[bluesign]

Great work @muttoni

Javascript and bundlers are unfortunately big mess, maybe FCL should provide browserized modules in the future. ( I don’t see much problem using polyfills also on node side )

[muttoni]

+1 on NextJS, as it also sets the foundations for a more complete application. I’ve taken a stab at porting it to Next.js here: https://github.com/onflow/fcl-js/pull/953

I kept the approach/philosophy the same, but I also took the opportunity to link to some ready to go samples at the top for people just wanted to clone and go.