6

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?

Debasish
  • 417
  • 1
  • 10
  • 21
  • 1
    It works locally using `next dev`, but does it work when you build locally with `next build` and then run a production build with `next start`? That's what Vercel would be doing. – leerob Apr 04 '21 at 22:52
  • @leerob I tried it locally using the `npm run build` and `npm run start` command and it works fine. Not sure why it fails on vercel. – Debasish Apr 05 '21 at 07:49
  • It could be an issue with your file loader. Any reason you didn't place the mp3 files in the public directory? You wouldn't need to use that webpack override then. For better support, you can also contact Vercel support with a link to your readme. – leerob Apr 06 '21 at 12:20

6 Answers6

10

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.

Ailton Bueno
  • 361
  • 3
  • 5
1

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.

fatihyildizhan
  • 8,614
  • 7
  • 64
  • 88
Darlon Henrique
  • 11
  • 1
0

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.

BldrsCove
  • 1
0

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

Дмитрий Федотов
  • 1
  • 1
  • Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jul 11 '22 at 12:03
0

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

JORGE RODRIGUEZ
  • 1
0

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;
  },
};
Trae Zeeofor
  • 26
  • 4