@17biubiu to add on to @jacob-ebey reply, if you are talking about exposed components not working then may be you are facing https://github.com/module-federation/module-federation-examples/issues/646

<!-- identifier: admin-actions -->

For maintainers only:

• [ ] webpack-4
• [ ] webpack-5
• [ ] bug
• [ ] critical-bug
• [ ] enhancement
• [ ] documentation
• [ ] performance
• [ ] dependencies
• [ ] question

@sokra sorry to put comments on an old PR. just wanted to point out something. this change altered the behavior of the compiler. and it's not mentioned as a breaking change in the docs.

Previously you could do this.

const compiler = webpack(config);

// ... do other things, or pass the compiler to other functions

compiler.run(); // compiler starts here.

but now, compiler starts as soon as webpack is called. which is not a huge deal, but a significant change in behavior.

Similar change happened for .watch it would have started the compiler in watch mode before. now it doesn't work that way.

Originally posted by @serkanyersen in https://github.com/webpack/webpack/pull/11252#r562877999

@sokra sorry to put comments on an old PR. just wanted to point out something. this change altered the behavior of the compiler. and it's not mentioned as a breaking change in the docs.

Previously you could do this.

const compiler = webpack(config);

// ... do other things, or pass the compiler to other functions

compiler.run(); // compiler starts here.

but now, compiler starts as soon as webpack is called. which is not a huge deal, but a significant change in behavior.

Similar change happened for .watch it would have started the compiler in watch mode before. now it doesn't work that way.

(note: deleted my comments, I think perhaps output.libraryTarget default might have changed, but explicitly setting to UMD preserved the exports.)

@sokra or @TheLarkInn Should I open a separate issue for this? If you want me to isolate a repro I can; or if there's a newer build with this addressed I can try it out.

I am seeing something very similar. We have a library keyboard-key, which exports a constant like so:

export const GraveAccentKey = keyboardKey['`'];

We have a test-bundle package which tries to bundle (production build) keyboard-key starting at the index.

In webpack 4, I see output like this in the minified bundle:

  function (n, e, r) {
    "use strict";
    r.r(e),
      r.d(e, "getCode", function () {
        return o;
      }),
      r.d(e, "GraveAccentKey", function () {
        return m;
      }),
      r.d(e, "ExclamationPointKey", function () {
        return h;
      }),

In webpack 5, I see no mention of GraveAccentKey anywhere. It was stripped.

The unminified bundle shows this:

var GraveAccentKey = keyboardKey['`'];

/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */   "getCode": () => /* binding */ getCode,
/* harmony export */   "GraveAccentKey": () => /* binding */ GraveAccentKey,
/* harmony export */   "ExclamationPointKey": () => /* binding */ ExclamationPointKey,
...
};

And in the minified build, this whole block is nuked. Did not expect top level exports in a bundle to be removed.

@17biubiu That seems to be related to runtimeChunk: "single".

<!-- identifier: ci-result -->

@vankop The most important CI builds failed. This way your PR can't be merged.

Please take a look at the CI results from azure (1 errors / 3 warnings) and appveyor (failure) and fix these issues.

Well, but if I have only one entry point it works. And as you said, I should be able to disable splitChunks entirely. But with 2 entry points it suddenly ignores the configuration. Could you please fix it so it is working consistently according to the configuration?

<!-- identifier: ci-result -->

@vankop The most important CI builds failed. This way your PR can't be merged.

Please take a look at the CI results from azure (2 errors / 3 warnings) and appveyor (failure) and fix these issues.

🤦‍♂️ can I delete this embarassing post? thank you

Not sure that I understand your correctly, because of return true; references in statement will not be visited. Anyway I refactored using false top level symbol

<!-- identifier: review-outdated -->

@vankop Thanks for your update.

I labeled the Pull Request so reviewers will review it again.

@sokra Please review the new changes.

It means other plugin do it, can you run using https://nodejs.org/api/cli.html#cli_trace_deprecation

I do understand this a new feature. But, even if I dont do anything within the processAssets just the basic bolierplate, I get the same error. This is the code directly from webpack documentation https://webpack.js.org/api/compilation-hooks/#processassets

compilation.hooks.processAssets.tap(
  {
    name: 'MyPlugin',
    stage: Compilation.PROCESS_ASSETS_STAGE_ADDITIONS, // see below for more stages
  },
  (assets) => {
   console.log('anything')
  }
);

