<h1 dir="auto">Bug report</h1>




<p dir="auto"><strong>What is the current behavior?</strong><br>
seeing this error in minified version of code:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="console error: Error: Minified React error #130; visit https://reactjs.org/docs/error-decoder.html?invariant=130&amp;args[]=undefined&amp;args[]= for the full message or use the non-minified dev environment for full errors and additional helpful warnings."><pre class="notranslate"><code class="notranslate">console error: Error: Minified React error #130; visit https://reactjs.org/docs/error-decoder.html?invariant=130&amp;args[]=undefined&amp;args[]= for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
</code></pre></div>
<p dir="auto">code works fine in:</p>
<ul dir="auto">
<li>non-minified version</li>
<li>when compiled with 4.43.0 of webpack</li>
</ul>
<p dir="auto"><strong>If the current behavior is a bug, please provide the steps to reproduce.</strong></p>






<p dir="auto"><strong>What is the expected behavior?</strong></p>
<p dir="auto">no exceptions</p>


<p dir="auto"><strong>Other relevant information:</strong><br>
webpack version:  4.44.0<br>
Node.js version:<br>
Operating System:<br>
Additional tools:</p>
<p dir="auto"><strong>What is the current behavior?</strong><br>
I moved from 5.beta.17 to the official 5.0.0 webpack version and the module federation project fails with with different errors as I think the main one is <code class="notranslate">ChunkLoadError: Loading chunk src_components_admin_users_index_js failed.</code>.<br>
Funny thing is that sometimes it works sometimes not. Sometimes its loading all the chunks sometimes not..</p>
<p dir="auto">Both host and plugin projects live in S3 bucket and when I try to connect from my local pc to the s3 bucket for the plugin everything works smoothly. I don't know how this chunk name was created as I don't see it in the s3 bucket.<br>
I am developing a host and plugin project using module federation since the beginning and everything was ok until I move to 5.0.0.<br>
<strong>The 1st error which I get is:</strong><br>
<code class="notranslate">GET ... 404 ChunkLoadError: Loading chunk src_components_admin_users_index_js failed.</code>. --&gt; But there is not a chunk with this name at all..</p>
<p dir="auto"><strong>2nd error which I get and it is super weird is about duplicated graphql packages.</strong><br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/45165261/95825285-4a8d4000-0d39-11eb-922f-21380503d199.png"><img src="https://user-images.githubusercontent.com/45165261/95825285-4a8d4000-0d39-11eb-922f-21380503d199.png" alt="Screenshot 2020-10-13 at 9 48 43" style="max-width: 100%;"></a></p>
<p dir="auto">** I had the same issue in the beginning but forcing the dep to be singleton worked perfectly before.</p>
<p dir="auto"><strong>If the current behavior is a bug, please provide the steps to reproduce.</strong></p>
<p dir="auto">Host project: webpack.config:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="/** @type {import('webpack').Configuration} */
module.exports = {
    output: {
        publicPath: dotenv.parsed.REACT_APP_PUBLIC_PATH,
        uniqueName: 'platform',
        filename: '[name].js',
        library: 'platform',
        chunkFilename: '[name][chunkhash].js'
    },
    devtool: 'source-map',
    cache: false,
    resolve: {
        extensions: ['.jsx', '.js', '.json'],
        alias: {... }
    },
    module: {
        rules: [
              .... loaders,
             // I leave this one here as I needed to do in order to run the project locally after migration to 5.00
            {
                test: /\.m?js/,
                resolve: {
                    fullySpecified: false
                }
            }
        ]
    },
    plugins: [
        new ModuleFederationPlugin({
            name: 'platform',
            library: { type: 'var', name: 'platform' },
            filename: 'remoteManifest.js',
            remotes: {
                app1: 'app1'
            },
            exposes: {
                 ....Components..
            },
            shared: {
                ...dependencies,
                react: {
                    eager: true,
                    singleton: true,
                    requiredVersion: dependencies.react
                },
                'react-dom': {
                    eager: true,
                    singleton: true,
                    requiredVersion: dependencies['react-dom']
                },
                'react-router-dom': {
                    eager: true,
                    singleton: true,
                    requiredVersion: dependencies['react-router-dom']
                },
                '@apollo/client': {
                    singleton: true,
                    requiredVersion: dependencies['@apollo/client']
                },
                graphql: {
                    singleton: true,
                    requiredVersion: dependencies['graphql']
                },
            }
        }),
        new HtmlWebpackPlugin({
            template: path.resolve(__dirname, 'public/index.html'),
            filename: './index.html',
            inject: true,
            favicon: path.resolve(__dirname, 'public/favicon.ico')
        })
    ]
};"><pre class="notranslate"><code class="notranslate">/** @type {import('webpack').Configuration} */
module.exports = {
    output: {
        publicPath: dotenv.parsed.REACT_APP_PUBLIC_PATH,
        uniqueName: 'platform',
        filename: '[name].js',
        library: 'platform',
        chunkFilename: '[name][chunkhash].js'
    },
    devtool: 'source-map',
    cache: false,
    resolve: {
        extensions: ['.jsx', '.js', '.json'],
        alias: {... }
    },
    module: {
        rules: [
              .... loaders,
             // I leave this one here as I needed to do in order to run the project locally after migration to 5.00
            {
                test: /\.m?js/,
                resolve: {
                    fullySpecified: false
                }
            }
        ]
    },
    plugins: [
        new ModuleFederationPlugin({
            name: 'platform',
            library: { type: 'var', name: 'platform' },
            filename: 'remoteManifest.js',
            remotes: {
                app1: 'app1'
            },
            exposes: {
                 ....Components..
            },
            shared: {
                ...dependencies,
                react: {
                    eager: true,
                    singleton: true,
                    requiredVersion: dependencies.react
                },
                'react-dom': {
                    eager: true,
                    singleton: true,
                    requiredVersion: dependencies['react-dom']
                },
                'react-router-dom': {
                    eager: true,
                    singleton: true,
                    requiredVersion: dependencies['react-router-dom']
                },
                '@apollo/client': {
                    singleton: true,
                    requiredVersion: dependencies['@apollo/client']
                },
                graphql: {
                    singleton: true,
                    requiredVersion: dependencies['graphql']
                },
            }
        }),
        new HtmlWebpackPlugin({
            template: path.resolve(__dirname, 'public/index.html'),
            filename: './index.html',
            inject: true,
            favicon: path.resolve(__dirname, 'public/favicon.ico')
        })
    ]
};
</code></pre></div>
<p dir="auto"><strong>webpack.config remote plugin:</strong></p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="
/** @type {import('webpack').Configuration} */
module.exports = {
    output: {
        path: DIST_DIR,
        uniqueName: 'plugin',
        filename: '[name].js',
        library: 'plugin',
        chunkFilename: '[name][chunkhash].js',
        publicPath: dotenv.parsed.REACT_APP_PUBLIC_PATH
    },
    devtool: 'source-map',
    resolve: {
        extensions: ['.jsx', '.js', '.json'],
        alias: {}
    },
    devServer: {
        historyApiFallback: true,
        inline: true,
        port: parseInt(dotenv.parsed.PORT)
    },
    module: {
        rules: [
            loaders...,
            {
                test: /\.m?js/,
                type: 'javascript/auto',
                resolve: {
                    fullySpecified: false
                }
            }
        ]
    },
    plugins: [
        new ModuleFederationPlugin({
            name: 'app1',
            library: { type: 'var', name: 'app1' },
            filename: 'remoteManifest.js',
            remotes: {
                platform: 'platform'
            },
            exposes: {
              ....components
            },
            shared: {
                ...dependencies,
                react: {
                    singleton: true,
                    requiredVersion: dependencies.react
                },
                'react-dom': {
                    singleton: true,
                    requiredVersion: dependencies['react-dom']
                },
                '@apollo/client': {
                    singleton: true,
                    requiredVersion: dependencies['@apollo/client']
                },
                graphql: {
                    singleton: true,
                    requiredVersion: dependencies['graphql']
                }
            }
        })
    ]
};"><pre class="notranslate"><code class="notranslate">
/** @type {import('webpack').Configuration} */
module.exports = {
    output: {
        path: DIST_DIR,
        uniqueName: 'plugin',
        filename: '[name].js',
        library: 'plugin',
        chunkFilename: '[name][chunkhash].js',
        publicPath: dotenv.parsed.REACT_APP_PUBLIC_PATH
    },
    devtool: 'source-map',
    resolve: {
        extensions: ['.jsx', '.js', '.json'],
        alias: {}
    },
    devServer: {
        historyApiFallback: true,
        inline: true,
        port: parseInt(dotenv.parsed.PORT)
    },
    module: {
        rules: [
            loaders...,
            {
                test: /\.m?js/,
                type: 'javascript/auto',
                resolve: {
                    fullySpecified: false
                }
            }
        ]
    },
    plugins: [
        new ModuleFederationPlugin({
            name: 'app1',
            library: { type: 'var', name: 'app1' },
            filename: 'remoteManifest.js',
            remotes: {
                platform: 'platform'
            },
            exposes: {
              ....components
            },
            shared: {
                ...dependencies,
                react: {
                    singleton: true,
                    requiredVersion: dependencies.react
                },
                'react-dom': {
                    singleton: true,
                    requiredVersion: dependencies['react-dom']
                },
                '@apollo/client': {
                    singleton: true,
                    requiredVersion: dependencies['@apollo/client']
                },
                graphql: {
                    singleton: true,
                    requiredVersion: dependencies['graphql']
                }
            }
        })
    ]
};
</code></pre></div>
<p dir="auto"><strong>And my package.json: ( they look pretty much the same in both ):</strong></p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&quot;scripts&quot;: {
    &quot;start&quot;: &quot;webpack-dev-server --mode development --liveReload&quot;,
    &quot;build:prod&quot;: &quot;webpack --mode production&quot;,
    &quot;generate&quot;: &quot;graphql-codegen --config codegen.yml&quot;,
    .. more scripts...
  },
  &quot;dependencies&quot;: {
    &quot;@apollo/client&quot;: &quot;^3.2.3&quot;,
    &quot;@babel/plugin-proposal-class-properties&quot;: &quot;^7.10.4&quot;,
    &quot;@babel/runtime&quot;: &quot;^7.11.2&quot;,
    &quot;dotenv&quot;: &quot;^8.2.0&quot;,
    &quot;exceljs&quot;: &quot;^4.1.1&quot;,
    &quot;file-saver&quot;: &quot;^2.0.2&quot;,
    &quot;graphql&quot;: &quot;15.3.0&quot;,
    &quot;jsdoc&quot;: &quot;^3.6.4&quot;,
    &quot;json-loader&quot;: &quot;^0.5.7&quot;,
    &quot;lodash&quot;: &quot;^4.17.19&quot;,
    &quot;mini-css-extract-plugin&quot;: &quot;^0.9.0&quot;,
    &quot;moment&quot;: &quot;^2.27.0&quot;,
    &quot;react&quot;: &quot;^16.13.1&quot;,
    &quot;react-dom&quot;: &quot;^16.13.1&quot;,
    &quot;react-flexa&quot;: &quot;^0.9.1&quot;,
    &quot;react-router-dom&quot;: &quot;5.2.0&quot;,
    &quot;react-select&quot;: &quot;^3.1.0&quot;
  },"><pre class="notranslate"><code class="notranslate">"scripts": {
    "start": "webpack-dev-server --mode development --liveReload",
    "build:prod": "webpack --mode production",
    "generate": "graphql-codegen --config codegen.yml",
    .. more scripts...
  },
  "dependencies": {
    "@apollo/client": "^3.2.3",
    "@babel/plugin-proposal-class-properties": "^7.10.4",
    "@babel/runtime": "^7.11.2",
    "dotenv": "^8.2.0",
    "exceljs": "^4.1.1",
    "file-saver": "^2.0.2",
    "graphql": "15.3.0",
    "jsdoc": "^3.6.4",
    "json-loader": "^0.5.7",
    "lodash": "^4.17.19",
    "mini-css-extract-plugin": "^0.9.0",
    "moment": "^2.27.0",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-flexa": "^0.9.1",
    "react-router-dom": "5.2.0",
    "react-select": "^3.1.0"
  },
