gatsby: gatsby-plugin-netlify-cms breaks build due to mini-css-extract-plugin already being registered

Description

I’m trying to setup my site with netlify-cms with gatsby v3. Did it for a different site but when I rebuild my yarn lock on that site I now get the same error. While building the bundles it crashes with the error:

ObjectMiddleware.register: serializer for
mini-css-extract-plugin/dist/CssModule/null is already registered

  Error: ObjectMiddleware.register: serializer for mini-css-extract-plugin/dist/Css
  Module/null is already registered
  
  - ObjectMiddleware.js:182 Object.register
    [liquefy-gatsby-site]/[webpack]/lib/serialization/ObjectMiddleware.js:182:10
  
  - index.js:163 Function.getCssModule
    [liquefy-gatsby-site]/[mini-css-extract-plugin]/dist/index.js:163:34
  
  - index.js:358 MiniCssExtractPlugin.apply
    [liquefy-gatsby-site]/[mini-css-extract-plugin]/dist/index.js:358:44
  
  - webpack.js:74 createCompiler
    [liquefy-gatsby-site]/[webpack]/lib/webpack.js:74:12
  
  - webpack.js:123 create
    [liquefy-gatsby-site]/[webpack]/lib/webpack.js:123:16
  
  - webpack.js:147 webpack
    [liquefy-gatsby-site]/[webpack]/lib/webpack.js:147:32
  
  - index.js:54 f
    [liquefy-gatsby-site]/[webpack]/lib/index.js:54:15
  
  - start-server.ts:164 startServer
    [liquefy-gatsby-site]/[gatsby]/src/utils/start-server.ts:164:20
  
  - start-webpack-server.ts:44 startWebpackServer
    [liquefy-gatsby-site]/[gatsby]/src/services/start-webpack-server.ts:44:7
  

not finished Building development bundle - 6.380s

I’ve tried downgrading all my packages to the same for the site it does work for, but it just won’t work. Reinstalled packages and rebuilding yarn.lock multiple times with no success.

Steps to reproduce

This repo is setup to recreate the error: https://github.com/gijsbotje/gijsbotje-gatsby-bug-repro

• clone the repo
• run yarn develop to see that it works without netlify cms, comment out the netlify cms app at the bottom of the gatsby-config and run it again. Now the develop build works.

Expected result

I expect the build to succeeds and have the CMS available at localhost://8000/admin.

Actual result

The above mentioned error keeps coming up.

Environment

  System:
    OS: macOS 11.2.3
    CPU: (12) x64 Intel(R) Core(TM) i9-8950HK CPU @ 2.90GHz
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 12.19.0 - ~/.nvm/versions/node/v12.19.0/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 6.14.11 - ~/.nvm/versions/node/v12.19.0/bin/npm
  Languages:
    Python: 2.7.16 - /usr/bin/python
  Browsers:
    Chrome: 90.0.4430.85
    Firefox: 85.0
    Safari: 14.0.3
  npmPackages:
    gatsby: ^3.2.0 => 3.4.0 
    gatsby-background-image: ^1.4.1 => 1.5.3 
    gatsby-plugin-catch-links: 3.2.0 => 3.2.0 
    gatsby-plugin-fontawesome-css: ^1.0.0 => 1.1.0 
    gatsby-plugin-gdpr-cookies: ^1.0.7 => 1.0.14 
    gatsby-plugin-image: ^1.2.0 => 1.4.0 
    gatsby-plugin-manifest: 3.2.0 => 3.2.0 
    gatsby-plugin-netlify: 3.2.0 => 3.2.0 
    gatsby-plugin-netlify-cms: ^5.3.0 => 5.4.0 
    gatsby-plugin-offline: ^4.2.0 => 4.4.0 
    gatsby-plugin-react-helmet: ^4.2.0 => 4.4.0 
    gatsby-plugin-react-svg: ^3.0.0 => 3.0.1 
    gatsby-plugin-sass: ^4.2.0 => 4.4.0 
    gatsby-plugin-sharp: ^3.2.0 => 3.4.0 
    gatsby-plugin-sitemap: 3.2.0 => 3.2.0 
    gatsby-plugin-stylelint: ^3.2.0 => 3.2.0 
    gatsby-plugin-web-font-loader: ^1.0.4 => 1.0.4 
    gatsby-remark-classes: ^1.0.0 => 1.0.0 
    gatsby-remark-copy-linked-files: ^3.2.0 => 3.2.0 
    gatsby-remark-images: ^4.2.0 => 4.2.0 
    gatsby-remark-prismjs: ^4.2.0 => 4.2.0 
    gatsby-remark-relative-images: ^2.0.2 => 2.0.2 
    gatsby-remark-responsive-iframe: ^3.2.0 => 3.2.0 
    gatsby-source-filesystem: ^3.2.0 => 3.4.0 
    gatsby-transformer-remark: ^3.2.0 => 3.2.0 
    gatsby-transformer-sharp: ^3.2.0 => 3.4.0 
  npmGlobalPackages:
    gatsby-cli: 3.0.0