if I'm not doing anything within the processAssets, why the warning?

<!-- Please don't delete this template because we'll close your issue --> <!-- Before creating an issue please make sure you are using the latest version of webpack. -->

Bug report

<!-- Please ask questions on StackOverflow or the webpack Gitter. --> <!-- https://stackoverflow.com/questions/ask?tags=webpack --> <!-- https://gitter.im/webpack/webpack --> <!-- Issues which contain questions or support requests will be closed. -->

What is the current behavior?

I was porting an older plugin to the latest version of Webpack (5.16.0) In previous versions of webpack I was using optimizeChunkAssets method to alter chunks, but now, as documentation suggest, I am using processAssets method, and still get the warning:

DeprecationWarning: Compilation.assets will be frozen in future, all modifications are deprecated. BREAKING CHANGE: No more changes should happen to Compilation.assets after sealing the Compilation. Do changes to assets earlier, e. g. in Compilation.hooks.processAssets. Make sure to select an appropriate stage from Compilation.PROCESS_ASSETS_STAGE_*.

If the current behavior is a bug, please provide the steps to reproduce.

This is my code, which created the warning:

const { sources } = require('webpack');
...
apply(compiler) {
    compiler.hooks.thisCompilation.tap('myPlugin', (compilation)=>{
        const Compilation = compiler.webpack.Compilation;
        compilation.hooks.processAssets.tap(
        {
	    name: 'myPlugin',
	    stage: Compilation.PROCESS_ASSETS_STAGE_DERIVED // value is -200
        },
        assets => {
	    for(const filename in assets) {
		if(/\.js$/.test(filename)) {
			const source = assets[filename].source()
			compilation.assets[filename] = sources.ConcatSource( methodReturningString(source) )
		}
	    }
       })
    })
}

<!-- A great way to do this is to provide your configuration via a GitHub repository --> <!-- The most helpful is a minimal reproduction with instructions on how to reproduce --> <!-- Repositories with too many files or large webpack.config.js files are not suitable --> <!-- Please only add small code snippets directly into this issue --> <!-- https://gist.github.com is a good place for longer code snippets --> <!-- If your issue is caused by a plugin or loader, please create an issue on the loader/plugin repository instead -->

What is the expected behavior?

I should not see the warning. Either the documentation or warning is missleading

<!-- "It should work" is not a helpful explanation --> <!-- Explain exactly how it should behave -->

Other relevant information: webpack version: 5.16.0 Node.js version: 14.15.1 Operating System: MacOS 11.1 Additional tools:

processAssets is not deprecated, it is new abilities to work with assets, see here https://github.com/webpack/webpack/blob/master/lib/Compilation.js#L695, you need to use emitAsset or updateAsset or deleteAsset and don't touch assets inside compilation directly, look here https://webpack.js.org/api/compilation-object/#emitasset on API, feel free to open issue in docs repo to improve it if something misleading

<!-- identifier: admin-actions -->

For maintainers only:

• [ ] webpack-4
• [ ] webpack-5
• [ ] bug
• [ ] critical-bug
• [ ] enhancement
• [ ] documentation
• [ ] performance
• [ ] dependencies
• [ ] question

<!-- Please don't delete this template because we'll close your issue --> <!-- Before creating an issue please make sure you are using the latest version of webpack. -->

Bug report

<!-- Please ask questions on StackOverflow or the webpack Gitter. --> <!-- https://stackoverflow.com/questions/ask?tags=webpack --> <!-- https://gitter.im/webpack/webpack --> <!-- Issues which contain questions or support requests will be closed. -->

What is the current behavior?

I was porting an older plugin to the latest version of Webpack (5.16.0) In previous versions of webpack I was using optimizeChunkAssets method to alter chunks, but now, as documentation suggest, I am using processAssets method, and still get the warning:

DeprecationWarning: Compilation.assets will be frozen in future, all modifications are deprecated. BREAKING CHANGE: No more changes should happen to Compilation.assets after sealing the Compilation. Do changes to assets earlier, e. g. in Compilation.hooks.processAssets. Make sure to select an appropriate stage from Compilation.PROCESS_ASSETS_STAGE_*.

If the current behavior is a bug, please provide the steps to reproduce.

This is my code, which created the warning:

