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

[mkikets99]

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...

[mkikets99]

Some more info on this:
it happened when using an import:
import { RemoteComponent } from '@paciolan/remote-component'
or
import { RemoteComponent } from '../../../RemoteComponent'
with a RemoteComponent.js file

import {
    createRemoteComponent,
    createRequires
  } from "@paciolan/remote-component";
  import { resolve } from "./remote-component.config";
  
  const requires = createRequires(resolve);
  
  export const RemoteComponent = createRemoteComponent({ requires });

and remote-component.config.js file

/**
 * Dependencies for Remote Components
 */
 module.exports = {
    resolve: {
        react: require("react"),
    },
    output: {
        libraryTarget: "commonjs"
    },
    externals: {
        react: "react"
    }
  };

[joelnet]

Are you using http in your remote component? Do you like a link to the repository?

[mkikets99]

nope, i dont...
https://github.com/mkikets99/auditforme4-react
Inform me... cause i will needed to close it asap
It is inside of src/components/pages/admin/Main.js

[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.

[mkikets99]

Ok. Got it.
I will eject for now...
Cause i made a config for webpack, and don't want to loose it...

Wishing you best to upgrade it. And waiting for new version.

[maheshnaidusyyadri]

Hi, I starting facing same problem in ionic app.

is there any update on upgrading 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 }

[seikosantana]

While react-app-rewired states

As of Create React App 2.0 this repo is "lightly" maintained mostly by the community at this point.

I've been using craco with this config as workaround:

module.exports = {
    webpack: {
        configure: {
            resolve: {
                fallback: {
                    "http": false,
                    "https": false
                },
            },
        },
    },
};

And @maheshnaidusyyadri, about ionic, with the above craco configuration, it is able to load remote components. However, I wasn't able to add more external libraries. To work it out and for more convenient, I forked the remote-component-starter and updated packages, webpack version, and added Ionic app scaffolding so during development it looks like how it will look like when being loaded into the ionic app. I'm not so experienced with webpack and modules, so it might not be the best setup. At least it works, integrates with ionic, and uses more recent packages, and webpack 5..