The build process encountered errors related to webpack, preventing the successful compilation of nextjs CSS styles

https://i.sstatic.net/JBscR.png I'm encountering an error and struggling to determine if I'm properly importing styles and using components correctly. Can someone guide me in the right direction?

Cloning github.com/branexists/nextjs (Branch: main, Commit: 30c148b)
Cloned successfully: 1.626s
Build cache restored
Running "vercel build"
Vercel CLI 28.4.14
Installing dependencies...
up to date in 498ms
80 packages are looking for funding
  run `npm fund` for details
Detected Next.js version: 13.0.2
Detected `package-lock.json` generated by npm 7+...
Running "npm run build"
> <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="deb0bba6aab4ad9eeef0eff0ee">[email protected]</a> build
> next build
info  - Linting and checking validity of types...
info  - Creating an optimized production build...
(node:318) [DEP_WEBPACK_MODULE_ISSUER] DeprecationWarning: Module.issuer: Use new ModuleGraph API
(Use `node --trace-deprecation ...` to show where the warning was created)
Failed to compile.
./styles/hero.css
Global CSS cannot be imported from files other than your Custom <App>. Due to the Global nature of stylesheets, and to avoid conflicts, Please move all first-party global CSS imports to pages/_app.js. Or convert the import to Component-Level CSS (CSS Modules).
Read more: https://nextjs.org/docs/messages/css-global
Location: comps/Hero.js
Import trace for requested module:
./styles/hero.css
./comps/Hero.js
./styles/hero.css
Module build failed: Error: Final loader (./node_modules/next/dist/build/webpack/loaders/error-loader.js) didn't return a Buffer or String
    at processResult (/vercel/path0/node_modules/next/dist/compiled/webpack/bundle5.js:28:395049)
    at /vercel/path0/node_modules/next/dist/compiled/webpack/bundle5.js:28:396519
    at /vercel/path0/node_modules/next/dist/compiled/webpack/bundle5.js:1:283578
    at iterateNormalLoaders (/vercel/path0/node_modules/next/dist/compiled/webpack/bundle5.js:1:280385)
    at iterateNormalLoaders (/vercel/path0/node_modules/next/dist/compiled/webpack/bundle5.js:1:280470)
    at /vercel/path0/node_modules/next/dist/compiled/webpack/bundle5.js:1:280699
    at runSyncOrAsync (/vercel/path0/node_modules/next/dist/compiled/webpack/bundle5.js:1:279045)
    at iterateNormalLoaders (/vercel/path0/node_modules/next/dist/compiled/webpack/bundle5.js:1:280602)
    at /vercel/path0/node_modules/next/dist/compiled/webpack/bundle5.js:1:280244
    at /vercel/path0/node_modules/next/dist/compiled/webpack/bundle5.js:28:395994
Import trace for requested module:
./styles/hero.css
./comps/Hero.js
> Build failed because of webpack errors
Error: Command "npm run build" exited with 1