const { sources } = require('webpack');
...
apply(compiler) {
    compiler.hooks.thisCompilation.tap('myPlugin', (compilation)=>{
        const Compilation = compiler.webpack.Compilation;
        compilation.hooks.processAssets.tap(
        {
	    name: 'myPlugin',
	    stage: Compilation.PROCESS_ASSETS_STAGE_DERIVED // value is -200
        },
        assets => {
	    for(const filename in assets) {
		if(/\.js$/.test(filename)) {
			const source = assets[filename].source()
			compilation.assets[filename] = sources.ConcatSource( methodReturningString(source) )
		}
	    }
       })
    })
}

<!-- A great way to do this is to provide your configuration via a GitHub repository --> <!-- The most helpful is a minimal reproduction with instructions on how to reproduce --> <!-- Repositories with too many files or large webpack.config.js files are not suitable --> <!-- Please only add small code snippets directly into this issue --> <!-- https://gist.github.com is a good place for longer code snippets --> <!-- If your issue is caused by a plugin or loader, please create an issue on the loader/plugin repository instead -->

What is the expected behavior?

I should not see the warning. Either the documentation or warning is missleading

<!-- "It should work" is not a helpful explanation --> <!-- Explain exactly how it should behave -->

Other relevant information: webpack version: 5.16.0 Node.js version: 14.15.1 Operating System: MacOS 11.1 Additional tools:

Something creates after first build, please provide reproducible test repo

<!-- identifier: admin-actions -->

For maintainers only:

• [ ] webpack-4
• [ ] webpack-5
• [ ] bug
• [ ] critical-bug
• [ ] enhancement
• [ ] documentation
• [ ] performance
• [ ] dependencies
• [ ] question

<!-- Please don't delete this template because we'll close your issue --> <!-- Before creating an issue please make sure you are using the latest version of webpack. -->

Bug report

<!-- Please ask questions on StackOverflow or the webpack Gitter. --> <!-- https://stackoverflow.com/questions/ask?tags=webpack --> <!-- https://gitter.im/webpack/webpack --> <!-- Issues which contain questions or support requests will be closed. -->

What is the current behavior?

I've upgraded an existing Project from Webpack 4.44.2 to 5.17.

When I run a build script using the webpack CLI: "build": "cross-env NODE_ENV=production TENANT=CLIENT1 webpack --config webpack/prod.config.js",

Webpack builds several functions into the desired output folder. (I'm exporting 5 configs from my webpack.config.js... currently trying to reduce this but I think it should still work properly)

So when I run the script for the first time, webpack finishes without errors and all files are at the desired output path. When I open the website though, I'm getting errors like cannot read default of undefined. This error is caused in an async function with loads components using await

When running the script again, the error is gone and the website works properly.

I've found out why I'm getting these errors. When I open the minified entry file, at the very bottom I can find a switch case statement where the chunks should be listed:

The odd thing about it is, that the store entries are empty.. So no scripts are loaded on the website when a chunk is required.

After building a second time, all entries are listed as expected:

I'm thinking this might be a race condition or some kind of internal caching which causes this behavior. It's 100% reproducible. First build broken, second build works.

If the current behavior is a bug, please provide the steps to reproduce.

My configuration is pretty standard I'd say:

Config:

const prodConfig = {
    mode: "production",
    plugins: [
        new webpack.DefinePlugin({
            STORE_MANIFEST: JSON.stringify(
                env.getManifest(paths.storeManifest)
            ),
            COMMON_MANIFEST: JSON.stringify(
                env.getManifest(paths.commonManifest)
            ),
            COMPONENT_MANIFEST: JSON.stringify(
                env.getManifest(paths.componentManifest)
            ),
            ENV_MODE: JSON.stringify(process.env.NODE_ENV),
            TENANT: JSON.stringify(process.env.TENANT),
        }),
        new WebpackManifestPlugin({
            fileName: "asset-manifest.json",
            publicPath: "",
        }),
    ]
    // allow absolute imports from "src/"
    resolve: {
        modules: [
            path.resolve(process.cwd(), 'redesign/packages/shop/src'),
            path.resolve(process.cwd(), 'redesign/packages/frontend/client1/src'),
            path.resolve(process.cwd(), 'redesign/packages/frontend/client2/src'),
            'node_modules'
        ],
        alias: {
            svgs: svgsPath,
        },
    },
    module: {
        rules: [
            {
                test: /\.(png|jpg|gif|eot|ttf|woff|woff2|otf)$/,
                use: ['file-loader'],
            },
            {
                test: /\.svg$/,
                use: ['@svgr/webpack'],
            },
            {
                test: /\.(sa|sc|c)ss$/,
                use: [
                    'style-loader',
                    {
                        loader: 'css-loader',
                        options: { esModule: false, url: false },
                    },
                    {
                        loader: 'sass-loader', // transform scss to cs
                        options: {
                            additionalData: `$tenant: ${ process.env.TENANT };`,
                            sassOptions: {
                                includePaths: [
                                    path.resolve(process.cwd(),'node_modules'),
                                    path.resolve(process.cwd(),'redesign/node_modules')
                                ],
                            },
                        }
                    }
                ],
            },
            {
                test: /\.m?js$/,
                exclude: /node_modules\/(?!(@mm)\/).*/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        rootMode: 'upward'
                    },
                },
            },
            {
                test: /\.tsx?$/,
                use: 'ts-loader',
                exclude: /node_modules/,
            }
        ],
    },
    externals: {
        react: 'React',
        'react-dom': 'ReactDom',
        redux: 'Redux',
        'react-redux': 'ReactRedux',
        'redux-subspace': 'ReduxSubspace',
        '@redux-dynostore/core': 'ReduxDynostoreCore',
        '@redux-dynostore/react-redux': 'ReduxDynostoreReactRedux',
        '@redux-dynostore/react-redux-subspace':
        'ReduxDynostoreReactReduxSubspace',
        '@redux-dynostore/redux-subspace': 'ReduxDynostoreReduxSubspace',
        'styled-components': 'StyledComponents',
    }
};

