[ HW | ISSUE ]: webpack build successful, but RemoteComponent giving issues

On react building i have this error

Module not found: Error: Can't resolve 'http' in '.../node_modules/@paciolan/remote-module-loader/dist/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 }

What is my option here? I just want simply to load a webpack bundle from server…

[joelnet]

Ok it appears Webpack 5 has a BREAKING CHANGE. I am guessing create-react-app 5 switched to Webpack 5.

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 }

So there are a few (not so great) options.

• downgrade to create-react-app 4
• eject to access the create-react-app webpack config. (the one in the directory is not for create-react-app)
• wait for upgrade to the remote-component.

Not sure how long it will take for the upgrade. Still need to do some testing and the change I am thinking of will also create a breaking change in the remote-component.

[smeng9]

Hi @joelnet,

The root cause of the problem with webpack 5 is one of the dependency remote-module-loader is importing a node version of fetcher into browser without polyfill. https://github.com/Paciolan/remote-module-loader/blob/b9558d5651300cbb183eea5804619cd09a5432d9/src/lib/nodeFetcher.ts#L1

Packages like http and https are not available in browser, and XMLHTTPRequest is not available in node. I think an easier solution without introducing breaking change would be removing nodeFetcher and xmlHttpRequestFetcher in https://github.com/Paciolan/remote-module-loader/tree/b9558d5651300cbb183eea5804619cd09a5432d9/src/lib and use axios (as it is isomorphic) in https://github.com/Paciolan/remote-module-loader/blob/b9558d5651300cbb183eea5804619cd09a5432d9/src/lib/loadRemoteModule.ts

If we are no longer interested in supporting old node versions below 17.5 and old IE, we can use the newly introduced fetch API as default fetcher.

For anyone who want to stay with webpack 5 and does not eject, you can use react-app-rewired to add resolve.fallback: { “http”: false, “https”: false }