Warning for importing css in gatsby

Question

In my gatsby projects I am getting this warning for importing the styles to my file pages/index.js

import { Link } from "gatsby"
import React from "react"
import Layout from "../components/Layout"
import style from "../styles/home.module.css"

export default function Home() {

  return (
    <Layout>
      <section className={style.header}>
        <div>
          <h2>Design</h2>
          <h3>Develop & deploy</h3>
          <p>Become web ninja</p>
          <Link to="/projects" className={style.btn}>
            My Portfolio Projects
          </Link>
        </div>
        <img src="banner.png" alt="site banner" style={{ maxWidth: "80%" }} />
      </section>
    
    </Layout>
  )
}

warn Attempted import error: '../styles/home.module.css' does not contain a default export (imported as 'style').

I am using the module stylesheet. So the home.module.css looks like this

.header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 40px;
  align-items: center;
}
.header h2 {
  font-size: 4em;
}
.header h3 {
  font-size: 3em;
  font-weight: 400;
  margin-bottom: 20px;
}
.btn {
  display: inline-block;
  background: #d42990;
  padding: 10px 16px;
  border-radius: 10px;
  margin-top: 20px;
  font-weight: 500;
}

This is the gatsby version I am using

  "gatsby": "^3.0.3",
    "gatsby-source-filesystem": "^3.0.0",
    "react": "^17.0.1",
    "react-dom": "^17.0.1"

The working tree is looks like

.
├── components
│   ├── Layout.js
│   └── Navbar.js
├── node
│   ├── bar.txt
│   └── foo.txt
├── pages
│   ├── 404.js
│   ├── about.js
│   ├── index.js
│   └── projects
│       └── index.js
└── styles
    ├── global.css
    ├── home.module.css
    └── project.module.css

I don't know whats causing the error when I run

gatsby develop

Its throwing the error as

The page didn't server render (SSR) correctly

Initially gatsby version was v2 and I upgraded to v3 in my project.So I don't know whats the reason for SSR error. If I skip the SSR It throws error like

_styles_home_module_css__WEBPACK_IMPORTED_MODULE_3__.default is undefined

Can somebody help me with this ?

Answer 1

You can try this:

import * as style from "../styles/home.module.css"

https://www.gatsbyjs.com/docs/tutorial/part-two/#-build-a-new-page-using-css-modules