Export with multiple functions:

module.exports = [
    {
        ...prodConfig,
        entry: entrypoints.stores,  // entrypoints ist an object with key: value (string) pairs
        output: {
            path: paths.appStores,
            filename: '[name].[chunkhash].js',
            publicPath
        }
    },
    {
        ...prodConfig,
        entry: entrypoints.bundles,  // entrypoints ist an object with key: value (string) pairs
        output: {
            path: paths.appBundles,
            filename: '[name].[chunkhash].js',
            publicPath,
        }
    },
    {
        ...omit(prodConfig, ['externals']),
        entry: entrypoints.acp,  // entrypoints ist an object with key: value (string) pairs
        output: {
            path: paths.acpBuild,
            filename: '[name].[chunkhash].js',
            publicPath,
        }
    },
];

<!-- A great way to do this is to provide your configuration via a GitHub repository --> <!-- The most helpful is a minimal reproduction with instructions on how to reproduce --> <!-- Repositories with too many files or large webpack.config.js files are not suitable --> <!-- Please only add small code snippets directly into this issue --> <!-- https://gist.github.com is a good place for longer code snippets --> <!-- If your issue is caused by a plugin or loader, please create an issue on the loader/plugin repository instead -->

What is the expected behavior?

I'd think that the output should be the same with every build. Building twice and getting different results should not be normal. So I'd expect the entries to be properly listed also on the first build.

<!-- "It should work" is not a helpful explanation --> <!-- Explain exactly how it should behave -->

Other relevant information: webpack version: 5.17 Node.js version: 12.16.3 Operating System: MacOS Catalina Additional tools: yarn, shell

Codecov Report

Merging #2373 (26f1065) into master (0d30eda) will decrease coverage by 3.44%. The diff coverage is n/a.

@@            Coverage Diff             @@
##           master    #2373      +/-   ##
==========================================
- Coverage   70.09%   66.65%   -3.45%     
==========================================
  Files          48       48              
  Lines        2117     2117              
  Branches      548      548              
==========================================
- Hits         1484     1411      -73     
- Misses        633      706      +73     

Continue to review full report at Codecov.

Legend - Click here to learn more Δ = absolute <relative> (impact), ø = not affected, ? = missing data Powered by Codecov. Last update 0d30eda...26f1065. Read the comment docs.

