Error: ObjectMiddleware.register: serializer for mini-css-extract-plugin/dist/CssModule/null is already registered when using React 17 and netlify CMS

React 17 is causing the gatsby plugin to throw dependency erros (See #5111). A suggested workaround is:

> Hi @arpitdalal, the CMS is a community project so the best way to fix this is via a contribution.
> A workaround is suggested in the issue description:
> 

This causes the issue above:

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/CssModule/null is already registered

- ObjectMiddleware.js:182 Object.register
[personal-blog]/[webpack]/lib/serialization/ObjectMiddleware.js:182:10

- index.js:163 Function.getCssModule
[personal-blog]/[mini-css-extract-plugin]/dist/index.js:163:34

- index.js:358 MiniCssExtractPlugin.apply
[personal-blog]/[mini-css-extract-plugin]/dist/index.js:358:44

- webpack.js:74 createCompiler
[personal-blog]/[webpack]/lib/webpack.js:74:12

- webpack.js:123 create
[personal-blog]/[webpack]/lib/webpack.js:123:16

- webpack.js:147 webpack
[personal-blog]/[webpack]/lib/webpack.js:147:32

- index.js:54 f
[personal-blog]/[webpack]/lib/index.js:54:15

- start-server.ts:163 startServer
[personal-blog]/[gatsby]/src/utils/start-server.ts:163:20

- start-webpack-server.ts:44 startWebpackServer
[personal-blog]/[gatsby]/src/services/start-webpack-server.ts:44:7

not finished Building development bundle - 8.991s
```

**Describe the bug**

**To Reproduce**
1. Create a project with gatsby v3 and react 17
2. Install netlify CMS and the gatsby plugin
3. See the error

Package.json:
```

{
"name": "gatsby-starter-blog",
"private": true,
"description": "A starter for a blog powered by Gatsby and Markdown",
"version": "0.1.0",
"author": "Kyle Mathews ",
"bugs": {
"url": "https://github.com/gatsbyjs/gatsby/issues"
},
"dependencies": {
"@types/jest": "^26.0.23",
"@types/react-helmet": "^6.1.1",
"@types/react-test-renderer": "^17.0.0",
"gatsby": "^3.3.1",
"gatsby-plugin-feed": "^3.2.0",
"gatsby-plugin-gatsby-cloud": "^2.2.0",
"gatsby-plugin-google-analytics": "^3.2.0",
"gatsby-plugin-image": "^1.2.1",
"gatsby-plugin-manifest": "^3.2.0",
"gatsby-plugin-netlify-cms": "^5.4.0",
"gatsby-plugin-offline": "^4.2.0",
"gatsby-plugin-react-helmet": "^4.2.0",
"gatsby-plugin-react-svg": "^3.0.1",
"gatsby-plugin-sass": "^4.4.0",
"gatsby-plugin-sharp": "^3.2.1",
"gatsby-remark-copy-linked-files": "^3.2.0",
"gatsby-remark-images": "^4.2.0",
"gatsby-remark-prismjs": "^4.2.0",
"gatsby-remark-responsive-iframe": "^3.2.0",
"gatsby-remark-smartypants": "^3.2.0",
"gatsby-source-contentful": "^5.4.0",
"gatsby-source-filesystem": "^3.2.0",
"gatsby-transformer-remark": "^3.2.0",
"gatsby-transformer-sharp": "^3.2.0",
"netlify-cms-app": "^2.14.46",
"prismjs": "^1.23.0",
"react": "^17.0.0",
"react-dom": "^17.0.0",
"react-helmet": "^6.1.0",
"react-icons": "^4.2.0",
"sass": "^1.32.12"
},
"devDependencies": {
"@babel/core": "^7.13.16",
"babel-jest": "^26.6.3",
"babel-preset-gatsby": "^1.4.0",
"identity-obj-proxy": "^3.0.0",
"jest": "^26.6.3",
"plop": "^2.7.4",
"prettier": "2.2.1",
"react-test-renderer": "^17.0.2"
},
"homepage": "https://github.com/gatsbyjs/gatsby-starter-blog#readme",
"keywords": [
"gatsby"
],
"license": "0BSD",
"main": "n/a",
"repository": {
"type": "git",
"url": "git+https://github.com/gatsbyjs/gatsby-starter-blog.git"
},
"scripts": {
"build": "gatsby build",
"develop": "gatsby develop",
"format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,md}\"",
"start": "npm run develop",
"serve": "gatsby serve",
"clean": "gatsby clean",
"test": "jest",
"generate": "plop"
}
}

```

This is most likely due to a dependency conflict I guess