Struggling with deploying Next.js on Vercel

Encountered an issue while trying to deploy a project on Vercel. The error message is as follows:
fileName: comps/Navbar.js
imported as 

import Navbar from "./Navbar";

16:36:51    ModuleNotFoundError: Module not found: Error: Can't resolve '../comps/navbar' in '/vercel/workpath0/pages'
16:36:51    > Build error occurred
16:36:51    Error: > Build failed because of webpack errors
16:36:51        at /vercel/workpath0/node_modules/next/dist/build/index.js:15:918
16:36:51        at processTicksAndRejections (internal/process/task_queues.js:93:5)
16:36:51        at async /vercel/workpath0/node_modules/next/dist/build/tracer.js:1:525
16:36:51    npm ERR! code ELIFECYCLE
16:36:51    npm ERR! errno 1
16:36:51    npm ERR! [email protected] build: `next build`
16:36:51    npm ERR! Exit status 1
16:36:51    npm ERR! 
16:36:51    npm ERR! Failed at the [email protected]) build script.
16:36:51    npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
16:36:51    npm ERR! A complete log of this run can be found in:
16:36:51    npm ERR!     /vercel/.npm/_logs/2021-03-02T11_06_51_966Z-debug.log
16:36:51    Error: Command "npm run build" exited with 1
16:36:56    Done with "package.json"

This code was sourced from Net Ninja's Next.js playlist.

javascriptnpmdeploymentnext.jsvercel

Answer №1

It appears that the error is likely caused by a difference in casing: navbar compared to Navbar. Ensuring consistent casing should resolve the issue.

If changing the casing does not solve the problem (which can happen occasionally), another solution is to clear caching in git and re-commit the changes. This step is likely to fix the issue. The necessary git commands can be found here, and are also shared below:

git rm -r --cached .
git add --all .
git commit -am "Fix casing discrepancies."
git push origin branch_name

In rare cases where the above approach does not work, implementing Absolute Imports and Module path aliases may help to resolve the issue. For detailed instructions on this solution, I recommend consulting the Next.js documentation.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Server Error 502 Encountered with Nextjs Image Component

next/image seems to be causing a 502 gateway error on the server. After checking with the devtool network, it appears that it is trying to fetch images from a third party (themoviedb) API. These images are not loading correctly, although they work fine on ...

next.jshttp-status-code-502next-images

Can Express POST / GET handlers accommodate the use of jQuery?

I created a simple Express server to retrieve data from an HTML form and make queries to OpenWeatherMap using that data: const { OpenWeatherAPI } = require("openweather-api-node"); const express = require("express"); const bodyParser = ...

javascriptjquerynode.jsexpressopenweathermap

Attempting to create a redirection landing page

