Next.js: TypeError: Cannot read property 'config' of undefined

[bryan]

Everything was working on Webpack v3 with [email protected]. I'm not sure what exactly went wrong or is not supported. Using @zeit/next-css version 0.2.0 gives me some different error:
Error: Chunk.entrypoints: Use Chunks.groupsIterable and filter by instanceof Entrypoint instead

I recently upgraded to the latest zeit/next-css version ^0.2.1-canary.1 and when running, I get the following error now:

TypeError: Cannot read property 'config' of undefined
    at module.exports (/node_modules/@zeit/next-css/css-loader-config.js:58:28)
    at Object.webpack (/node_modules/@zeit/next-css/index.js:15:36)
    at Object.webpack (/node_modules/next-optimized-images/index.js:299:27)
    at _callee3$ (/node_modules/next/dist/build/webpack.js:297:38)
    at tryCatch (/node_modules/regenerator-runtime/runtime.js:62:40)
    at Generator.invoke [as _invoke] (/node_modules/regenerator-runtime/runtime.js:296:22)
    at Generator.prototype.(anonymous function) [as next] (/node_modules/regenerator-runtime/runtime.js:114:21)
    at step (/node_modules/@babel/runtime/helpers/asyncToGenerator.js:12:30)
    at _next (/node_modules/@babel/runtime/helpers/asyncToGenerator.js:27:9)
    at <anonymous>:null:null

Here's my package.json

