Encountered an issue during deployment with Vercel: The command "npm run build" terminated with exit code 1 while deploying a Next.js web application

I've been working on a local Next.js app, but encountered an error when deploying it.

Vercel Deployment Error: Command "npm run build" exited with 1

Here is the log from the build process:

[08:26:17.892] Cloning github.com/Bossman556/TechMoneyLlc (Branch: main, Commit: 1fdf14b)
[08:26:17.899] The cli flag --force was set. Skipping build cache download.
[08:26:20.729] Cloning completed: 2.837s
[08:26:21.188] Not using Build Cache
[08:26:21.242] Running "vercel build"
[08:26:21.887] Vercel CLI 28.4.14
[08:26:22.295] Detected `package-lock.json` generated by npm 7+...
[08:26:22.306] Installing dependencies...
[08:26:40.266] npm WARN deprecated <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="93f0fce1f6bef9e0d3a0bda5bda6">[email protected]</a>: core-js@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js.
[08:26:44.660] 
[08:26:44.661] added 518 packages in 22s
[08:26:44.661] 
[08:26:44.661] 95 packages are looking for funding
[08:26:44.661]   run `npm fund` for details
[08:26:44.687] Detected Next.js version: 12.3.1
[08:26:44.694] Running "npm run build"
[08:26:45.093] 
[08:26:45.094] > <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a9dacac8c4e99987988799">[email protected]</a> build
[08:26:45.094] > next build
[08:26:45.094] 
[08:26:45.684] Attention: Next.js now collects completely anonymous telemetry regarding usage.
[08:26:45.685] This information is used to shape Next.js' roadmap and prioritize features.
[08:26:45.685] 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:
[08:26:45.685] https://nextjs.org/telemetry
[08:26:45.685] 
[08:26:45.831] info  - Linting and checking validity of types...
[08:26:46.346] error - ESLint: Failed to load config "next/babel" to extend from. Referenced from: /vercel/path0/.eslintrc.json
[08:26:49.527] info  - Creating an optimized production build...
[08:26:49.891] info  - Disabled SWC as replacement for Babel because of custom Babel configuration ".babelrc" https://nextjs.org/docs/messages/swc-disabled
[08:26:50.658] info  - Using external babel configuration from /vercel/path0/.babelrc
[08:27:08.485] info  - Compiled successfully
[08:27:08.486] info  - Collecting page data...
[08:27:12.880] 
[08:27:12.880] > Build optimization failed: found page without a React Component as default export in 
[08:27:12.880] pages/vidsForCourses/VideoPlayer
[08:27:12.881] 
[08:27:12.881] See https://nextjs.org/docs/messages/page-without-valid-component for more info.
[08:27:12.881] 
[08:27:12.942] Error: Command "npm run build" exited with 1

I attempted solutions such as setting the environment variable CI to false:

CI = false

I also tried:

In the "Build & Development Settings," override the Build command and write CI='' npm run build.

Additionally, I downgraded the node version but unfortunately that didn't resolve the issue.

javascriptnext.jsvercel

Answer №1

After reviewing the logs, it appears that there is a component in your code that is using export instead of export default. To resolve this issue, please relocate the components currently inside the Pages folder to a new Components folder outside the Pages directory.

Specifically, within pages/vidsForCourses/VideoPlayer

ensure that you are using export default as shown below:

const VideoPlayer = () => {
 return <div>Your contents</div>
 }
 //your current code
 //export VideoPlayer;

 //To correct, include "default" when exporting
 export default VideoPlayer;

Answer №2

Encountered a similar error while deploying on vercel. It seems that the issue arises when vercel is using a Node.js Version different from your application's.

To resolve this problem, follow these steps: Navigate to your Vercel dashboard and locate the project displaying the error.

Select the "Settings" tab and scroll down to find the "Node.js Version" setting. Update it to version 16, and you should see everything functioning correctly.

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

Implementing a Searchable Autocomplete Feature within a Popover Component

Having an issue saving the search query state. https://i.stack.imgur.com/HPfhD.png https://i.stack.imgur.com/HbdYo.png The problem arises when the popover is focused, the searchString starts with undefined (shown as the second undefined value in the ima ...

javascriptreactjsautocompletematerial-uireact-props

Sizing labels for responsive bar charts with chart.js

I'm encountering a problem with my bar chart created using chart.js - the responsive feature works well for some elements but not all. Specifically, the labels on my bar chart do not resize along with the window, resulting in a strange look at smaller ...

javascriptjquerychart.js

extract information from a document and store it in an array

As I delve into the realm of programming, I find myself grappling with the best approach to extract data from a file and store it in an array. My ultimate aim is to establish a dictionary for a game that can verify words provided by players. Despite my no ...

javascriptjquery

What occurs when Click events are triggered on an <object> element?

I have set up a div, and inside that container, I embedded an SVG image using object (which I plan to manipulate later...). <div id="click-me"> some random Text <object data="some.svg" /> </div> Next, I added event listeners for t ...