I have a process where I create a new user and save it in my database with the following code snippet: const newUser = new User({ username: userId, password: pass, nameOfUser: user_name, emailOfUser: user_email ); newUser.save(); res.redir ...

javascriptnode.jsdatabasemongodbexpress

Is there a way to redirect using Express JS when the destination is

Hello there, I'm encountering an issue with redirecting in express js. I have a function that should trigger when a submit button is pressed and then redirect to a different page. However, when using res.redirect('/results.ejs');, I receive ...

javascriptnode.jsexpressejs

Getting the Correct Nested Type in TypeScript Conditional Types for Iterables

In my quest to create a type called GoodNestedIterableType, I aim to transform something from Iterable<Iterable<A>> to just A. To illustrate, let's consider the following code snippet: const arr = [ [1, 2, 3], [4, 5, 6], ] type GoodN ...

javascripttypescripttypesconditional-types

Utilize CSS styling on dynamically loaded HTML content

I am working on a project similar to the StackOverflow editor. I am fetching markdown text, converting it to HTML, and then displaying it in a preview area. However, when I try to style the injected HTML elements using CSS, the styles are being ignored. Up ...

javascripthtmlcssvue.jsdom

Determine the 'source' attribute value of the image (img) with a dynamically changing Id

Below is the code snippet: <img id="simple_captcha-ad089ff4819" src="/simple_captcha?code=a35401d"> The id of the above img tag changes constantly with each new action. For example, the next id could be "simple_captcha-sfw454sdfs". Therefore, I n ...

javascriptjquery

Executing a controller method in Grails using JavaScript

When working in a Grails view, I find myself needing to execute a JavaScript method to retrieve certain information. To achieve this, I have set up a submit action as shown below: <input type="submit" name="submit" class="submit action-button" value="G ...

javascriptgrails

Tips for updating checked checkboxes in a php mysql database

When submitting an HTML form with a selected checkbox, update the values of the selected checkboxes in a MySQL database. For example: update enquires set status = '2' where id in (selected checkbox values) View the screenshot of the checkbox Vi ...

javascriptphpmysql

What steps should I take to address a problem involving a callback function?

I'm currently working on an application that aims to connect users with friends based on specific questions they answer. However, I keep encountering an error message stating "TypeError [ERR_INVALID_CALLBACK]: Callback must be a function" when the cod ...

javascriptjsonapiecmascript-6

Retrieve the text input from the text field and display it as

Is there a way to display what users enter in a textfield when their accounts are not "Activated"? Here's an example: if(active == NULL);{ //I've attempted the following methods. //In this scenario, 'username' is the name of ...

javascriptphphtml

Invoking controller from a view using a JavaScript function in CakePHP 1.3

I am working with a map in Javascript and I need to select a rectangular zone on my Google Map without clicking anywhere. Once I have the two corner coordinates, I want to send them to my CakePHP Controller. Can anyone help me figure out how to do this? H ...

javascriptphpajaxcakephpcakephp-1.3

Json data integrated dropdown menu

I have successfully retrieved data from a Json array and displayed it in a dropdown list. However, I am facing an issue where I want to only show the name of the city instead of both the name and description. If I remove cities[i]['description'], ...

javascripthtmljson

Learn the process of dynamically loading scripts and their functions in Angular

At first, I had the following code statically placed in Index.html and it was functional. <script src="/le.min.js"></script> <script> LE.init({ token: 'token', region: 'x' }); </script> ...

javascriptangular

Nested function unable to assign values to variables

I am currently working on a function in Discord.js that collects users who reacted to a message. I have managed to gather all the user IDs inside a nested function, but when trying to return the array to the caller, it does not seem to work as expected. He ...

javascriptnode.jsfunctionscopenested

Developing a custom styling class using JavaScript

Looking to create a custom style class within JavaScript tags. The class would look something like this: #file-ok { background-image: url(<?php echo json.get('filename'); ?>); } Essentially, the value returned from the PHP file (json ...

javascriptjquerycssajax

Uncovering unseen tags generated by JavaScript on a webpage using Python

I have THIS LINK page that contains javascript. To view the javascript, simply click on show details. How can I extract data from this URL source? Should I use re? Here is what I attempted with re: import urllib import re gdoc = urllib.urlopen('Tha ...

javascriptpythonhtmlseleniumxpath

Having trouble generating dynamic getStaticPaths with Apollo Client API in Next.js?

I need to create a list of slugs for my posts to be exported in a SSG format with next.js, using the Apollo graphql client. Here is the code I have so far: import { gql } from "@apollo/client"; import client from "../../graphql/apollo-client ...

graphqlnext.jsapollo-clientssg

Is it possible to configure PostCSS Preset Env within the package.json file?

I am interested in incorporating PostCSS Preset Env into my project. According to the documentation, a configuration file needs to be created by following specific steps. Is it feasible to embed the configuration within my package.json instead of creating ...

node.jsnpmwebpackconfigurationpostcss

Conquering Challenges Across Multiple Disciplines

Is there a solution to solving the cross domain issues that arise when trying to fetch data from a different web server on the client-side, in violation of the Same Origin policy? ...

phpjavascriptjqueryajax