TypeError: this[MODULE_TYPE] is not a function in built Next.js app with imported CSS

[AryanJ-NYC]

Expected Behavior

Next apps with imported CSS render.

Current Behavior

Next apps with imported CSS break.

Failure Information (for bugs)

Steps to Reproduce

Please provide detailed steps for reproducing the issue.

1. Go to https://github.com/AryanJ-NYC/build-next-app-with-imported-css (brand new nrwl/next app)
2. Run yarn nx serve build-next-app-with-imported-css --prod
3. Go to http://localhost:4200
4. See error

If you can provide steps to reproduce from scratch, that would be enormously appreciated (i.e. where the first step is npx create-nx-workspace@latest repro-workspace)

Context

  @nrwl/angular : Not Found
  @nrwl/cli : 8.9.0
  @nrwl/cypress : 8.9.0
  @nrwl/eslint-plugin-nx : 8.9.0
  @nrwl/express : Not Found
  @nrwl/jest : 8.9.0
  @nrwl/linter : 8.9.0
  @nrwl/nest : Not Found
  @nrwl/next : 8.9.0
  @nrwl/node : Not Found
  @nrwl/react : 8.9.0
  @nrwl/schematics : Not Found
  @nrwl/tao : 8.9.0
  @nrwl/web : 8.9.0
  @nrwl/workspace : 8.9.0
  typescript : 3.5.3

https://github.com/AryanJ-NYC/build-next-app-with-imported-css

Failure Logs

ModuleBuildError: Module build failed (from /build-next-app-with-imported-css/node_modules/mini-css-extract-plugin/dist/loader.js):
TypeError: this[MODULE_TYPE] is not a function
    at /build-next-app-with-imported-css/node_modules/mini-css-extract-plugin/dist/loader.js:141:24
    at /build-next-app-with-imported-css/node_modules/next/node_modules/webpack/lib/Compiler.js:343:11
    at /build-next-app-with-imported-css/node_modules/next/node_modules/webpack/lib/Compiler.js:671:15
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/build-next-app-with-imported-css/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:24:1)
    at AsyncSeriesHook.lazyCompileHook (/build-next-app-with-imported-css/node_modules/tapable/lib/Hook.js:154:20)
    at /build-next-app-with-imported-css/node_modules/next/node_modules/webpack/lib/Compiler.js:668:31
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/build-next-app-with-imported-css/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook (/build-next-app-with-imported-css/node_modules/tapable/lib/Hook.js:154:20)
    at /build-next-app-with-imported-css/node_modules/next/node_modules/webpack/lib/Compilation.js:1385:35
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/build-next-app-with-imported-css/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook (/build-next-app-with-imported-css/node_modules/tapable/lib/Hook.js:154:20)
    at /build-next-app-with-imported-css/node_modules/next/node_modules/webpack/lib/Compilation.js:1376:32
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/build-next-app-with-imported-css/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook (/build-next-app-with-imported-css/node_modules/tapable/lib/Hook.js:154:20)
    at /build-next-app-with-imported-css/node_modules/next/node_modules/webpack/lib/Compilation.js:1371:36
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/build-next-app-with-imported-css/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at /build-next-app-with-imported-css/node_modules/next/node_modules/webpack/lib/NormalModule.js:313:20
    at /build-next-app-with-imported-css/node_modules/loader-runner/lib/LoaderRunner.js:367:11
    at /build-next-app-with-imported-css/node_modules/loader-runner/lib/LoaderRunner.js:182:20
    at context.callback (/build-next-app-with-imported-css/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
    at /build-next-app-with-imported-css/node_modules/mini-css-extract-plugin/dist/loader.js:143:14
    at /build-next-app-with-imported-css/node_modules/next/node_modules/webpack/lib/Compiler.js:343:11
    at /build-next-app-with-imported-css/node_modules/next/node_modules/webpack/lib/Compiler.js:671:15
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/build-next-app-with-imported-css/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:24:1)
    at AsyncSeriesHook.lazyCompileHook (/build-next-app-with-imported-css/node_modules/tapable/lib/Hook.js:154:20)
    at /build-next-app-with-imported-css/node_modules/next/node_modules/webpack/lib/Compiler.js:668:31
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/build-next-app-with-imported-css/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook (/build-next-app-with-imported-css/node_modules/tapable/lib/Hook.js:154:20)
    at /build-next-app-with-imported-css/node_modules/next/node_modules/webpack/lib/Compilation.js:1385:35
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/build-next-app-with-imported-css/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook (/build-next-app-with-imported-css/node_modules/tapable/lib/Hook.js:154:20)
    at /build-next-app-with-imported-css/node_modules/next/node_modules/webpack/lib/Compilation.js:1376:32

Other

Related to webpack-contrib/mini-css-extract-plugin#73

[Cammisuli]

The change in the linked PR will fix this issue:
https://github.com/nrwl/nx/pull/2173/files#diff-3ae94fa96db6d0580a313332735007e9R84

Since it's now using a boolean, Next can then determine to use a dev server or not instead of always trying to use dev server.

[github-actions]

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.