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

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

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

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

warn Attempted import error: ‘./layout.module.css’ does not contain a default export (imported as ‘styles’).

 

僕は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

スポンサーリンク
JavaScript
スポンサーリンク
でざなり