Gatsby에서 CSS 가져 오기에 대한 경고

내 개츠비 프로젝트에서 내 파일 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').

모듈 스타일 시트를 사용하고 있습니다. 따라서 home.module.css 는 다음과 같습니다.

.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;
}

이것은 내가 사용하는 개츠비 버전입니다.

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

작업 트리는 다음과 같습니다.

.
├── 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

실행할 때 오류의 원인을 모르겠습니다.

gatsby develop

오류를 던지는

The page didn't server render (SSR) correctly

처음에는 gatsby 버전이 v2 였고 프로젝트에서 v3으로 업그레이드했기 때문에 SSR 오류의 원인이 무엇인지 모르겠습니다. SSR을 건너 뛰면 다음과 같은 오류가 발생합니다.

_styles_home_module_css__WEBPACK_IMPORTED_MODULE_3__.default is undefined

누군가 이것으로 나를 도울 수 있습니까?