{
  "version": "0.1.0",
  "private": true,
  "main": "index.js",
  "dependencies": {
    "@zeit/next-css": "^0.2.1-canary.1",
    "algoliasearch": "^3.29.0",
    "async": "^2.6.1",
    "attr-accept": "^1.1.3",
    "autoprefixer": "^9.0.2",
    "aws-sdk": "^2.282.1",
    "axios": "^0.18.0",
    "bcryptjs": "^2.4.3",
    "bluebird": "^3.5.1",
    "body-parser": "^1.18.3",
    "classnames": "^2.2.6",
    "clone": "^2.1.1",
    "connect-flash": "^0.1.1",
    "connect-redis": "^3.3.3",
    "cookie-parser": "^1.4.3",
    "cors": "^2.8.4",
    "cssnano": "^4.0.5",
    "csurf": "^1.9.0",
    "dotenv": "^6.0.0",
    "exenv": "^1.2.2",
    "express": "^4.16.3",
    "express-session": "^1.15.6",
    "file-stream-rotator": "^0.2.1",
    "fs-extra": "^7.0.0",
    "glob": "^7.1.2",
    "helmet": "^3.13.0",
    "i": "^0.3.6",
    "i18next": "^11.5.0",
    "i18next-browser-languagedetector": "^2.2.2",
    "i18next-express-middleware": "^1.2.0",
    "i18next-node-fs-backend": "^1.2.1",
    "i18next-xhr-backend": "^1.5.1",
    "image-size": "^0.6.3",
    "imgix-core-js": "^1.1.1",
    "immutability-helper": "^2.7.1",
    "keyword-extractor": "0.0.15",
    "lodash": "^4.17.10",
    "mailchecker": "^3.2.7",
    "md5-file": "^4.0.0",
    "mime": "^2.3.1",
    "moment": "^2.22.2",
    "moment-timezone": "^0.5.21",
    "morgan": "^1.9.0",
    "multer": "^1.3.1",
    "next": "^6.1.1-canary.3",
    "next-compose-plugins": "^2.1.1",
    "next-flash": "^1.0.2",
    "next-optimized-images": "^1.4.1",
    "node-geocoder": "^3.22.0",
    "node-sass": "^4.9.2",
    "normalize.css": "^8.0.0",
    "object-assign": "^4.1.1",
    "pg": "^7.4.3",
    "prop-types": "^15.6.2",
    "raw-loader": "^0.5.1",
    "react": "^16.4.1",
    "react-autosuggest": "^9.3.4",
    "react-country-flag": "^0.2.0",
    "react-countup": "^3.0.3",
    "react-dom": "^16.4.1",
    "react-ga": "^2.5.3",
    "react-google-maps": "^9.4.5",
    "react-helmet": "^5.2.0",
    "react-i18next": "^7.10.1",
    "react-image-gallery": "^0.8.9",
    "react-overlays": "^0.8.3",
    "react-transition-group": "^2.4.0",
    "recompose": "^0.28.0",
    "redis": "^2.8.0",
    "scriptjs": "^2.5.8",
    "sequelize": "^4.38.0",
    "sequelize-cli": "^4.0.0",
    "serve-favicon": "^2.5.0",
    "sha.js": "^2.4.11",
    "shortid": "^2.2.12",
    "tz-lookup": "^6.1.8",
    "ua-parser-js": "^0.7.18",
    "unidecode": "^0.1.8",
    "uuid": "^3.3.2",
    "validator": "^10.4.0",
    "webpack": "^4.16.3"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "NODE_ENV=development PORT=3000 nodemon -w server/server.js server/server.js --exec babel-node && rm -f npm-debug.log",
    "clean": "rimraf dist",
    "build": "next build && babel server -d dist",
    "start": "NODE_ENV=production PORT=3000 nodemon -w dist/server.js dist/server.js && rm -f npm-debug.log",
    "nibble": "eslint-nibble components/ client/ pages/ routes/ utility/",
    "deploy": "sh ./.deploy.sh"
  },
  "devDependencies": {
    "@babel/cli": "^7.0.0-beta.42",
    "@babel/node": "^7.0.0-beta.42",
    "@babel/plugin-proposal-class-properties": "^7.0.0-beta.42",
    "@babel/plugin-proposal-export-default-from": "^7.0.0-beta.42",
    "@babel/preset-react": "^7.0.0-beta.42",
    "@babel/preset-stage-3": "^7.0.0-beta.42",
    "@types/googlemaps": "^3.30.11",
    "@types/markerclustererplus": "^2.1.33",
    "@types/react": "^16.4.7",
    "babel-eslint": "^8.2.6",
    "babel-loader": "^7.1.5",
    "babel-plugin-inline-dotenv": "^1.1.2",
    "babel-plugin-module-resolver": "^3.1.1",
    "babel-plugin-transform-inline-environment-variables": "^0.4.3",
    "babel-plugin-wrap-in-js": "^1.1.1",
    "babel-preset-airbnb": "^2.5.3",
    "babel-runtime": "^6.26.0",
    "eslint": "^5.2.0",
    "eslint-config-airbnb": "^17.0.0",
    "eslint-loader": "^2.1.0",
    "eslint-nibble": "^4.2.1",
    "eslint-plugin-import": "^2.13.0",
    "eslint-plugin-jsx-a11y": "^6.1.1",
    "eslint-plugin-react": "^7.10.0",
    "extract-text-webpack-plugin": "^4.0.0-beta.0",
    "file-loader": "^1.1.11",
    "postcss-css-variables": "^0.9.0",
    "postcss-easy-import": "^3.0.0",
    "postcss-loader": "^2.1.6",
    "postcss-modules": "^1.3.2",
    "postcss-preset-env": "^5.3.0",
    "rimraf": "^2.6.2",
    "sass-loader": "^7.0.3",
    "stylelint": "^9.4.0",
    "stylelint-config-standard": "^18.2.0",
    "uglifyjs-webpack-plugin": "^1.2.7"
  },
  "nodemonConfig": {
    "ignore": [
      "pages/*",
      "node_modules",
      ".next"
    ]
  }
}

Here's my next.config.js

const webpack = require('webpack');
const fs = require('fs');
const path = require('path');
const glob = require('glob');
const withPlugins = require('next-compose-plugins');
const withCSS = require('@zeit/next-css');
const optimizedImages = require('next-optimized-images');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

