Module '"*.module.scss"' has no exported member in Gatsby + Typescript

I've followed Gatsby's demo project in their documentation (which is highly overdue for an update).
I've followed the instructions here: https://www.gatsbyjs.com/docs/reference/release-notes/migrating-from-v2-to-v3/#css-modules-are-imported-as-es-modules

I've added an index.d.ts to the /src of my project with this content:

declare module '*.module.scss' {
  const content: {[className: string]: string};
  export = content;
}

The website compiles fine, however, Visual Studio code shows red files everywhere with the following issue:

Module '"*.module.scss"' has no exported member 'container'.

Here's some sample code with that class.

styles.module.scss

.container {
    max-width: 1000px;
    width:1000px;
    padding: 0 1.4rem;
    margin: 0 auto;
}

index.tsx

import * as React from "react"
import { HeadFC, PageProps, graphql } from "gatsby"
import DefaultTemplate from "../templates/default"
import HeroBannerComponent from "../components/HeroBanner"
import {
  container  // <-- error is here
} from "../styles/styles.module.scss"

const IndexPage = () => {
  return (
    <DefaultTemplate pageTitle="Home">
      <HeroBannerComponent></HeroBannerComponent>
      <main>
        <div>
          <div className={container}>

          </div>
          <hr />
          <div className={container}>

          </div>
        </div>
      </main>
    </DefaultTemplate>

  )
}

export default IndexPage

export const Head: HeadFC = () => <title>Home Page</title>

How do I get rid of the error (or ignore it so that I don't have errors throughout my UI?

Solution

You can't have arbitrarily named export declarations but you also shouldn't try as you'd just be opting out of type safety. Better to auto-generate the typings:

https://www.gatsbyjs.com/plugins/gatsby-plugin-scss-typescript/

You could also do this one-liner but you'd get any and not string (not recommended):

declare module '*.module.scss'