Summary

When I'm trying to implement a fallback page, it causes error at build

Versions

next-pwa: 5.6.0
next: 9.5.5

How To Reproduce

Steps to reproduce the behavior:

Create a file named _offline.tsx in pages directory like this:

import { PureComponent } from 'react';
import Head from 'next/head'

export default class Fallback extends PureComponent {

  render() {
    return (
      <>
        <Head>
          <title>Fallback page</title>
        </Head>
        <h1>This is fallback page when device is offline</h1>
        <h2>When offline, any page route will fallback to this page</h2>
      </>
    );
  }
}

Set config like this:

const lessToJS = require('less-vars-to-js');
const fs = require('fs');
const path = require('path');
const withLess = require('@zeit/next-less');
const withCSS = require('@zeit/next-css');
const withPlugins = require('next-compose-plugins');
const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
const withPWA = require('next-pwa')({
  dest: 'public',
  register: true,
    skipWaiting: true,
  disable: process.env.NODE_ENV === 'development'
})

// Where your antd-custom.less file lives
const themeVariables = lessToJS(fs.readFileSync(path.resolve(__dirname, './style/default.less'), 'utf8'));

const nextConfig = {
  distDir: '.next',
  poweredByHeader: false
  // target: "serverless"
};

const plugins = [
  withLess({
    // cssModules: true,
    lessLoaderOptions: {
      javascriptEnabled: true,
      modifyVars: themeVariables // make your antd custom effective
    },
    webpack: (config, { isServer }) => {
      // it is a trick, since we have issue if import less file
      // add tsconfig paths here to avoid that
      // eslint-disable-next-line no-param-reassign
      config.resolve.plugins = [new TsconfigPathsPlugin()];

      if (isServer) {
        const antStyles = /antd\/.*?\/style.*?/;
        const origExternals = [...config.externals];
        // eslint-disable-next-line no-param-reassign
        config.externals = [
          (context, request, callback) => {
            if (request.match(antStyles)) return callback();
            if (typeof origExternals[0] === 'function') {
              origExternals[0](context, request, callback);
            } else {
              callback();
            }
          },
          ...(typeof origExternals[0] === 'function' ? [] : origExternals)
        ];

        config.module.rules.unshift({
          test: antStyles,
          use: 'null-loader'
        });
      }
      return config;
    }
  }),
  withCSS,

  // (nextConfig = {}) => {
  //   return Object.assign({}, nextConfig, {
  //     webpack(config, options) {
  //       config.resolve.plugins = [new TsconfigPathsPlugin()];
  //       // if (config.resolve.plugins) {
  //       //   config.resolve.plugins(new TsconfigPathsPlugin());
  //       // } else {
  //       //   config.resolve.plugins = [new TsconfigPathsPlugin()];
  //       // }

  //       return config;
  //     }
  //   })
  // }

  withPWA
];
module.exports = withPlugins(plugins, nextConfig);

Run yarn build
See error:


> [PWA] Compile server
Warning: Built-in CSS support is being disabled due to custom CSS configuration being detected.
See here for more info: https://err.sh/next.js/built-in-css-disabled
> [PWA] Compile client (static)
> [PWA] Auto register service worker with: /Users/oujaber/Documents/workspace/wieldyy/user/node_modules/next-pwa/register.js
> [PWA] Service worker: /Users/oujaber/Documents/workspace/wieldyy/user/public/sw.js
> [PWA]   url: /sw.js
> [PWA]   scope: /
> [PWA] Fallback to precache routes when fetch failed from cache or network:
> [PWA]   document (page): /_offline

Build error occurred WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
configuration.resolve has an unknown property 'fallback'. These properties are valid: object { alias?, aliasFields?, cachePredicate?, cacheWithContext?, concord?, descriptionFiles?, enforceExtension?, enforceModuleExtension?, extensions?, fileSystem?, mainFields?, mainFiles?, moduleExtensions?, modules?, plugins?, resolver?, roots?, symlinks?, unsafeCache?, useSyncFileSystemCalls? } -> Options for the resolver at webpack (/Users/oujaber/Documents/workspace/wieldyy/user/node_modules/webpack/lib/webpack.js:31:9) at buildFallbackWorker (/Users/oujaber/Documents/workspace/wieldyy/user/node_modules/next-pwa/build-fallback-worker.js:64:3) at Object.webpack (/Users/oujaber/Documents/workspace/wieldyy/user/node_modules/next-pwa/index.js:184:25) at getBaseWebpackConfig (/Users/oujaber/Documents/workspace/wieldyy/user/node_modules/next/dist/build/webpack-config.js:134:360) at async Promise.all (index 0) at async build (/Users/oujaber/Documents/workspace/wieldyy/user/node_modules/next/dist/build/index.js:11:102) error Command failed with exit code 1. info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Link to minimal reproduce setup repository if any.

Expected Behaviors

Build without errors

Additional Context

If I remove file _offline.tsx , it compiles without errors.

shadowwalker / next-pwa

fallback config error when build #457

Summary

Versions

How To Reproduce

Expected Behaviors

Additional Context