ModuleNotFoundError: Module not found: Error: Can't resolve '../config' in '/vercel/path0/components'

user_8306133 0
Viewed 6583

I have stumbled upon when deploying my next.js app through vercel. It works completely well in local using command 'npm run dev'. But when I tried to deploy it through vercel with Github remote repository, it throws error like below:

    16:13:16.712    Attention: Next.js now collects completely anonymous telemetry regarding usage.
    16:13:16.712    This information is used to shape Next.js' roadmap and prioritize features.
    16:13:16.712    You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:
    16:13:16.712    https://nextjs.org/telemetry
    16:13:20.255    Failed to compile.
    16:13:20.256    ModuleNotFoundError: Module not found: Error: Can't resolve '../config' in '/vercel/path0/components'
    16:13:20.257    > Build error occurred
    16:13:20.257    Error: > Build failed because of webpack errors
    16:13:20.257        at /vercel/path0/node_modules/next/dist/build/index.js:15:918
    16:13:20.257        at runMicrotasks (<anonymous>)
    16:13:20.258        at processTicksAndRejections (internal/process/task_queues.js:93:5)
    16:13:20.258        at async /vercel/path0/node_modules/next/dist/build/tracer.js:3:470
    16:13:20.269    npm ERR! code ELIFECYCLE
    16:13:20.269    npm ERR! errno 1
    16:13:20.272    npm ERR! myportfolio@0.1.0 build: `next build`
    16:13:20.272    npm ERR! Exit status 1
    16:13:20.272    npm ERR! 
    16:13:20.272    npm ERR! Failed at the myportfolio@0.1.0 build script.
    16:13:20.272    npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
    16:13:20.280    npm ERR! A complete log of this run can be found in:
    16:13:20.280    npm ERR!     /vercel/.npm/_logs/2021-04-04T15_13_20_272Z-debug.log

Here is my package.json

{
  "name": "myportfolio",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "3d-react-carousal": "^3.1.0",
    "airtable": "^0.10.1",
    "framer-motion": "^4.0.0",
    "next": "10.0.7",
    "react": "17.0.1",
    "react-dom": "17.0.1",
    "react-gtm-module": "^2.0.11",
    "react-intersection-observer": "^8.31.0",
    "react-lottie": "^1.2.3",
    "react-scroll": "^1.8.1",
    "react-toast-notifications": "^2.4.3"
  },
  "devDependencies": {
    "file-loader": "^6.2.0"
  }
}

Here is my next.config.js

module.exports 
  ={
    webpack(config, options) {
        config.module.rules.push({
            test: /\.(mp3)$/,
            use: {
              loader: 'file-loader',
              options: {
                publicPath: '/_next/static/sounds/',
                outputPath: 'static/sounds/',
                name: '[name].[ext]',
                esModule: false,
              },
            },
          });
      return config;
    }
  }

Any ideas why it throws a compile error when deploying on Vercel?

vercel next.js reactjs
3 Answers

the vercel use the Linux that is case sensitive and read "/Components" as different of "/components".

If you changed the file or folder name to lowercase or uppercase, your remote branch may not be updated with the new name.

In this case you can be use the command git mv oldNameFileOrFolder newNameFileOrFolder and commit + push. Or save file or folder in another place, remove it from project and commit. After commit, past it again in project, commit and push.

user_144588690

Might be the Vercel cache. Using vercel --force helped me override the build cache for deployment. There's a similar post here and Vercel's doc's mention caching based on the framework preset.

user_122118990

In my case import was @components/footer/ which changed to @components/Footer/ worked like a charm on Vercel

user_165841360
Related