TypeError: Cannot read property 'exec' of undefined (mb problem with styles)

Question

Project: Next.js (11v)

After update my project from Next8 to Next11 with all libraries, I got million problems, fix them (some temp off) and at now have Webpack error:

$ next build && tsc --project tsconfig.server.json
info  - Using webpack 5. Reason: Enabled by default https://nextjs.org/docs/messages/webpack5
info  - Skipping validation of types  
Browserslist: caniuse-lite is outdated. Please run next command `yarn upgrade caniuse-lite browserslist`
Warning: Built-in CSS support is being disabled due to custom CSS configuration being detected.
See here for more info: https://nextjs.org/docs/messages/built-in-css-disabled

@zeit/next-typescript is no longer needed since Next.js has built-in support for TypeScript now. Please remove it from your next.config.js and your .babelrc

(node:30015) [DEP_WEBPACK_COMPILATION_NORMAL_MODULE_LOADER_HOOK] DeprecationWarning: Compilation.hooks.normalModuleLoader was moved to NormalModule.getCompilationHooks(compilation).loader
(Use `node --trace-deprecation ...` to show where the warning was created)
(node:30015) [DEP_WEBPACK_MAIN_TEMPLATE_RENDER_MANIFEST] DeprecationWarning: MainTemplate.hooks.renderManifest is deprecated (use Compilation.hooks.renderManifest instead)
(node:30015) [DEP_WEBPACK_CHUNK_TEMPLATE_RENDER_MANIFEST] DeprecationWarning: ChunkTemplate.hooks.renderManifest is deprecated (use Compilation.hooks.renderManifest instead)
(node:30015) [DEP_WEBPACK_MAIN_TEMPLATE_HASH_FOR_CHUNK] DeprecationWarning: MainTemplate.hooks.hashForChunk is deprecated (use JavascriptModulesPlugin.getCompilationHooks().chunkHash instead)
(node:30015) [DEP_WEBPACK_COMPILATION_OPTIMIZE_CHUNK_ASSETS] DeprecationWarning: optimizeChunkAssets is deprecated (use Compilation.hooks.processAssets instead and use one of Compilation.PROCESS_ASSETS_STAGE_* as stage option)
(node:30015) [DEP_WEBPACK_CHUNK_MODULES_ITERABLE] DeprecationWarning: Chunk.modulesIterable: Use new ChunkGraph API
TypeError: Cannot read property 'exec' of undefined
at /home/roma/project/my-project/node_modules/next-size/lib/asset-size-plugin.js:88:66
at Array.map (<anonymous>)
at /home/roma/project/my-project/node_modules/next-size/lib/asset-size-plugin.js:88:35
at Array.sort (<anonymous>)
at AssetsSizePlugin.printAssetsSize (/home/roma/project/my-project/node_modules/next-size/lib/asset-size-plugin.js:86:10)
at /home/roma/project/my-project/node_modules/next-size/lib/asset-size-plugin.js:132:12
at Hook.eval [as callAsync] (eval at create (/home/roma/project/my-project/node_modules/next/dist/compiled/webpack/bundle5.js:31934:10), <anonymous>:8:17)
at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/home/roma/project/my-project/node_modules/next/dist/compiled/webpack/bundle5.js:31736:14)
at /home/roma/project/my-project/node_modules/next/dist/compiled/webpack/bundle5.js:46108:27
at /home/roma/project/my-project/node_modules/next/dist/compiled/neo-async/async.js:1:9380
at done (/home/roma/project/my-project/node_modules/next/dist/compiled/neo-async/async.js:1:14796)
at Hook.eval [as callAsync] (eval at create (/home/roma/project/my-project/node_modules/next/dist/compiled/webpack/bundle5.js:31934:10), <anonymous>:6:1)
at /home/roma/project/my-project/node_modules/next/dist/compiled/webpack/bundle5.js:45962:33
at /home/roma/project/my-project/node_modules/next/dist/compiled/webpack/bundle5.js:29554:16
at /home/roma/project/my-project/node_modules/next/dist/compiled/webpack/bundle5.js:29471:14
at FSReqCallback.oncomplete (fs.js:180:23)
info  - Creating an optimized production build  
Failed to compile.


./node_modules/rc-slider/assets/index.css
Error: MainTemplate.hooks.hotBootstrap has been removed (use your own RuntimeModule instead)


> Build error occurred
Error: > Build failed because of webpack errors
at /home/roma/project/my-project/node_modules/next/dist/build/index.js:15:924
at async Span.traceAsyncFn (/home/roma/project/my-project/node_modules/next/dist/telemetry/trace/trace.js:6:584)
error Command failed with exit code 1.

If I understand correctly the new version of webpack refuses to import css files like it did before:

_app.js file:

import 'styles/main.scss';
import 'styles/cropper.scss';
import 'styles/prettycheckbox.scss';

...

next.config.js

const webpack = require('webpack');
const withPlugins = require('next-compose-plugins');
const withCss = require('@zeit/next-css');
const withSass = require('@zeit/next-sass');
const withTypescript = require('@zeit/next-typescript');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const withPurgeCss = require('next-purgecss');
const whitelister = require('purgecss-whitelister');
const withSize = require('next-size');


module.exports = withSize();
class TailwindExtractor {
  static extract(content) {
    return content.match(/[A-Za-z0-9-_:\/]+/g) || [];
  }
}

const nextConfig = {
  typescript: {
    // !! WARN !!
    // Dangerously allow production builds to successfully complete even if
    // your project has type errors.
    // !! WARN !!
    ignoreBuildErrors: true,
  },
  publicRuntimeConfig: {
  },
  webpack(config, { isServer, buildId, dev }) {
    config.module.rules.push({
        test: /\.(raw)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        use: 'raw-loader',
    });
    if (config.mode === 'production') {
        if (Array.isArray(config.optimization.minimizer)) {
            config.optimization.minimizer.push(new OptimizeCSSAssetsPlugin({}));
        }
    }

    config.plugins.push(new webpack.ContextReplacementPlugin(/moment[/\\]locale$/, /en-gb/));

    if (!isServer && !dev) {
        config.plugins.push(
            ...
        );
    }

    return config;
}
};

module.exports = withPlugins([
[ withSize, {}],
[ withTypescript, {} ],
[ withSass, {} ],
[ withCss, {} ],
[ withPurgeCss, {
    purgeCssPaths: [
        'styles/**/*',
        'pages/**/*.tsx',
        'pages/**/*.js',
        'app/**/*.tsx',
        'app/**/*.js',
        
    ],
    purgeCss: {
        whitelist: whitelister([
            './styles/cropper.scss',
            './node_modules/rc-slider/assets/index.css',
            './node_modules/react-quill/dist/quill.snow.css',
            './node_modules/react-day-picker/lib/style.css',
            './node_modules/react-datasheet/lib/react-datasheet.css',
        ]),
        extractors: [
            {
                extractor: TailwindExtractor,
                extensions: ['js', 'html', 'tsx', 'scss']
            }
        ],
    }
    
}],
],nextConfig);

What is my problem and how can I solve it? Perhaps I have something else missing in the settings or, on the contrary, something superfluous?

huge huge gratitude to all who responded!

Answer 1

You're using outdated (and deprecated) plugin next-size that depends on the IS_BUNDLED_PAGE_REGEX constant from next that has been removed since next@10.0.0.

This package has been deprecated because it can slow down your builds. Upgrade to Next.js 9+ to get Build Output Statistics out-of-the-box.