search

decaporg / decap-cms

A Git-based CMS for Static Site Generators
https://decapcms.org
MIT License
17.97k stars 3.05k forks source link

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

Open MartinSchere opened 3 years ago

MartinSchere commented 3 years ago

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: image

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 <mathews.kyle@gmail.com>",
  "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 commented 3 years ago

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 commented 3 years ago

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 gatsby@3.5.0 and gatsby-plugin-netlify-cms@5.5.0

martinjagodic commented 1 year ago

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

megascrapper commented 1 year ago

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

My setup:

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 commented 1 year ago

@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 commented 12 months ago

@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.