hasanayan / craco-module-federation

Enable Module Federation on your CRA project without ejecting or losing update support of react-scripts
MIT License
51 stars 19 forks source link

How can resolve "ChunkLoadError: Loading chunk" with your plugin? #10

Open danimauro16 opened 2 years ago

danimauro16 commented 2 years ago

My case I have an react app using CRACO without your craco-module-federation plugin, so my craco.config file looks like:

craco.config

const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
const deps = require("./package.json").dependencies;

module.exports = {
  devServer: {
    port: 5004
  },
  webpack: {
    plugins: [
      new ModuleFederationPlugin({
        name: "reactappcraco",
        filename: "remoteEntry.js",
        exposes: {
          "./web-components": "./src/index.js",
        },
        shared: {
          ...deps,
          react: {
            singleton: true,
            requiredVersion: deps.react,
          },
          "react-dom": {
            singleton: true,
            requiredVersion: deps["react-dom"],
          },
        },
      })
    ],
  }
}

But, when execute the app in the browser console shows:

Screen Shot 2022-04-27 at 12 30 38 PM

However, when I use your plugin this error does not show, I can see that you are using in your plugin the overrideWebpackConfig function, I would like to know why don't show you the ChunkError?.

maybe could be for this

Screen Shot 2022-04-27 at 12 38 14 PM

sorry this is not an issue, it is like a question.. ty.. :)

fiuzagr commented 1 year ago

@danimauro16 , I had the same problem. Define webpackConfig.output.publicPath = 'auto'; in your remote app.

See an example:

remote app https://github.com/fiuzagr/acme-repo/blob/cf213e6216b0f330c9a840904e43e3642827b461/sites/home-site/craco.config.js#L7

host app https://github.com/fiuzagr/acme-repo/blob/cf213e6216b0f330c9a840904e43e3642827b461/sites/root-site/craco.config.js#L11