</code></pre></div>
<p dir="auto"><strong>Code to get remote scripts:</strong></p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="export const useDynamicScript = () =&gt; {
    const [ready, setReady] = useState(false);
    const [failed, setFailed] = useState(false);

    useEffect(() =&gt; {
        const fetchManifests = async (urls) =&gt; {
            Promise.all(urls.map((url) =&gt; loadScript(url))).then(() =&gt; setReady(true));
        };
        setReady(false);
        setFailed(false);

        let urls = Object.entries(process.env)
            .filter((x) =&gt; x[0].endsWith('PACKAGE'))
            .map((y) =&gt; y[1]);

        fetchManifests(urls);
    }, []);

    return {
        ready,
        failed
    };
};

export const loadComponent = (scope, module) =&gt; {
    return async () =&gt; {
        // Initializes the share scope. This fills it with known provided modules from this build and all remotes
        await __webpack_init_sharing__('default');
        const container = window[scope]; // or get the container somewhere else
        // Initialize the container, it may provide shared modules
        await container.init(__webpack_share_scopes__.default);
        const factory = await window[scope].get(module);
        const Module = factory();

        return Module;
    };
};

const loadScript = (url) =&gt;
    new Promise((resolve) =&gt; {
        const element = document.createElement('script');
        element.async = true;
        element.src = `${url}remoteManifest.js`;
        element.type = 'text/javascript';

        document.head.appendChild(element);

        element.addEventListener('load', resolve, {
            once: true
        });
    });"><pre class="notranslate"><code class="notranslate">export const useDynamicScript = () =&gt; {
    const [ready, setReady] = useState(false);
    const [failed, setFailed] = useState(false);

    useEffect(() =&gt; {
        const fetchManifests = async (urls) =&gt; {
            Promise.all(urls.map((url) =&gt; loadScript(url))).then(() =&gt; setReady(true));
        };
        setReady(false);
        setFailed(false);

        let urls = Object.entries(process.env)
            .filter((x) =&gt; x[0].endsWith('PACKAGE'))
            .map((y) =&gt; y[1]);

        fetchManifests(urls);
    }, []);

    return {
        ready,
        failed
    };
};

