【Gatsby】CSS Modulesのdoes not contain a default exportエラーを解決する

GatsbyでCSS Modulesを使おうとしていたらこんなエラーが出ました。

layout.jsにlayout.module.cssをインポートして使おうと思っていたところです。

僕はReact初心者なのでReactやCSS Modules周りの理解がまだ十分じゃないというのもあるかもしれません。というわけで今回はこれを直します。

CSS Modulesエラーが出たときの状態

layout.jsはこんな感じ（関係ない部分は省略）。

import * as React from "react"
import styles from './layout.module.css'

const Layout = ({ children }) => {
  return (
    <>
      <header className={styles.header}>
        ...
      </header>
      <main>{children}</main>
      <footer>
        ...
      </footer>
    </>
  )
}

export default Layout

layout.module.cssはこれだけ。試しに書いてただけです。

.header {
  background-color: blue;
}

ぱっと見CSS Modulesのやり方には問題なさそうな感じですがエラーになるんですね。

CSS Modulesエラーを解決する

エラーの原因はここにありました。

import * as React from "react"//←ここ！
import styles from './layout.module.css'

ここをこんな感じに書き換えます。

import React from "react"//←「*」の部分を削除
import * as styles from './layout.module.css'//←こっちに「*」を記述

こんな感じで書くとうまくいきました。

他の解説記事を見たらこんな書き方しなくてもみんな普通にimport styles from './layout.module.css'って書いてるんですよね。よくわからん。

と思っていたらGatsby公式は今回紹介した書き方になってました。

＞＞Introduction to Styling in Gatsby | Gatsby

ZennでCSS設計の
本を書きました！

「CSS設計をちょっと勉強したけど
結局よくわからなかった…」
そんな人に読んでほしい一冊です！

読んでみる