Deploying a Next.js App: How to Fix the ‘Module not Found’ Error

Bob spent days trying to track down this sneaky error — don’t be like Bob (pixabay)

Module Not Found

Deploying a Next.js app can be a tricky process, especially when you run into new issues when actually building and deploying to a live server like Fleek or Vercel. One sneaky issue that developers may encounter is a “Module not found” error, which can be caused by a case sensitivity issue with git and operating systems. This error is particularly frustrating because you have no way of really seeing the actual error — everything appears to be just right on the surface.

The Error

Here’s what the error message looks like when trying to deploy and build our app to the live server on Fleek:

2:39:21 PM 12/11/2022: Failed to compile.
2:39:21 PM 12/11/2022: ./components/ParentComponent.js
2:39:21 PM 12/11/2022: Module not found: Can't resolve './Component' in '/workspace/components'
2:39:21 PM 12/11/2022: Import trace for requested module:
2:39:21 PM 12/11/2022: ./pages/Page.js
2:39:21 PM 12/11/2022: > Build failed because of webpack errors
2:39:21 PM 12/11/2022: error Command failed with exit code 1.

This error message is indicating that the file ‘./components/ParentComponent.js’ is trying to import a file called ‘./Component’, but it can’t find it in the ‘/workspace/components’ directory. When I ran into this, I tried a few different solutions unsuccessfully, such as changing the path for the ‘Component.js’ file, trying a different build method, ignoring eslint in next.config.js. Despite these attempts, the sneaky error stayed elusive, because I had no way of actually seeing it in my code editor.

Here is the import in the parent component, `ParentComponent.js` where the error is tracing to:

import Component from "./Component"

Everything looks correctly named.

Component.js looks like this:

#imports 
const Component = ({
    #props
}) => {
  #stuff
}
export default Component

Everything appears to be correct here as well. ‘Component’ is properly named and consistent.

And if we check the project directory:

my-project
  ↳ components
    ↳ ParentComponent.js
      Component.js
  ↳ pages
    ↳ Page.js

That looks correct too. Once again, the names look consistent.

But sometimes you will run into an error despite the fact that everything looks just fine, with the error often popping up when you attempt to deploy live directly from your GitHub repo.

The problem is that the file name is appearing one way, ‘Component.js’, yet behind the scenes, a case sensitivity issue can emerge and in actuality it’s trying to build with ‘component.js’, which won’t work.

The Solution

The solution is surprisingly simple:

1. Rename the module Component.js and all of the references to something entirely new.
2. Commit the changes.
3. Rename everything back to the desired names and commit/push your changes.

The Root Cause

The root cause of this issue is that git is case sensitive and some operating systems are not. And in this instance, the file was likely named ‘component.js’ and then later renamed to ‘Component.js’. Somewhere along the line, the code was pushed, and then changed, and the the change was never recognized as needing to be updated, resulting in two different versions, ‘component.js’ and ‘Component.js’, leaving you with no way of knowing.

So when Vercel, or whichever service you are using, builds the code straight from GitHub, it builds it with the wrong component name, and you get this “Module not found” error.

Conclusion

This case sensitivity issue with git and operating systems can cause some serious confusion when deploying a Next.js app. To prevent this issue, take care to correctly name your components in the first place and ensure that all file names in your app are consistent in their case across all references. Happy coding!

References:

I found help cornering this issue here https://github.com/vercel/next.js/issues/9482 where jamesmosier pointed out the possibility of a case sensitivity error.

I also posted a version of this to Stack Overflow https://stackoverflow.com/questions/74776925/module-not-found-cant-resolve-withdraw-when-deploying-next-js-app/74777032#74777032