Webpack 5 still shows deprecation warnings with Next 10

[nicholaschiang]

Bug report

Describe the bug

Just installed Next 10 and upgraded to Webpack 5 (added a Yarn resolution to package.json) and I'm still getting deprecation warnings when building:

Loaded env from /home/nchiang/repos/tutorbook/.env.production.local
Loaded env from /home/nchiang/repos/tutorbook/.env.local
Loaded env from /home/nchiang/repos/tutorbook/.env.production
Loaded env from /home/nchiang/repos/tutorbook/.env
info  - Using external babel configuration from /home/nchiang/repos/tutorbook/babel.config.js
(node:24522) [DEP_WEBPACK_MODULE_UPDATE_HASH] DeprecationWarning: Module.updateHash: Use new ChunkGraph API
(node:24522) [DEP_WEBPACK_MAIN_TEMPLATE_OUTPUT_OPTIONS] DeprecationWarning: MainTemplate.outputOptions is deprecated (use Compilation.outputOptions instead)
(node:24522) [DEP_WEBPACK_MAIN_TEMPLATE_RENDER_CURRENT_HASH_CODE] DeprecationWarning: MainTemplate.renderCurrentHashCode is deprecated (use RuntimeGlobals.getFullHash runtime function instead)
(node:24522) [DEP_WEBPACK_MAIN_TEMPLATE_GET_ASSET_PATH] DeprecationWarning: MainTemplate.getAssetPath is deprecated (use Compilation.getAssetPath instead)
(node:24522) [DEP_WEBPACK_MAIN_TEMPLATE_REQUIRE_FN] DeprecationWarning: MainTemplate.requireFn is deprecated (use "__webpack_require__")
Webpack Bundle Analyzer saved report to /home/nchiang/repos/tutorbook/.next/analyze/client.html
Webpack Bundle Analyzer saved stats file to /home/nchiang/repos/tutorbook/.next/stats.json
info  - Creating an optimized production build ..<w> [webpack.cache.PackFileCacheStrategy] Serializing big strings (188kiB) impacts deserialization performance (consider using Buffer instead and decode when needed)
<w> [webpack.cache.PackFileCacheStrategy] Serializing big strings (127kiB) impacts deserialization performance (consider using Buffer instead and decode when needed)
<w> [webpack.cache.PackFileCacheStrategy] Serializing big strings (173kiB) impacts deserialization performance (consider using Buffer instead and decode when needed)
<w> [webpack.cache.PackFileCacheStrategy] Serializing big strings (185kiB) impacts deserialization performance (consider using Buffer instead and decode when needed)

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

1. Clone this repository.
2. Follow these instructions to install deps, etc.
3. Run yarn build:analyze from the repository root.
4. See error

Expected behavior

There should be no deprecation warnings when using Next 10 with Webpack 5.

Screenshots

If applicable, add screenshots to help explain your problem.

System information

• OS: PopOS 20.10
• Version of Next.js: 10.0.0
• Version of Node.js: 12.18.3

[gurkerl83]

Maybe it is related to #18753. For validation please ensure that you lock files don`t reference older webpack or nextjs versions. My setup is identical, due to the issue mentioned I had to remove the webpack folder distributed with the NextJs dependency. Execute the build again and see if you still get those warnings.

[nicholaschiang]

@gurkerl83 I don't think these are the same issues. I'm using Yarn Berry and the yarn.lock file only contains the latest Next.js 10 and Webpack 5 versions.

[gurkerl83]

@nicholaschiang Did you try it? Is there a webpack folder within the nextjs node-modules folder.

This is from my package.lock json, I still use npm instead of yarn, but the bundles content should be the same, no matter what tool you are using.

"next": {
  "version": "10.0.1-canary.7",
  "resolved": "https://registry.npmjs.org/next/-/next-10.0.1-canary.7.tgz",
  "requires": {
    ...,
    "webpack": "4.44.1",
    "webpack-sources": "1.4.3"
    },

"webpack": {
  "version": "5.4.0",
  "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.4.0.tgz",

[timneutkens]

Can you post your next.config.js, most likely you have custom webpack configuration.

[nicholaschiang]

Yeah, sure @timneutkens here it is:

const path = require('path');
const withImages = require('next-images');
const { locales } = require('./lib/intl/config.json');

module.exports = withImages({
  reactStrictMode: true,
  sassOptions: {
    includePaths: [
      path.resolve(__dirname, 'node_modules'),
      path.resolve(__dirname, 'src/*/node_modules'),
    ],
  },
  images: {
    domains: [
      'assets.tutorbook.app',
      'firebasestorage.googleapis.com',
      'lh3.googleusercontent.com',
    ],
    imageSizes: [260, 160, 120, 85, 40, 24],
  },
  async redirects() {
    return [
      {
        source: '/signup',
        destination: '/default/signup',
        permanent: true,
      },
      {
        source: '/search/:slug*',
        destination: '/default/search/:slug*',
        permanent: true,
      },
    ];
  },
  webpack(config, { isServer }) {
    if (!isServer && process.env.ANALYZE === 'true') {
      // Only run the bundle analyzer for the client-side chunks.
      // @see {@link https://github.com/vercel/next.js/issues/15481}
      const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
      config.plugins.push(
        new BundleAnalyzerPlugin({
          analyzerMode: 'static',
          reportFilename: './analyze/client.html',
          generateStatsFile: true,
        })
      );
    }
    config.module.rules.push({
      test: /\.hbs$/,
      use: 'raw-loader',
    });
    return config;
  },
});

The only thing that I could think of here would be that raw-loader. Is that the issue?

[timneutkens]

Potentially, or the resolutions did not apply correctly and there's another version of webpack laying around in the dependency tree.

[timneutkens]

Going to close this as Next.js currently does not have deprecation warnings so it's something in your app.

[SofianeDjellouli]

I have the same issue with this config and next@10.1.3

module.exports = withBundleAnalyzer({
  generateBuildId: async () => {
    return process.env.VERCEL_GIT_COMMIT_SHA || uuid();
  },

  publicRuntimeConfig: { localeSubpaths: {} },
  sassOptions: { includePaths: [path.resolve(__dirname, "./src/styles")] },
  i18n: { locales: ["en", "ae"], defaultLocale: "en" },
  future: { webpack5: true },
  webpack(config) {
    config.module.rules.push({ test: /\.svg$/, use: ["@svgr/webpack"] });

    // For useMachine
    for (const plugin of config.optimization.minimizer) {
      if (plugin.constructor.name === "TerserPlugin") {
        plugin.options.terserOptions.keep_fnames = true;
      }
    }

    return config;
  },
});

[relm923]

Seeing similar warnings when using next/dynamic with Webpack 5

(node:87249) [DEP_WEBPACK_MODULE_UPDATE_HASH] DeprecationWarning: Module.updateHash: Use new ChunkGraph API

[Paul-Bird]

Also seeing this on local and vercel build logs

Next.js version: 11.1.2

DEP_WEBPACK_MODULE_UPDATE_HASH] DeprecationWarning: Module.updateHash: Use new ChunkGraph API

[GuiWain]

I have the same message with nextjs 12.0.2, both locally and in vercel logs

(node:9188) [DEP_WEBPACK_MODULE_UPDATE_HASH] DeprecationWarning: Module.updateHash: Use new ChunkGraph API
(Use node --trace-deprecation ... to show where the warning was created)

[ywroh]

@relm923 @Paul-Bird @GuiWain

I also saw the same deprecation warning message when building nextjs 11.

As a result of checking the webpack bundle5.js file, it was commented out that it will be deleted from webpack6 as shown in the screenshot below.

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.