What is the best way to fix the "Module not detected: Unable to locate [css file] in [directory]" error when deploying a Next.js website on Netlify?

Trying to deploy my site on Netlify from this GitHub repository: https://github.com/Koda-Pig/joshkoter.com, but encountering an error:

10:02:31 AM: Module not found: Can't resolve '../styles/home.module.css' in '/opt/build/repo/pages'
10:02:31 AM: > Build failed because of webpack errors

The contents of my next.config.json file are as follows:

module.exports = {
   reactStrictMode: true
 }
 
 const withVideos = require('next-videos')
 
 module.exports = withVideos()

Next.js documentation mentions built-in support for CSS modules, and Netlify has not had issues with other CSS modules I have used. Unsure why the webpack error is occurring.

Tried adding a CSS loader to next.config.js like this:

module.exports = {
   reactStrictMode: true,
   module: {
    rules: [
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]
  }
 }
 
 const withVideos = require('next-videos')
 
 module.exports = withVideos()

Also attempted with the following configuration:

module.exports = {
   reactStrictMode: true,
   module: {
    rules: [
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
 }
 
 const withVideos = require('next-videos')
 
 module.exports = withVideos()

However, the same error persisted. This being my first experience deploying a Next.js site on Netlify, any guidance would be highly appreciated.

Thank you for your assistance.

Answer №1

Try renaming your .css file to see if that resolves the issue.

It sounds like there may be a problem with the file name. I encountered a similar error and was able to solve it by making some adjustments.

In my case, I was using construction.js and had imported Construction.module.css in the styles folder.

I decided to change the name from Construction.module.css to ConstructPage.module.css, and then went through and reorganized all of the .css files.

After making these changes, the issue was resolved for me. Hopefully this solution works for you as well.

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

The latest URL is not launching in a separate tab

Looking for some assistance with this code snippet: <b-btn variant="primary" class="btn-sm" :disabled="updatePending || !row.enabled" @click="changeState(row, row.dt ? 'activate' : 'start&apo ...

Loading slides in bxSlider using ajax

Is there a method to dynamically insert a slide into bxSlider via ajax without affecting its smooth transition? I am looking to initially display the contents of only one slide upon page load, and then have subsequent slides loaded when the next or previo ...

Encountered an error while attempting to deploy Next.js on AWS Amplify. The deployment was unsuccessful as

I encountered an issue while attempting to deploy my Next.js app on AWS Amplify. The deployment failed with the error message "Build failed. Error: Command failed with exit code 1". Below are the logs from the deployment process: ...

Discovering the Data Structures within the d3.js Illustrations by the Talented Mike Bostock

Wondering how to decipher the structure of JSONs in examples by Mike Bostock, like this one (after being transformed using d3): http://bl.ocks.org/mbostock/3886208 I aim to replicate it with my own fabricated array of JSON objects without relying on load ...

Is there a way for me to insert a hook into the DOM after a promise has finished updating

Currently, I am tasked with maintaining a code snippet that resembles the following structure: {#await details} {#each values as value, i} <td id="{`${config.id}_${i}`}">{value}</td> {/each} {:then details_result} {#each de ...

Guide for getting JavaScript Word Counter to function correctly in Internet Explorer

As a JavaScript beginner, I recently implemented a word counter on a form using JavaScript. It works smoothly across all browsers except for Internet Explorer. In IE9 and IE11, the word counter becomes unreliable, and at times, the entire field can become ...

The barcode is not displaying when using javascript:window.print() to print

I am currently developing a Mean Stack App where I have a requirement to display a barcode. To achieve this, I am utilizing an AngularJS directive for generating a 128 barcode, and it is being generated successfully. However, when I attempt to print by cli ...

Having issues with InstaFeed (search) feature and jQuery Mobile

As a new developer, I am working on my first JQM site. However, I am facing an issue with my search input form where the instafeed photos do not show up until after a manual page refresh following submission. Despite numerous attempts, I cannot seem to res ...

What is the best way to implement GlobalStyles from styled components in a Next.js project?

As I begin my journey into learning Next.js, I find myself a bit confused about how to utilize the createGlobalStyle feature of styled components within this framework. ...

JAVASCRIPT ENCOUNTERS ISSUE WITH RANDOM TEXT GENERATION

Utilizing an array of words, we are in the process of generating random text. The goal is to shuffle and combine these words to form new "random sentences". However, we have encountered a minor issue - the addition of "undefined" at the beginning of each p ...

Creating a variable to store the data retrieved from a package

Imagine you have a functioning code snippet like this: const myPackage = require('myPackage'); myPackage.internal_func(parameter).then(console.log); This outputs a JSON object, for example: { x: 'valX', y: 'valY' } ...

The componentDidMount function is not functioning properly when using a custom _document.js in NextJS

Currently, I am in the process of developing a web app prototype and decided to utilize NextJS to enhance my skills. However, I have realized that my approach differs from the traditional method. I initially began with the Next + Material-UI example availa ...

What is the best way to retrieve user data for showcasing in a post feed using firebase's storage capabilities?

I'm currently developing a forum-style platform where users can share content that will appear on a universal feed. I intend to include user details in the posts (such as photoURL and displayName) similar to how it is done on Twitter. For this projec ...

Tips for updating checked checkboxes in a php mysql database

When submitting an HTML form with a selected checkbox, update the values of the selected checkboxes in a MySQL database. For example: update enquires set status = '2' where id in (selected checkbox values) View the screenshot of the checkbox Vi ...

Checking for different elements between two arrays in AngularJS can be achieved by iterating through

I am working with two arrays: $scope.blinkingBoxes=[1,3,2] In addition, I have another array named $scope.clickedBoxes where I push several values. Currently, I use the following code to determine if the arrays are identical: if(angular.equals($scope.bli ...

Experimenting with the static method within a singleton class using Typescript and Sinon

I have a separate layer in my application that uses a DAO class to retrieve data from the repository. I've implemented the DAO class as a Singleton and made its methods static. In another class, I've created service methods to manipulate the dat ...

Leveraging the power of JavaScript Math methods to dictate the Co-ordinates of HTML Canvas .fillRect

Greetings to everyone! I have dedicated my entire evening to understanding how to implement the (Math.floor(Math.random()) function as the coordinates for the .fillRect method on an HTML canvas element. Despite searching through this website and various ...

Issue encountered while selecting the Electron app menu item

I encountered an error when clicking on a menu item: Any suggestions on how to resolve this issue? Here is the snippet of code that seems to be causing the problem: Main.js const { Menu } = require('electron') const { createNewFile } = require ...

The resolver function in the Nextjs higher order API is not defined

I am trying to create a custom wrapper function for my NextJs API routes that will verify a JWT in the request, validate it, and then execute the original API handler. Here is how I have defined my wrapper function: interface ApiError { message: string, ...

Can you explain the distinction between utilizing Object.create(BaseObject) and incorporating util.inherits(MyObject, BaseObject)?

Can you explain the difference between these two methods of setting the prototype? MyObject.prototype = Object.create(EventEmitter.prototype); MyObject.prototype = util.inherits(MyObject, EventEmitter); UPDATE I've noticed in various projects that ...