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

[MartinSchere]

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 <[email protected]>",
  "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

[phipag]

Downgrading from "gatsby-plugin-netlify-cms": "^5.4.0" to "gatsby-plugin-netlify-cms": "5.3.0" can be used as a temporary fix.

[erezrokah]

I believe https://github.com/gatsbyjs/gatsby/pull/30526 broke this by using a different version of mini-css-extract-plugin in the plugin from the one used in Gatsby. I think https://github.com/gatsbyjs/gatsby/pull/31110 should fix it. Per https://github.com/gatsbyjs/gatsby/commit/c0b6dd9aa57d7764af0472ddc88e8ebe760ed1a1 it should be released in [email protected] and [email protected]

[martinjagodic]

@MartinSchere is this still an issue with the latest Gatsby version?

[megascrapper]

@martinjagodic The issue seem to still exist with Gatsby 5.11.0. This only occurred when upgrading webpack to 5.88.2

My setup:

• Netlify CMS version: 2.12.9
• React version: 18.2.0
• Gatsby version: 5.11.0
• gatsby-plugin-netlify-cms version: 7.11.0
• Webpack version: 5.88.2
• Node.JS version: 18.16.0

Error message:

 ERROR  UNKNOWN

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 reg
  istered
  
  - ObjectMiddleware.js:211 Object.register
    [webpack-npm-5.88.1-b68c09f1a7-726e7e05ab.zip]/[webpack]/lib/serialization/ObjectMiddleware.js:211:10
  
  - index.js:182 Function.getCssModule
    [mini-css-extract-plugin-npm-1.6.2-f19d00566e-c2c1f3d7e5.zip]/[mini-css-extract-plugin]/dist/index.js:182
    :34
  
  - index.js:389 MiniCssExtractPlugin.apply
    [mini-css-extract-plugin-npm-1.6.2-f19d00566e-c2c1f3d7e5.zip]/[mini-css-extract-plugin]/dist/index.js:389
    :44
  
  - webpack.js:76 createCompiler
    [webpack-npm-5.88.1-b68c09f1a7-726e7e05ab.zip]/[webpack]/lib/webpack.js:76:12
  
  - webpack.js:143 create
    [webpack-npm-5.88.1-b68c09f1a7-726e7e05ab.zip]/[webpack]/lib/webpack.js:143:16
  
  - webpack.js:167 webpack
    [webpack-npm-5.88.1-b68c09f1a7-726e7e05ab.zip]/[webpack]/lib/webpack.js:167:32
  
  - index.js:72 f
    [webpack-npm-5.88.1-b68c09f1a7-726e7e05ab.zip]/[webpack]/lib/index.js:72:16
  
  - start-server.ts:153 startServer
    [gatsby-virtual-0cacda6fe7]/[gatsby]/src/utils/start-server.ts:153:27
  
  - start-webpack-server.ts:38 startWebpackServer
    [gatsby-virtual-0cacda6fe7]/[gatsby]/src/services/start-webpack-server.ts:38:5
  

not finished Building development bundle - 3.978s

[glassonion1]

@megascrapper I hava same issue on gatsby-plugin-netlify-cms version: 7.11.0 When I upgraded gatsby-plugin-netlify-cms to version 7.12.0, the errors disappeared.

My setup is below:

Netlify CMS version: 2.15.72 React version: 18.2.0 Gatsby version: 5.11.0 gatsby-plugin-netlify-cms version: 7.12.0

works fine.

[megascrapper]

@glassonion1 This only works when I keep the webpack version at 5.88.1. Once I upgraded webpack to any newer version I got the error.