Gatsby v3 Migration fails - "Invalid options object. Mini CSS Extract Plugin Loader has been initialized using an options object that does not match the API schema."

[don-esteban]

Hi,

all SCSS modules throw this error:

ERROR #98123  WEBPACK

Generating JavaScript bundles failed

Invalid options object. Mini CSS Extract Plugin Loader has been initialized using an options object that does not match the API schema.
- options has an unknown property 'hmr'. These properties are valid:
  object { publicPath?, esModule?, modules? }

File: src/components/app.module.scss

This is my package.json

{
  "name": "...",
  "private": true,
  "description": "...",
  "version": "4.0.0",
  "author": "...",
  "bugs": {
    "url": "..."
  },
  "dependencies": {
    "@babel/core": "^7.13.8",
    "@donesteban/hello": "^1.0.2",
    "@fortawesome/fontawesome-svg-core": "^1.2.32",
    "@fortawesome/free-brands-svg-icons": "^5.15.1",
    "@fortawesome/free-regular-svg-icons": "^5.15.1",
    "@fortawesome/free-solid-svg-icons": "^5.15.1",
    "@fortawesome/react-fontawesome": "^0.1.14",
    "@mdx-js/mdx": "^1.6.22",
    "@mdx-js/react": "^1.6.22",
    "@tippyjs/react": "^4.2.3",
    "acorn": "^8.0.5",
    "email-validator": "^2.0.4",
    "exceljs": "^4.2.0",
    "gatsby": "^3.0.2",
    "gatsby-background-image": "^1.3.1",
    "gatsby-image": "^3.0.0",
    "gatsby-plugin-catch-links": "^3.0.0",
    "gatsby-plugin-feed": "^3.0.0",
    "gatsby-plugin-fontawesome-css": "^1.0.0",
    "gatsby-plugin-google-analytics": "^2.8.0",
    "gatsby-plugin-manifest": "^2.9.1",
    "gatsby-plugin-mdx": "^1.7.1",
    "gatsby-plugin-offline": "^3.7.1",
    "gatsby-plugin-react-helmet": "^3.7.0",
    "gatsby-plugin-root-import": "^2.0.5",
    "gatsby-plugin-sass": "^2.8.0",
    "gatsby-plugin-sharp": "^3.0.0",
    "gatsby-plugin-typography": "^2.9.0",
    "gatsby-remark-autolink-headers": "^2.8.0",
    "gatsby-remark-copy-linked-files": "^2.7.0",
    "gatsby-remark-images": "^3.8.1",
    "gatsby-remark-normalize-paths": "^1.1.0",
    "gatsby-remark-prismjs": "^3.10.0",
    "gatsby-remark-responsive-iframe": "^2.8.0",
    "gatsby-remark-smartypants": "^2.7.0",
    "gatsby-source-filesystem": "^3.0.0",
    "gatsby-transformer-json": "^2.8.0",
    "gatsby-transformer-sharp": "^3.0.0",
    "gatsby-transformer-yaml": "^2.8.0",
    "infinite-react-carousel": "^1.2.11",
    "inquirer": "^6.5.2",
    "mailgun-js": "^0.22.0",
    "node-fetch": "^2.6.1",
    "node-sass": "^4.14.1",
    "prismjs": "^1.23.0",
    "react": "^16.14.0",
    "react-alice-carousel": "^2.2.0",
    "react-dom": "^16.14.0",
    "react-google-recaptcha": "^2.1.0",
    "react-helmet": "^5.2.1",
    "react-outside-click-handler": "^1.3.0",
    "react-refresh": "^0.8.3",
    "react-slick": "^0.28.0",
    "react-typography": "^0.16.19",
    "react-use": "^15.3.4",
    "sanitize-html": "^2.3.2",
    "site-search-360-react": "^0.1.2",
    "slick-carousel": "^1.8.1",
    "typeface-merriweather": "^1.1.13",
    "typeface-montserrat": "^1.1.13",
    "typography": "^0.16.19",
    "typography-theme-wordpress-2016": "^0.16.19",
    "unslugify": "^1.0.2",
    "update": "^0.7.4",
    "xlsx": "^0.16.9"
  },
  "devDependencies": {
    "cypress": "^6.6.0",
    "prettier": "2.0.5",
    "start-server-and-test": "^1.11.7"
  },
  "homepage": "...",
  "keywords": [
    "..."
  ],
  "license": "0BSD",
  "main": "n/a",
  "repository": {
    "type": "git",
    "url": "..."
  },
  "scripts": {
    "build": "gatsby build",
    "develop": "netlify dev",
    "format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,md}\"",
    "start": "gatsby develop",
    "serve": "gatsby serve",
    "clean": "gatsby clean",
    "deploy": "npm run clean; npm run build; netlify deploy --prod",
    "cy:open": "cypress open",
    "test:e2e": "start-server-and-test develop http://localhost:8000 cy:open"
  }
}

and the gatsby-config.js:

module.exports = {
  siteMetadata: {
    ...
  },
  plugins: [
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `${__dirname}/content/pages`,
        name: `pages`,
        ignore: ["**/~*"]
      }
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `${__dirname}/content/images/sx`,
        name: `sx-images`
      }
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `${__dirname}/content/images/brands`,
        name: `brand-images`
      }
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `${__dirname}/content/images/contacts`,
        name: `contact-images`
      }
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `${__dirname}/content/images/slider`,
        name: `slider-images`
      }
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `${__dirname}/content/data`,
        name: `data`
      }
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `${__dirname}/content/assets`,
        name: `assets`
      }
    },
    {
      resolve: `gatsby-plugin-mdx`,
      options: {
        gatsbyRemarkPlugins: [
          `gatsby-remark-normalize-paths`,
          {
            resolve: `gatsby-remark-images`,
            options: {
              maxWidth: 590
            }
          },
          {
            resolve: `gatsby-remark-responsive-iframe`,
            options: {
              wrapperStyle: `margin-bottom: 1.0725rem`
            }
          },
          {
            resolve: `gatsby-remark-autolink-headers`,
            options: {
              icon: false
            }
          },
          `gatsby-remark-copy-linked-files`,
          `gatsby-remark-smartypants`,
          `gatsby-remark-prismjs`
        ]
      }
    },
    {
      resolve: `gatsby-transformer-json`,
      options: {
        typeName: ({ node, object, isArray }) =>
          node.name === "manufacturer.meta" ? "manufacturerMeta" : "otherJSON"
      }
    },
    {
      resolve: `gatsby-plugin-manifest`,
      ...
    },
    {
      resolve: `gatsby-plugin-typography`,
      options: {
        pathToConfigModule: `src/utils/typography`
      }
    },
    `gatsby-plugin-react-helmet`,
    `gatsby-transformer-sxproducts`,
    `gatsby-plugin-sx-json-api`,
    `gatsby-transformer-yaml`,
    `gatsby-plugin-catch-links`,
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    "gatsby-plugin-sass",
    "gatsby-plugin-fontawesome-css",
    "gatsby-plugin-root-import"
 
  ]
}

Appreciate any hints. Thanks
Stefan