export const loadComponent = (scope, module) =&gt; {
    return async () =&gt; {
        // Initializes the share scope. This fills it with known provided modules from this build and all remotes
        await __webpack_init_sharing__('default');
        const container = window[scope]; // or get the container somewhere else
        // Initialize the container, it may provide shared modules
        await container.init(__webpack_share_scopes__.default);
        const factory = await window[scope].get(module);
        const Module = factory();

        return Module;
    };
};

const loadScript = (url) =&gt;
    new Promise((resolve) =&gt; {
        const element = document.createElement('script');
        element.async = true;
        element.src = `${url}remoteManifest.js`;
        element.type = 'text/javascript';

        document.head.appendChild(element);

        element.addEventListener('load', resolve, {
            once: true
        });
    });
</code></pre></div>
<p dir="auto">What I tried?</p>
<ul dir="auto">
<li>Connecting to the s3 bucket from my local machine and everything works perfectly.</li>
<li>Adding resolutions in the package.jsons in both of the projects.</li>
<li>Clean installs multiple times</li>
<li>Singleton/Eager in both of them ( another topic is that I dont think its needed - just tried everything which I could think of)</li>
</ul>
<p dir="auto"><strong>What is the expected behavior?</strong></p>
<p dir="auto">It should load normally as its in local mode.</p>
<p dir="auto"><strong>Other relevant information:</strong><br>
webpack version:  5.0.0<br>
Node.js version: 12.10<br>
Operating System:<br>
Additional tools: Hosted in S3 bucket</p>