Can't resolve 'http' error when using on React app

[cardil]

Describe the Bug
I'm trying to use CE javascript SDK in a React app. I have the following err:

ERROR in ./node_modules/cloudevents/dist/transport/http/index.js 16:31-46

Module not found: Error: Can't resolve 'http' in '/home/ksuszyns/git/openshift-knative-showcase/frontend/node_modules/cloudevents/dist/transport/http'

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 }

That error is thrown just after trying to create the CE:

const ce = new CloudEvent({})

I just wanted to parse incoming Server Sent Events data that is in structured-mode CE.

Steps to Reproduce

1. Create React app with: npx create-react-app frontend --template typescript
2. Install CE: npm i --save cloudevents
3. Import CE and attempt to create basic object:

   import { CloudEvent } from 'cloudevents'
   
   const ce = new CloudEvent({})

You can also see this error on this commit: cardil/openshift-knative-showcase@cc8ffe2

Expected Behavior

I just want to create basic CE objects, in React app. And parse them from the JSON text, in the near future. No errors should be thrown.

[cardil]

/kind bug

[cardil]

As a workaround, I've created a rudimentary implementation of CE, see: cardil/openshift-knative-showcase@eb89f73#diff-58fee3b5a7bfb1b5ea233e33d76eda15c8c7e034f76d62770b763526c4475328

[Adrug]

Did you try this solution?
#490 (comment)

[cardil]

Unfortunately that can't be done in standard Create-react-app. I would need to eject the CRA to have full access to the configuration files.

[github-actions]

This issue is stale because it has been open 30 days with no activity.

[matulko]

This issue also exists for any other stack that encapsulates webpack, I see the same issue with Angular. Would it be possible to have the transports more isolated from the actual events? It works fine if I stick to interface, once I try to use the class it fails.

[matulko]

I was almost able to solve it by applying a workaround:
npm install https-browserify stream-http url

And adding paths to tsconfig.json:

{
  "compilerOptions": {
    "paths": {
      "https": ["./node_modules/https-browserify"],
      "http": ["./node_modules/stream-http"]
    },
  }
}

Kudos goes to https://stackoverflow.com/questions/67572355/webpack-5-angular-polyfill-for-node-js-crypto-js

Unfortunately, you still need process as Webpack plugin, see:
https://stackoverflow.com/questions/64557638/how-to-polyfill-node-core-modules-in-webpack-5

So the build works now, but the application fails in browser :-(.

[matulko]

With this polyfill code it works, but it feels bad man :-)

if (!('process' in window)) {
  window.process = {
    env: {
    }
  }
}

if (!('global' in window)) {
  window.global = window;
}

[github-actions]

This issue is stale because it has been open 30 days with no activity.