javascripthtmlsvg

Repeating every other item in a list using ng-repeat in AngularJS

Using AngularJS version 1.5.3 In my view, I have a list of items that I want to display. After every two items, I would like to show a new div below the first one. <div class="col text-center" ng-repeat="event in weekDay.events"> &nbsp;& ...

javascriptangularjsangularjs-ng-repeat

"Exploring the versatility of NextJS with dynamic route parameters

Can NextJS be configured to handle dynamic routes that match both /country and /country/city, while excluding matches like /country/city/whatever_content_here? The goal is to display the same content for either of the specified routes, regardless of whethe ...

javascriptreactjsroutesnext.js

Issues with looping in Internet Explorer 8

Hey, I'm having an issue with this JavaScript function: function test(){ var count = 0; var date1 = $('#alternatestartdate').val(); var date2 = $('#alternateenddate').val(); ...

javascriptjquery

Unable to upload gathered email to Mailchimp mailing list through Nodejs and express API

Seeking guidance on integrating data collection with Mailchimp in a Nodejs backend project. I am currently working on an email signup list page where users input their first name, last name, and email. The HTML file contains fields named firstName, lastN ...

javascriptnode.jsexpressmailchimp-api-v3.0

What is the best way to add an image upload feature to the Froala editor within a Nextjs project?

Currently experimenting with setting up a Froala editor on Nextjs. Encountering an issue where the image upload button is unresponsive, while the byurl part of the Insert image function works fine. It seems that clicking on the upload image button does no ...

next.js

Obtaining essential data while facing a redirect situation

I need to extract the og data from a specific URL: https://www.reddit.com/r/DunderMifflin/comments/6x62mz/just_michael_pouring_sugar_into_a_diet_coke/ Currently, I am using open-graph-scraper for this task. However, the issue I'm facing is that it i ...

javascriptnode.jsweb-scrapingfacebook-opengraphreddit

Using Angular's $post method to communicate with PHP CodeIgniter for making requests and handling responses

I am having trouble sending data from Angular to Codeigniter using $post. Here is the JavaScript code I am using: $scope.user.first_name = 'first name'; $scope.user.last_name = 'last name'; $http({ method: 'POST', ...

javascriptphpangularjscodeigniter

Step-by-step guide on sorting WordPress posts by a custom field date

I've created an event sidebar section that will only show the next 3 upcoming events. I have successfully set up the custom post type and custom fields, but I am struggling to figure out how to order the posts based on the start date of the events, wh ...

phpjavascripthtmlcsswordpress

Unable to use npm module "csv-db" as it is currently experiencing functionality issues

Looking to implement a "lightweight offline database" that stores data in .csv files. The module I am using can be found in the documentation: https://www.npmjs.com/package/csv-db Unfortunately, I've been encountering issues with this module and have ...

javascriptnode.jscsvnpm

Is it possible for a mobile web application to continue running even when the screen is

Thinking about creating a mobile web application with the use of jQuery Mobile for tracking truck deliveries. I'm interested in sending GPS coordinates back to the server periodically. Is this possible even when the screen is turned off? If not, any ...

javascripthtmljquery-mobilemobile-website

Tips for accurately measuring the height of a single table cell

I am facing an issue with a table that I have set up. Here is the code: <table> <tr> <td id='tdleftcontent' style='border:1px solid red;'> <asp:Label ID='lbl' runat="server"></asp:Label> < ...

javascriptasp.net

Using JavaScript, aim for a specific element by its anchor headline

I'm looking to make some changes to my navigation menu, specifically hiding the home menu item unless the mobile navigation menu is toggled. Is there a way for me to target the "home" anchor title and apply the active class to it when toggled, similar ...

javascriptjquerycss

Sorting custom strings in Javascript with special characters like dash (-) and underscore (_)

I am attempting to create a custom sorting method with the following order: special character ( - first, _ last) digit alphabets For instance, when sorting the array below var words = ['MBC-PEP-1', 'MBC-PEP01', 'MBC-PEP91&apo ...

javascriptarrayssortingvue.jslodash

Utilizing PHP to fetch data from a separate webpage

This is a question that has sparked my curiosity. I am not facing any particular issue that requires an immediate solution nor do I possess the knowledge on how to achieve it. I have been contemplating whether it is feasible to utilize PHP for fetching co ...

javascriptphphtmlcss

Tips for converting file byte code to file form data

From one folder I am retrieving a file and uploading it to another server. However, when I extract the file from the first folder, I receive a byte code representation of that file. The API for uploading the file to the second folder requires FormData as a ...

javascriptangularangular7

Guide on setting a wait while downloading a PDF file with protractor

As I begin the download of a pdf file, I realize that it will take more than 2 minutes to complete. In order to verify if the file has successfully downloaded or not, I will need to wait for the full 2 minutes before performing any verification checks. C ...

javascriptselenium-webdriverprotractor