I am trying to deploy this site to netlify: But I am getting this 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

My next.config.json file looks like this:

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

According to Next.js website, there is built-in support for CSS modules, and Netlify doesn't seem to have a problem with any of the other CSS modules I've created, so I don't understand why there is a a webpack error.

I have tried specifying a CSS loader in 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()

I also tried with this config:

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

But I got the same error message. This is my first time deploying a next.js site to Netlify, so forgive me if I am missing something obvious.

Any help would be greatly appreciated.

I am trying to deploy this site to netlify: https://github./Koda-Pig/joshkoter. But I am getting this 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

My next.config.json file looks like this:

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

According to Next.js website, there is built-in support for CSS modules, and Netlify doesn't seem to have a problem with any of the other CSS modules I've created, so I don't understand why there is a a webpack error.

I have tried specifying a CSS loader in 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()

I also tried with this config:

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

But I got the same error message. This is my first time deploying a next.js site to Netlify, so forgive me if I am missing something obvious.

Any help would be greatly appreciated.

• javascript
• webpack
• next.js
• netlify

• It's a casing issue, replace the import with import homeStyles from '../styles/Home.module.css' (upper case "H") in /pages/index.js. – juliomalves Commented Dec 25, 2021 at 16:19

1 Answer 1

Changing your .css file name might fix your problem.

It seems like a file name problem, I got the same error and fixed it by doing following changes.

I used construction.js and imported Construction.module.css in styles folder.

I changed name from Construction.module.css to ConstructPage.module.css and formated all the .css file.

Therefore it worked for me and I fixed the problem.

Hope it will work for you too.