Module not found: Can't resolve 'private-dot-next/routes-manifest.json' when building serverless

[kapowaz]

I’m starting to build out a new Next.js app (9.4.4) using a webpack config based an older app, but I’m getting this error when I try to build in serverless mode:

Failed to compile.

./node_modules/next/dist/build/webpack/loaders/next-serverless-loader.js?page=%2F&absolutePagePath=private-next-pages%2Findex.js&absoluteAppPath=private-next-pages%2F_app.js&absoluteDocumentPath=private-next-pages%2F_document.js&absoluteErrorPath=next%2Fdist%2Fpages%2F_error&distDir=private-dot-next&buildId=1p2ghDc4DDoblDeWh9a7E&assetPrefix=&generateEtags=true&canonicalBase=&basePath=&runtimeConfig=&previewProps=%7B%22previewModeId%22%3A%22a667e56f19cbabf3c2262f2c5430d29c%22%2C%22previewModeSigningKey%22%3A%22f795c19115389c2dfb08d231d4e1e9873926342c67ca665b5e5272e59ec37587%22%2C%22previewModeEncryptionKey%22%3A%2242b917c8c5888e25c43426070ab2e6f98a6a6a5be11020de3d03fb17990daf4f%22%7D&loadedEnvFiles=%5B%5D
Module not found: Can't resolve 'private-dot-next/routes-manifest.json' in '/Users/bdarlow/Sites/darlow-next'


> Build error occurred
Error: > webpack config.resolve.alias was incorrectly overriden. https://err.sh/vercel/next.js/invalid-resolve-alias
    at build (/Users/bdarlow/Sites/darlow-next/node_modules/next/dist/build/index.js:13:787)
    at process._tickCallback (internal/process/next_tick.js:68:7)

I’ve been doing some digging and I’m pretty sure the error message (originating here) is a red herring; inserting some console.log debugging info into the dist files for Next.js reveals that config.resolve.alias is defined correctly, it’s just that for whatever reason routes-manifest.json isn’t being generated. Even more curiously (since I’m able to see what the JSON should have been written into that file, and if I manually create it in the dist directory (I’m using the .next default), it gets removed as part of the build process.

Here is my full next.config.js file for reference:

const path = require('path');
const webpack = require('webpack');
const withSass = require('@zeit/next-sass');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

const cdnHost = process.env.CDN_HOST || '';
const environmentName = process.env.ENVIRONMENT_NAME || 'development';

module.exports = withSass({
  target: 'serverless',
  cssModules: true,
  cssLoaderOptions: {
    importLoaders: 1,
    localIdentName:
      environmentName === 'development' ? '[folder]-[local]-[hash:8]' : '[folder]-[hash:16]',
  },
  sassLoaderOptions: {
    includePaths: [path.resolve(__dirname, '../node_modules/@kapowaz')],
  },
  postcssLoaderOptions: {
    parser: true,
    autoprefixer: {
      browsers: ['last 2 versions'],
    },
    config: {},
  },
  webpack: (config, options) => {
    const { dev, isServer } = options;
    const buildId = options.buildId ? options.buildId : 'dev';
    const newConfig = config;

    newConfig.module.rules.push({
      test: /\.(ico|icns|png|jpg|jpeg|svg|gif|ttf|woff)$/,
      use: [
        {
          loader: 'file-loader',
          options: {
            emitFile: !isServer,
            name: '[name].[hash:8].[ext]',
            publicPath: (url) => `${cdnHost}/_next/static/${url}`,
            outputPath: 'static/',
          },
        },
      ],
    });

    newConfig.module.rules.push({
      test: /\.css$/,
      use: [
        {
          loader: 'css-loader',
        },
      ],
    });

    newConfig.plugins.push(
      new webpack.DefinePlugin({
        'process.env.ENVIRONMENT_NAME': JSON.stringify(environmentName),
        'process.env.NODE_ENV': JSON.stringify(dev ? 'development' : 'production'),
        'process.env.CDN_HOST': JSON.stringify(cdnHost),
        'process.env.BUILD_ID': JSON.stringify(buildId),
      }),

      new CleanWebpackPlugin(),
    );

    newConfig.resolve.alias = {
      ...config.resolve.alias,
    };

    return newConfig;
  },
});

[kapowaz]

So, after a lengthy investigation I found the culprit — clean-webpack-plugin was apparently the cause of the routes-manifest.json file being removed. Removing this from the webpack config fixed the issue!