Gatsby with PostCSS 8 - Attempted import error: 'component.module.css' does not contain a default export (imported as 'styles')

Question

I have a Gatsby and Sanity site that's based on a starter project. Everything has worked great so far, but I updated all of my packages and plugins today in my package.json file to get rid of all npm warnings. This included updating to Gatsby 3.0.3 and PostCss 8 (I'm also now using the gatsby-plugin-postcss 4.0.0).

I managed to work through some initial errors, but now I'm having a problem where it's not recognizing my CSS Modules. I get errors for every component file:

Attempted import error: '[componentName].module.css' does not contain a default export (imported as 'styles')

and when I import the css file in the react components

import styles from './[componentName].module.css'

the styles object returns undefined. Do I need to downgrade to older versions of some of these packages?

Here is my package.json:

  "dependencies": {
    "@cloudflare/wrangler": "^1.15.0",
    "@fontsource/montserrat": "^4.2.2",
    "@fontsource/raleway": "^4.2.2",
    "@sanity/block-content-to-react": "^2.0.7",
    "@sanity/client": "^2.2.6",
    "@sanity/image-url": "^0.140.22",
    "date-fns": "^2.19.0",
    "dotenv": "^8.2.0",
    "gatsby": "^3.0.3",
    "gatsby-plugin-anchor-links": "^1.2.1",
    "gatsby-plugin-manifest": "^3.0.0",
    "gatsby-plugin-react-helmet": "^4.0.0",
    "gatsby-source-sanity": "^6.0.5",
    "get-youtube-id": "^1.0.1",
    "postcss-import": "^14.0.0",
    "postcss-preset-env": "^6.7.0",
    "react": "^17.0.1",
    "react-autosize-textarea": "^7.1.0",
    "react-dom": "^17.0.1",
    "react-helmet": "^6.1.0",
    "react-hook-form": "^6.15.4",
    "react-icons": "^4.2.0",
    "react-script": "^2.0.5",
    "react-youtube": "^7.13.1"
  },
  "devDependencies": {
    "eslint": "^7.21.0",
    "eslint-config-standard": "^16.0.2",
    "eslint-config-standard-react": "^11.0.1",
    "eslint-plugin-import": "^2.22.1",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-promise": "^4.3.1",
    "eslint-plugin-react": "^7.22.0",
    "eslint-plugin-standard": "^4.1.0",
    "gatsby-plugin-postcss": "^4.0.0",
    "postcss": "^8.2.7",
    "prettier-eslint-cli": "^5.0.1",
    "prop-types": "^15.7.2"
  }

Answer 1

Since Gatsby v3 onwards you need to import the modules as ES modules:

import * from './[componentName].module.css'

In your case:

import * as styles from './[componentName].module.css'

Keep in mind that importing all styles at once won't allow webpack to treeshake your styles. The preferred way is to import modules separately like:

import { style1, style2 } from './mystyles.module.css

You can follow the stack trace of the discussion in this GitHub thread.