Can't run app because of webpack error

[jdwillemse]

When running yarn dev after install I get the following error:

(node:26864) UnhandledPromiseRejectionWarning: TypeError: extractedChunk.addGroup is not a function
    at chunks.forEach (nextjs-template/node_modules/extract-text-webpack-plugin/dist/index.js:217:28)
    at Array.forEach (<anonymous>:null:null)
    at compilation.hooks.optimizeTree.tapAsync (nextjs-template/node_modules/extract-text-webpack-plugin/dist/index.js:209:16)
    at AsyncSeriesHook.eval [as callAsync] (<anonymous>:12:1)
    at AsyncSeriesHook.lazyCompileHook (nextjs-template/node_modules/tapable/lib/Hook.js:154:20)
    at Compilation.seal (nextjs-template/node_modules/next/node_modules/webpack/lib/Compilation.js:1244:27)
    at hooks.make.callAsync.err (nextjs-template/node_modules/next/node_modules/webpack/lib/Compiler.js:624:17)
    at _done (<anonymous>:9:1)
    at _err0 (<anonymous>:20:22)
    at Promise.all.then (nextjs-template/node_modules/next/node_modules/webpack/lib/DynamicEntryPlugin.js:74:20)
    at <anonymous>:null:null
    at process._tickCallback (internal/process/next_tick.js:189:7)

From a quick google this seems to be related to outdated webpack plugins

[devniel]

I fixed it by updating webpack and using https://github.com/webpack-contrib/mini-css-extract-plugin.

// scss handling
    config.module.rules.push({
      test: /\.scss$/,
      use: [
        MiniCssExtractPlugin.loader,
        'babel-loader',
        {
          loader: 'css-loader',
          options: {
            url: false,
            minimize: !dev,
            importLoaders: 2,
          },
        },
        {
          loader: 'postcss-loader',
          options: {
            plugins: [
              autoPrefixer({
                /* options */
              }),
            ],
          },
        },
        {
          loader: 'sass-loader',
        },
      ],
    });

    config.plugins.push(
      new CopyWebpackPlugin(
        [{
          // locales copying
          from: path.join(__dirname, 'assets', 'locales'),
          to: path.join(__dirname, 'static', envConfig.VERSION_HASH, 'locales'),
        }, ], {
          copyUnmodified: true,
        },
      ),
      new MiniCssExtractPlugin({
        filename: path.join(
          dev ? __dirname : '.',
          'static',
          envConfig.VERSION_HASH,
          'styles',
          'main.css',
        ),
      }),
    );

[stanleyfok]

Thanks so much for your fix! I have not maintained this for some time and nextjs is already in v8 now :) It’s time that I need to update this repo 😄