TypeError: this[MODULE_TYPE] is not a function error caused by gatsby-plugin-netlify-cms

Description

After updating to the latest gatsby-plugin-netlify-cms, running gatsby build fails and throws the following error

...
success open and validate gatsby-configs - 0.015 s
success load plugins - 0.509 s
success onPreInit - 0.012 s
success delete html and css files from previous builds - 0.005 s
success initialize cache - 0.009 s
success copy gatsby files - 0.016 s
success onPreBootstrap - 0.004 s
success source and transform nodes - 3.541 s
success building schema - 1.781 s
success createPages - 0.286 s
success createPagesStatefully - 0.666 s
success onPreExtractQueries - 0.001 s
success update schema - 0.147 s
success extract queries from components - 1.084 s
success write out requires - 0.022 s
success write out redirect data - 0.002 s
success Build manifest and related icons - 0.157 s
success onPostBootstrap - 0.165 s
⠀
info bootstrap finished - 10.776 s
⠀
success run static queries - 0.056 s — 4/4 77.12 queries/second
error Plugin gatsby-plugin-netlify-cms returned an error


  ModuleBuildError: Module build failed (from ./node_modules/gatsby/node_modules/mini-css-extract-plugin/dist/loader.js):
  TypeError: this[MODULE_TYPE] is not a function
  
  - loader.js:141 childCompiler.runAsChild
    [frontend]/[gatsby]/[mini-css-extract-plugin]/dist/loader.js:141:24
  
  - Compiler.js:343 compile
    [frontend]/[webpack]/lib/Compiler.js:343:11
  
  - Compiler.js:681 hooks.afterCompile.callAsync.err
    [frontend]/[webpack]/lib/Compiler.js:681:15
  
  
  - Hook.js:154 AsyncSeriesHook.lazyCompileHook
    [frontend]/[tapable]/lib/Hook.js:154:20
  
  - Compiler.js:678 compilation.seal.err
    [frontend]/[webpack]/lib/Compiler.js:678:31
  
  
  - Hook.js:154 AsyncSeriesHook.lazyCompileHook
    [frontend]/[tapable]/lib/Hook.js:154:20
  
  - Compilation.js:1423 hooks.optimizeAssets.callAsync.err
    [frontend]/[webpack]/lib/Compilation.js:1423:35
  
  
  - Hook.js:154 AsyncSeriesHook.lazyCompileHook
    [frontend]/[tapable]/lib/Hook.js:154:20
  
  - Compilation.js:1414 hooks.optimizeChunkAssets.callAsync.err
    [frontend]/[webpack]/lib/Compilation.js:1414:32
...

gatsby develop works without issue. Looking at https://github.com/webpack-contrib/mini-css-extract-plugin/issues/73, suspect it may be related

Steps to reproduce

… working on putting together a demo repo

How to Make a Minimal Reproduction: https://www.gatsbyjs.org/contributing/how-to-make-a-reproducible-test-case/

Expected result

gatsby build complete without error

Actual result

See error above

Environment

  System:
    OS: Linux 4.19 Debian GNU/Linux 10 (buster) 10 (buster)
    CPU: (8) x64 Intel(R) Core(TM) i7-7820HQ CPU @ 2.90GHz
    Shell: 5.7.1 - /usr/bin/zsh
  Binaries:
    Node: 10.15.3 - ~/.nvm/versions/node/v10.15.3/bin/node
    npm: 6.4.1 - ~/.nvm/versions/node/v10.15.3/bin/npm
  Languages:
    Python: 3.6.3 - /home/jchi/.pyenv/shims/python
  Browsers:
    Chrome: 78.0.3904.87
    Firefox: 68.3.0esr
  npmGlobalPackages:
    gatsby-cli: 2.8.16

[vai0]

@erezrokah I’ve gotten past the TypeError: this[MODULE_TYPE] is not a function error after updating gatsby, some plugins, and react to the latest versions.

Now I am encountering several issues, which I’ve been able to reproduce in a fresh repo here: https://github.com/vai0/repo-css-dep-issue

I’ve copied over the latest package.json and gatsby-config.js into this new repo

Issues:

1. On gatsby build, I encounter the error:

...
 ERROR #11321  PLUGIN

"gatsby-plugin-netlify-cms" threw an error while running the onCreateWebpackConfig lifecycle:

No module factory available for dependency type: CssDependency



  Error: No module factory available for dependency type: CssDependency
  
  - Compilation.js:800 addDependency
    [repo-css-dep-issue]/[webpack]/lib/Compilation.js:800:12
...

1. If I remove this block of code, which compiles gatsby’s es6 code - then I encounter this error on gatsby develop, which seems to be attributed to importing gatsby modules into a netlify cms preview component that it seems to have trouble handling.

 ERROR  Failed to compile with 1 errors                                             7:14:19 PM
⠀
 error  in ./node_modules/gatsby/cache-dir/gatsby-browser-entry.js
⠀
Module parse failed: Unexpected token (25:4)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|
|   return (
>     <React.Fragment>
|       {finalData && render(finalData)}
|       {!finalData && <div>Loading (StaticQuery)</div>}

 @ ./src/components/StandardLp.js 13:0-30 34:25-29
 @ ./src/cms/previews/StandardLpPreview.js
 @ ./src/cms/cms.js
 @ multi ./node_modules/gatsby-plugin-netlify-cms/cms.js ./src/cms/cms.js
⠀
 ERROR  Failed to compile with 1 errors                                             7:14:19 PM
⠀
 error  in ./node_modules/gatsby/cache-dir/gatsby-browser-entry.js
⠀
Module parse failed: Unexpected token (25:4)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|
|   return (
>     <React.Fragment>
|       {finalData && render(finalData)}
|       {!finalData && <div>Loading (StaticQuery)</div>}

 @ ./src/components/StandardLp.js 13:0-30 34:25-29
 @ ./src/cms/previews/StandardLpPreview.js
 @ ./src/cms/cms.js
 @ multi ./node_modules/gatsby-plugin-netlify-cms/cms.js ./src/cms/cms.js

1. Styles in netlify-cms dashboard are broken (see font styles and the mispositioned profile icons. ignore the yellow bg - that’s intentional to test that importing a global scss stylesheet into the cms works)

If I remove all gatsby dependencies from the preview component, e.g., the Link and Layout components - it solves issue 2 and 3, but the 1st issue still persists. The way I’ve been able to fix this so far is by removing the removal of MiniCssExtractPlugin here.

[vai0]

using your updates from https://github.com/vai0/repo-css-dep-issue/pull/1 and running with the same node and npm versions didn’t fix it, only running with yarn did the trick 😞

@KyleAMathews is npm equally supported by Gatsby, or is yarn the preferred package manager? We’re running into a strange build issue that only occurs with npm and not yarn, not sure if worth going down the path of migrating our project over to yarn just to get over this particular problem