Gatsby - Caution! Import Error Detected: 'css' Does Not Have a Default Export (Imported as 'styles')

Question

Gatsby - Caution! Import Error Detected: 'css' Does Not Have a Default Export (Imported as 'styles')

While starting with Gatsby, I encountered an issue in my app where running the command 'gatsby develop' resulted in a warning in the terminal:

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

Subsequently, when attempting to load a page, it failed with the following runtime error:

Unhandled Runtime Error 
Cannot read property 'header' of undefined 
<section className={styles.header}>

The code snippet causing the issue is from my index.js file:

import styles from '../styles/home.module.css'

export default function Home({ data }) {
  return (
  <Layout>
     <section className={styles.header}>

Here is a portion of my CSS module from the home.module.css file:

.header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 40px;
  align-items: center;
}

I am unsure what could be wrong with my CSS Module. Any insights?

javascript css reactjs gatsby css-modules

Answer 1

Answer №1

Starting with Gatsby version 3, CSS modules must be imported as ES Modules:

import * as styles from './[componentName].module.css'

When implementing this in your code:

import * as styles from '../styles/home.module.css'

It's important to note that this method of importing CSS modules is not recommended, as it prevents webpack from optimizing your styles. Ideally, you should import specific named modules like this:

import React from "react"
import { box } from './mystyles.module.css'

const Box = ({ children }) => (
  <div className={box}>{children}</div>
)

For more information, visit:

Answer 2

Starting with Gatsby version 3, CSS modules must be imported as ES Modules:

import * as styles from './[componentName].module.css'

When implementing this in your code:

import * as styles from '../styles/home.module.css'

It's important to note that this method of importing CSS modules is not recommended, as it prevents webpack from optimizing your styles. Ideally, you should import specific named modules like this:

import React from "react"
import { box } from './mystyles.module.css'

const Box = ({ children }) => (
  <div className={box}>{children}</div>
)

For more information, visit:

Gatsby - Caution! Import Error Detected: 'css' Does Not Have a Default Export (Imported as 'styles')

Answer №1

Similar questions

color settings on a search icon as a background

Ways to resolve flickering caused by css keyframe animation

When floating a heading 4 (h4) and two divs to the left, and a single div to the right,

Customize the Bootstrap Navbar to display background only on the right side and not across the entire width

Using regular expressions to enclose a JSON property value within a new string. Upgrading to MongoDB

Steps to link two mat-autocomplete components based on the input change of one another

Tips for customizing text field appearance in Safari and Chrome

Store in database and forward to a different web address

The issue of objects within objects consistently yielding undefined when using $.each

javascript - Alternate text colors several times within specified color ranges

The position of the searchclear button has been shifted

The setInterval function for the automated image slider is experiencing issues and is not functioning properly

When inline-block elements wrap onto a new line, they expand to full width

Utilize ng-show/ng-hide to dynamically display messages or content based on the results obtained

Activate an iframe upon changing the media query

Tips for creating a global variable by combining form input and an API request in React

Angularjs - Navigating the Depths of OrderBy: Effective Strategies for Handling Complex Sorting Structures

Unable to create a responsive layout because of the use of inline CSS with "margin"

What could be causing html-webpack-inline-source-plugin to prevent the page from refreshing after editing CSS files?

Toggle the visibility of a div depending on a value that is loaded on the page