next.js: Next 10.0.6 with webpack 5 & custom server throws `Cannot read property 'replace' of undefined`

What version of Next.js are you using?

10.0.6

What version of Node.js are you using?

12.18.3

What browser are you using?

Chrome 88

What operating system are you using?

macOS

How are you deploying your application?

other

Describe the Bug

I have a custom express server. I’m using webpack 5 (via yarn resolutions)

I’ve updated to next 10.0.6, and starting in dev mode throws

info  - Using external babel configuration from /Users/****/Projects/node/****/packages/renderers/front/babel.config.js
HookWebpackError: Cannot read property 'replace' of undefined
at makeWebpackError (/Users/****/Projects/node/****/node_modules/next/dist/compiled/webpack/bundle5.js:51903:9)
at /Users/****/Projects/node/****/node_modules/next/dist/compiled/webpack/bundle5.js:37857:12
at eval (eval at create (/Users/****/Projects/node/****/node_modules/next/dist/compiled/webpack/bundle5.js:27150:10), <anonymous>:10:1)
  at fn (/Users/****/Projects/node/****/node_modules/next/dist/compiled/webpack/bundle5.js:36026:17)
  at Hook.eval [as callAsync] (eval at create (/Users/****/Projects/node/****/node_modules/next/dist/compiled/webpack/bundle5.js:27150:10), <anonymous>:8:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/Users/****/Projects/node/****/node_modules/next/dist/compiled/webpack/bundle5.js:26952:14)
    at cont (/Users/****/Projects/node/****/node_modules/next/dist/compiled/webpack/bundle5.js:37854:34)
    at /Users/****/Projects/node/****/node_modules/next/dist/compiled/webpack/bundle5.js:37900:10
    at /Users/****/Projects/node/****/node_modules/next/dist/compiled/neo-async/async.js:1:9438
    at done (/Users/****/Projects/node/****/node_modules/next/dist/compiled/neo-async/async.js:1:9750)
    at /Users/****/Projects/node/****/node_modules/next/dist/compiled/neo-async/async.js:1:9380
    at /Users/****/Projects/node/****/node_modules/next/dist/compiled/neo-async/async.js:1:9438
    at done (/Users/****/Projects/node/****/node_modules/next/dist/compiled/neo-async/async.js:1:9750)
    at /Users/****/Projects/node/****/node_modules/next/dist/compiled/neo-async/async.js:1:9380
    at /Users/****/Projects/node/****/node_modules/next/dist/compiled/webpack/bundle5.js:39195:10
    at /Users/****/Projects/node/****/node_modules/next/dist/compiled/webpack/bundle5.js:31649:34
    -- inner error --
    TypeError: Cannot read property 'replace' of undefined
    at PagesManifestPlugin.createAssets (/Users/****/Projects/node/****/node_modules/next/build/webpack/plugins/pages-manifest-plugin.ts:48:34)
    at /Users/****/Projects/node/****/node_modules/next/build/webpack/plugins/pages-manifest-plugin.ts:67:18
    at fn (/Users/****/Projects/node/****/node_modules/next/dist/compiled/webpack/bundle5.js:36024:10)
    at Hook.eval [as callAsync] (eval at create (/Users/****/Projects/node/****/node_modules/next/dist/compiled/webpack/bundle5.js:27150:10), <anonymous>:8:1)
      at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/Users/****/Projects/node/****/node_modules/next/dist/compiled/webpack/bundle5.js:26952:14)
      at cont (/Users/****/Projects/node/****/node_modules/next/dist/compiled/webpack/bundle5.js:37854:34)
      at /Users/****/Projects/node/****/node_modules/next/dist/compiled/webpack/bundle5.js:37900:10
      at /Users/****/Projects/node/****/node_modules/next/dist/compiled/neo-async/async.js:1:9438
      at done (/Users/****/Projects/node/****/node_modules/next/dist/compiled/neo-async/async.js:1:9750)
      at /Users/****/Projects/node/****/node_modules/next/dist/compiled/neo-async/async.js:1:9380
      at /Users/****/Projects/node/****/node_modules/next/dist/compiled/neo-async/async.js:1:9438
      at done (/Users/****/Projects/node/****/node_modules/next/dist/compiled/neo-async/async.js:1:9750)
      at /Users/****/Projects/node/****/node_modules/next/dist/compiled/neo-async/async.js:1:9380

Expected Behavior

It should start normally

To Reproduce

Clone custom server example,
Enable webpack (via future: { webpack5: true })
Start the server

About this issue

Original URL
State: closed
Created 3 years ago
Reactions: 17
Comments: 17 (5 by maintainers)

Most upvoted comments

I got mine to work by being more specific about the values in the config being changed and by spreading out the pre-existing values of the config

This did not work

module.exports = {
  webpack(config, {}) {
    config.resolve = {
      fallback:{
        fs: false,
        child_process: false,
        net: false,
        crypto: false,
      }
    };
    return config;
  },
};

Whereas this did work:

module.exports = {
  webpack(config, {}) {
    config.resolve.fallback = {
      ...config.resolve.fallback,
      fs: false,
      child_process: false,
      net: false,
      crypto: false,
    };
    return config;
  },
};

+12

w3ichen on Jul 28, 2021

Try updating next.js

TheBotlyNoob on Jul 20, 2021

@w3ichen 👍

pranavwani on Oct 14, 2021

Have you managed to solve the issue? Here’s my custom webpack config (using Next.js 10.2.3)

/* eslint-disable @typescript-eslint/no-var-requires */
const { normalModuleReplacement, verifySiteCode } = require('./bin/webpackCustomConfig');
const LoadablePlugin = require('@loadable/webpack-plugin');

const withBundleAnalyzer = require('@next/bundle-analyzer')({
    enabled: false, // enable to generate report
});

const SITECODE = process.env.SITECODE;

verifySiteCode(SITECODE);

module.exports = withBundleAnalyzer({
    env: {
        NEXT_PUBLIC_SITECODE: SITECODE,
    },
    distDir: 'build',
    assetPrefix: process.env.NEXT_STATICS_PREFIX,
    future: {
        webpack5: true,
    },

    webpack: (config, { isServer }) => {
        if (!isServer) {
            config.resolve.fallback = {
                ...(config.resolve.fallback || {}),
                fs: false,
                path: false,
            };
            // more info: https://github.com/vercel/next.js/issues/8106
            config.resolve.alias['@sentry/node'] = '@sentry/browser';
        }

        config.mode = isServer ? 'development' : 'production';

        config.plugins.push(new LoadablePlugin());

        config.module.rules.push({
            test: /\.svg$/,
            issuer: {
                and: [/\.(js|ts)x?$/],
            },
            type: 'javascript/auto',
            use: ['@svgr/webpack', 'url-loader'],
        });

        config.plugins.push(normalModuleReplacement(SITECODE));

        return config;
    },
    webpackDevMiddleware: (config) => {
        config.watchOptions = {
            poll: 1000, // Check for changes every second
            aggregateTimeout: 300, // delay before rebuilding
            ignored: /node_modules/,
        };

        return config;
    },
});

sunpietro on Jul 20, 2021