CODEWITHSUNDEEP
reactjsnext.jsvercel
Debasish
Debasish

Reputation: 457

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

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! [email protected] 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 [email protected] 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?

Upvotes: 6

Views: 10083

Answers (6)

Trae Zeeofor
Trae Zeeofor

Reputation: 56

I also had a similar "Module not found: Can't resolve '@/lib/getAllUsers'" in my Next.js App. Worked completely well in local using command 'npm run dev', but when i ran the command "npm run build" it threw up the error.

I eventually found out that the error indicated that Next.js was unable to resolve the import alias @/lib/getAllUsers. By default, Next.js uses the @ symbol as an alias for the root directory of projects.

The solution was to manually set up the import alias: I set up the import alias @ to point to the root directory of my project. To do this, I modified my Next.js configuration (next.config file).

In my project's root directory, i located the next.config.js file. Inside the next.config.js file, I changed the code to the following and issue was solved:

module.exports = {
  webpack: (config) => {
    config.resolve.alias['@'] = __dirname;
    return config;
  },
};

Upvotes: 0

Darlon Henrique
Darlon Henrique

Reputation: 21

In my case, I consult the Nextjs docs and found this: https://vercel.com/guides/how-do-i-resolve-a-module-not-found-error

You need to run this command: git config core.ignorecase false to push your case changes to GitHub.

It is important to remain that Vercel takes the code from GitHub and not directly from your machine, so, the changes are really import in GitHub.

Upvotes: 1

JORGE RODRIGUEZ
JORGE RODRIGUEZ

Reputation: 1

I changed the name of my images from image.JPG to image.jpg it worked for the deploy eventhough the error was telling me about my components

Upvotes: 0

Дмитрий Федотов
Дмитрий Федотов

Reputation: 1

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

Upvotes: 0

BldrsCove
BldrsCove

Reputation: 1

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.

Upvotes: 0

Ailton Bueno
Ailton Bueno

Reputation: 411

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.

Upvotes: 10

Related Questions