Menu
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 ?
692
Gatsby extends import so you can import CSS files directly into your components. Gatsby automatically concatenates and minifies CSS and inlines them into the <head> of your HTML files for the fastest possible page load time.
The "does not contain a default export" error occurs when we try to use a default import to import from a module that doesn't have a default export. To solve the error, make sure the module has a named export and wrap the import in curly braces, e.g. import {myFunction} from './myModule .
Gatsby extends import so you can import CSS files directly into your components. Gatsby automatically concatenates and minifies CSS and inlines them into the <head> of your HTML files for the fastest possible page load time. CSS files with global styles like typography and colors are typically imported into the site’s gatsby-browser.js file.
This error/warning is caused by the Webpack plugin mini-css-extract-plugin wanting all CSS imports to be in the same order. This is because it confused CSS modules with plain CSS.
They can roughly be grouped into three styling approaches — standard CSS, CSS Modules, and CSS-in-JS — all of which Gatsby supports. Gatsby doesn’t have an opinion about which styling approach you choose. Almost every possible option is supported through official and community plugins.
This error/warning is caused by the Webpack plugin mini-css-extract-plugin wanting all CSS imports to be in the same order. This is because it confused CSS modules with plain CSS. Plain CSS is used globally and the order of importing matters as the last imported CSS class overwrites any before it.
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
61
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