module.exports = withPlugins([
    withCSS,
    optimizedImages,
  ], {
    poweredByHeader: false,
    webpack: (config, options) => {
      const {dev, isServer} = options;

      config.plugins.push(
        new UglifyJsPlugin({
          test: /\.js($|\?)/i
        }),
      );

      config.module.rules.push(
        {
          test: /\.(css|scss)/,
          loader: 'emit-file-loader',
          options: {
            name: 'dist/[path][name].[ext]'
          }
        },
        {
          test: /\.s(a|c)ss$/,
          exclude: /node_modules/,
          use: ['babel-loader', 'raw-loader', 'postcss-loader',
            { loader: 'sass-loader',
              options: {
                includePaths: ['styles', 'node_modules']
                  .map((d) => path.join(__dirname, d))
                  .map((g) => glob.sync(g))
                  .reduce((a, c) => a.concat(c), [])
              }
            }
          ],
        },
        {
          test: /\.js$/,
          enforce: 'pre',
          exclude: /node_modules/,
          loader: 'eslint-loader',
          options: {
            emitWarning: dev,
          },
        },
      )

      if (dev) {
        config.devtool = 'cheap-module-source-map';
      }

      return config;
    },
  }
);

[timneutkens]

Looks like https://github.com/zeit/next-plugins/blob/canary/packages/next-css/css-loader-config.js#L58

[timneutkens]

if (dev) {
        config.devtool = 'cheap-module-source-map';
      }

This is the default in Next.js. Please remove it.

[timneutkens]

{
          test: /\.(css|scss)/,
          loader: 'emit-file-loader',
          options: {
            name: 'dist/[path][name].[ext]'
          }
        },
        {
          test: /\.s(a|c)ss$/,
          exclude: /node_modules/,
          use: ['babel-loader', 'raw-loader', 'postcss-loader',
            { loader: 'sass-loader',
              options: {
                includePaths: ['styles', 'node_modules']
                  .map((d) => path.join(__dirname, d))
                  .map((g) => glob.sync(g))
                  .reduce((a, c) => a.concat(c), [])
              }
            }
          ],
        },

This makes no sense to have when using @zeit/next-css as you're basically compiling css 3 times by adding this.

[timneutkens]

config.plugins.push(
        new UglifyJsPlugin({
          test: /\.js($|\?)/i
        }),
      );

Uglify is running automatically with webpack 4, you can remove this.

[bryan]

Thanks for the updates Tim. This does explain why my compiling did take a bit, heh 😓

[timneutkens]

Could you make a minimal reproducible github repository replicating the issue so I can have a look 👍

[bryan]

@timneutkens

I can't seem to get past another error on a completely new project. I stripped out as much as I can and kept my original configurations. This does still fail on the next-css loader however.

https://github.com/bryan/nextjs-clean

(node:16688) UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'splitChunks' of undefined
    at module.exports (.../node_modules/@zeit/next-css/css-loader-config.js:25:25)
    at Object.webpack (.../node_modules/@zeit/next-css/index.js:15:36)
    at Object.webpack (.../node_modules/next-optimized-images/index.js:299:27)
    at _callee2$ (.../node_modules/next/dist/build/webpack.js:275:38)
    at tryCatch (.../node_modules/regenerator-runtime/runtime.js:62:40)
    at Generator.invoke [as _invoke] (.../node_modules/regenerator-runtime/runtime.js:296:22)
    at Generator.prototype.(anonymous function) [as next] (.../node_modules/regenerator-runtime/runtime.js:114:21)
    at step (.../node_modules/@babel/runtime/helpers/asyncToGenerator.js:12:30)
    at _next (.../node_modules/@babel/runtime/helpers/asyncToGenerator.js:27:9)
    at <anonymous>
(node:16688) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)
(node:16688) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code

[bryan]

@timneutkens Do you have a estimated time in when this will be released into canary?