Bumps webpack from 5.16.0 to 5.17.0. <details> <summary>Release notes</summary> <p><em>Sourced from <a href="https://github.com/webpack/webpack/releases">webpack's releases</a>.</em></p> <blockquote> <h2>v5.17.0</h2> <h1>Features</h1> <ul> <li>add experimental lazy compilation via <code>experiments.lazyCompilation: true</code> for web and node targets <ul> <li>compiles entrypoints and <code>import()</code>s only when they are accessed</li> <li>More details see: <a href="https://github-redirect.dependabot.com/webpack/webpack/pull/12469">webpack/webpack#12469</a></li> </ul> </li> <li>move some javascript parsing related configuration options from <code>module</code> to <code>module.parser.javascript</code> and also allow to set them via <code>module.rules</code></li> <li>add <code>module.parser.javascript.commonjsMagicComments</code> to enable <code>/* webpackIgnore: true */</code> for <code>require()</code> calls</li> </ul> <h1>Bugfixes</h1> <ul> <li>fix a problem with <code>webpack.debug.ProfilingPlugin</code> on Mac when the computer was suspended before.</li> <li>fix a bug with IIFE handling when the IIFE has parameters with default values</li> </ul> </blockquote> </details> <details> <summary>Commits</summary> <ul> <li><a href="https://github.com/webpack/webpack/commit/d02e8daa267ca094fc0a030a595b000d35a99493"><code>d02e8da</code></a> 5.17.0</li> <li><a href="https://github.com/webpack/webpack/commit/64fb5f33f7b242fdbe8da453f793dbf95f4699e8"><code>64fb5f3</code></a> Merge pull request <a href="https://github-redirect.dependabot.com/webpack/webpack/issues/12469">#12469</a> from webpack/feature/async-compilation</li> <li><a href="https://github.com/webpack/webpack/commit/f4297099b7315b83e75ed3c3879277e18c1796ad"><code>f429709</code></a> fix symlink setup step</li> <li><a href="https://github.com/webpack/webpack/commit/c4d41ffa55668680d4ae3182badfaa589d32f663"><code>c4d41ff</code></a> nitpicks for tests</li> <li><a href="https://github.com/webpack/webpack/commit/100317556ebc27b34c8eddc4174dba2efa247458"><code>1003175</code></a> add lazy compilation for entrypoints</li> <li><a href="https://github.com/webpack/webpack/commit/988cf8d47a07eaa91f1bac48741e2c22b9aa9f84"><code>988cf8d</code></a> improve error handling</li> <li><a href="https://github.com/webpack/webpack/commit/a1515fa9f0f6cea020eebf91a9845a2f956697fa"><code>a1515fa</code></a> add experimental lazy compilation</li> <li><a href="https://github.com/webpack/webpack/commit/287707ce4d40dff2f03f29f3f93a8148676f6f09"><code>287707c</code></a> fix merge issue</li> <li><a href="https://github.com/webpack/webpack/commit/a07a1269f0a0b23d40de6c9565eeaf962fbc8904"><code>a07a126</code></a> Merge pull request <a href="https://github-redirect.dependabot.com/webpack/webpack/issues/11316">#11316</a> from petermetz/master</li> <li><a href="https://github.com/webpack/webpack/commit/f85f0d5bafb54ff1f50c52483856f8ca13beae6e"><code>f85f0d5</code></a> Merge pull request <a href="https://github-redirect.dependabot.com/webpack/webpack/issues/12452">#12452</a> from webpack/bugfix/12044</li> <li>Additional commits viewable in <a href="https://github.com/webpack/webpack/compare/v5.16.0...v5.17.0">compare view</a></li> </ul> </details> <br />

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

<details> <summary>Dependabot commands and options</summary> <br />

You can trigger Dependabot actions by commenting on this PR:

• @dependabot rebase will rebase this PR
• @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
• @dependabot merge will merge this PR after your CI passes on it
• @dependabot squash and merge will squash and merge this PR after your CI passes on it
• @dependabot cancel merge will cancel a previously requested merge and block automerging
• @dependabot reopen will reopen this PR if it is closed
• @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
• @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
• @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
• @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
• @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
• @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
• @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
• @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language
• @dependabot badge me will comment on this PR with code to add a "Dependabot enabled" badge to your readme

Additionally, you can set the following in your Dependabot dashboard:

• Update frequency (including time of day and day of week)
• Pull request limits (per update run and/or open at any time)
• Automerge options (never/patch/minor, and dev/runtime dependencies)
• Out-of-range updates (receive only lockfile updates, if desired)
• Security updates (receive only security updates, if desired)

</details>