`

I attempted to adjust my import syntax from import styles to just import following advice from a previous question that multiple style imports were not allowed.

javascriptcssreactjsnext.js

Answer №1

When encountering an error

To prevent conflicts, Global CSS should only be imported from your custom <App> file. If you need to add styles globally, place them in the styles folder at the project's root and import them into _app.js. For component-specific styles, create a name.module.css file in the components folder instead.

For further information, please visit: https://nextjs.org/docs/messages/css-global

Answer №2

To organize your styling, consider creating a css folder within the components directory and create separate css files for each component.

For example, in your hero.js file:

import React from "react";
import styles from "../comps/hero.module.css";

export default function Hero() {
  return (
    <div className={styles.Header}>
      <p>test</p>
    </div>
  );
}

If you prefer, you could also explore using libraries like styled-components.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Personalize your stream by customizing System messages in stream chat

Looking for help with showing system messages on specific events using Stream chat. I have implemented stream-chat & stream-chat-react from getStream.io. Hi, I want to display the system message when certain events occur. For example, when User A add ...

node.jsreactjsgetstream-chat

Retrieving numerical values from strings using JavaScript

The text I have is formatted as follows: let str = "url(#123456)"; Within the given string, there is a number embedded in it. This number could appear anywhere in the string. I am looking to extract the number 123456 from the provided text. My current ...

javascriptreactjsecmascript-6

What does the buffer.copy() method do in Node.js?

Can someone please discuss the purpose and functionality of buffer.copy() in a Node.js application? Provide a real-time example for better understanding. Additionally, I am curious about the differences between the copy and slice methods in Node.js. How ...

javascriptnode.js

Issue with .env file access token: Successfully working for one API in Next.js, but failing for

I am utilizing two different APIs, WordsAPI and Spotify API. Each API requires an access token or key which I have stored in a secure .env file. I have successfully fetched data from WordsAPI using the same method in getStaticProps, but I am facing issues ...

javascriptreactjsenvironment-variablesnext.jsspotify

Preserve dropdown selections in JavaScript even when the page is refreshed

Two dropdown menus are present, where the second dropdown menu is dependent on the selection made in the first dropdown. However, after refreshing the page following an ajax update, the second dropdown does not retain the previously selected choice. How ...

javascript

Updating pages dynamically using AJAX

There's a glitch I can't seem to shake off. I've successfully implemented AJAX for page loading, but an issue persists. When I navigate to another page after the initial load, the new page contains duplicate tags like <head> and <f ...

javascriptphpjqueryhtmlajax

There seems to be an issue with Bootstrap not condensing into two columns properly on mobile devices

I need help figuring out how to turn a row of 4 images into two columns on tablet and mobile devices. Currently, they are stacking in a single column instead of forming two columns. Basically, I want the images to adjust and display in two columns when vi ...

htmlcsstwitter-bootstrapbootstrap-4

There seems to be a problem with completing the Axios post request in the Javascript Front

My front-end, built with React, is having trouble retrieving data from a third-party API through my Node.js backend. Despite using axios.post request, the response remains undefined and I'm stuck at handling the asynchronous request. It appears that t ...

javascriptexpressaxios

"Utilizing JavaScript to parse and extract data from a JSON

I just received a JSON object through a PHP get request and it has the following structure: data == {"user_id":"7","emp_type_id":[{"0":"11","1":"10"}]} My main focus right now is to retrieve the values within emp_type_id, which are "11" and "10" in this ...

javascriptjson

Can the font-weight of FontAwesome icons be altered?

Is there a method to decrease the weight of one of the FontAwesome icons on my website? It appears much heavier than the font style I am currently utilizing. Here is how it currently displays: : Not very appealing, right? I attempted adjusting the font-w ...

csstwitter-bootstrapfont-awesome

What are the steps to restrict the scope of a <style> declaration in HTML?

Currently, I am in the process of creating a user interface for a webmail. Whenever I receive an email, I extract its content and place it within a <div> element for display purposes. However, one challenge that I am facing is that each email contain ...

javascripthtmlcssstylesheet

Alignment and spacing in a flexible direction

Hello, I am developing a bar app. <AppBar position="sticky" className={classes.appBar} > <Container maxWidth="lg"> <Toolbar className={classes.root}> <Typography noWrap> <img src={require("./node ...

cssreactjsmaterial-ui

Could this be the most straightforward and versatile method for vertically centering text inside a block element?

Discovering something new in the world of coding is always exciting: HTML: <div>Vertically Centered Text<span></span></div> CSS: div { height: 100px; /* adjust as needed */ } div > span { display: inline-block; v ...

csslayoutxhtmlhtml

Steps to develop a runnable Express API

After developing a basic yet fully functional Node.js Express API application using JavaScript, I am now looking to convert it into an executable file that can be run on Windows systems. The main reason behind this is to provide clients with the option of ...

javascriptnode.jsexpressmulter

What is the best way to display the original array when the search input for the title is left blank?

When I enter a todo item title in the search input field and then clear the search input, I expect the initial array of todos to be rendered again. I attempted to accomplish this using an if statement but it did not work - only the previously searched todo ...

javascriptvue.jssearchnuxt.jsvuex

What could be the reason for the <ul> and <li> tags showing up on my website's DOM?

I'm attempting to showcase cards on my webpage, but the text I'm displaying contains some code snippets like the one illustrated below: <div class="app"> <h1> All Fishes and Their Photos</h1> <ul v-for="(fi ...

javascripthtmlcssvue.jshtml-lists

"Is it possible to conditionally render a component depending on the state in

One of the challenges I'm facing is customizing a filter icon from MaterialUI. My goal is to change its color to black when a checkmark is checked, and adjust its position accordingly. Additionally, when a box is checked, it should fill in setFilters. ...

javascriptcssreactjsmaterial-uijsx

What is the best way to ensure my layout adjusts to the height of the Material-UI toolbar?

I am currently in the process of constructing the layout component (Navbar, Footer and Content). This is how it looks: // containers/Layout/index.jsx export default function Layout({ children }) { const classes = useStyles(); return ( <> ...

reactjsmaterial-ui

Root scope digest trigger delay

When invoking $scope.$apply() ten times consecutively, it is expected that ten root scope digests will occur. If the call to $scope.$apply() is debounced so that the trailing call always completes, can we assume that the final state of the application rem ...

javascriptangularjsdigest

Is it considered a bad habit to utilize custom CSS on Bootstrap classes?

Imagine I have the following code snippet in my index.html file, and I am utilizing Bootstrap: <head> bootstrap stylesheet main.css stylesheet ... <button class="btn btn-primary">Button</button The class "btn-primary" is used to style the ...

csstwitter-bootstrapfrontend