Search code examples
next.jsmodulecomponentsconfig

Module not found: Can't resolve './Withdraw' when deploying Next.js App

I've been working on this app locally with Next.js. It deploys and builds fine locally, but I'm having issues getting it to work when deploying it to Fleek and Vercel.

On Fleek, I have configured the deploy and build settings for a Next.js app, but I'm still running into this issue.

When I try to deploy and build to the live server on Fleek, I get the following error.

2:39:21 PM 12/11/2022: Failed to compile.
2:39:21 PM 12/11/2022: ./components/Pool.js
2:39:21 PM 12/11/2022: Module not found: Can't resolve './Withdraw' in '/workspace/components'
2:39:21 PM 12/11/2022: Import trace for requested module:
2:39:21 PM 12/11/2022: ./pages/Stake.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.

The next.config.js file:


/** @type {import('next').NextConfig} */
const nextConfig = {
    reactStrictMode: true,
    swcMinify: true,
    eslint: {
        ignoreDuringBuilds: true,
    },
    resolve: {
        extensions: ["", ".js", ".jsx"],
    },
}

module.exports = nextConfig

The package.json file:


{
  "name": "gwin-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@headlessui/react": "^1.6.6",
    "@heroicons/react": "^1.0.6",
    "moralis": "^1.9.0",
    "next": "12.2.2",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-hot-toast": "^2.3.0",
    "react-moralis": "^1.4.0",
    "tw-elements": "^1.0.0-alpha12",
    "web3": "^1.7.5",
    "web3uikit": "^0.1.170"
  },
  "devDependencies": {
    "autoprefixer": "^10.4.7",
    "eslint": "8.20.0",
    "eslint-config-next": "12.2.2",
    "postcss": "^8.4.14",
    "tailwindcss": "^3.1.6"
  }
}

Here is the import in Pool.js

import Withdraw from "./Withdraw"

Withdraw.js looks like this


#imports 

const Withdraw = ({
    #props
}) => {
  #stuff
}

export default Withdraw

I've tried:

  • ignoring eslint in the next.config.js.
  • changing the path for Withdraw.js from '../components/Withdraw' to './Withdraw' (Pool.js and Withdraw.js are both in the components folder). I thought maybe a different path would help.
  • yarn build && yarn start (locally, which works)
  • Checking that component is "Withdraw" and "Withdraw.js" is the file.
  • resolving ext. in next.config.js
Solution

  • This is a case sensitivity issue with git and operating systems.

    Find more info here https://github.com/vercel/next.js/issues/9482 .

    @jamesmosier pointed out the following:

    Try changing the name of the file completely and test again. There can be case sensitivity issues with git and operating systems, especially if you commit a file as one case (i.e. componentOne.js) and then change it later (to something like ComponentOne.js). If that works, commit that new file name and then you can change it back to the original filename and commit that again.

    This error is very hard to spot, because there is no indication of anything wrong in the IDE, everything appears to be 100% correct, but behind the scenes there are case sensitivity issues.

    So do the following:

    1. Rename the module Withdraw.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

    After that, the issue is resolved and the app deploys.