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

Loading local JSON data using Select2 with multiple keys can greatly enhance the functionality

Comparing the select2 examples, it is evident that the "loading remote data" example contains more information in the response json compared to the "loading array data" example. I am interested in knowing if it is feasible to load a local json file with a ...

javascriptjqueryjsonjquery-select2

Getting an unexpected empty response when submitting a request with a combination of image files and json parameters through postman, nodejs, and express

For my university project, I am developing a RESTful API for an online ticket shop that works across multiple platforms. I am using nodejs and express to create this API. First, I created the model for each event: const mongoose = require('mongoose&ap ...

javascriptnode.jsexpresspostman

Display the value in Vue.js as a price format while maintaining it as an integer

I have created a Vue component called "formatted-number" which takes in an integer value (e.g. 1234) and currently displays it as a string (e.g. "12.34") to represent a price in a textfield, with the appropriate "," or "." based on the country. However, I ...

javascriptfocusvue.js

Tips for incorporating Image (next/image) in Link (next/link) within Next.js

I'm currently exploring the capabilities of the Next.js framework for my latest project. Utilizing the Image tag from next/image within the Link tag from next/link has presented me with a specific error message. next-dev.js?3515:24 Warning: Function c ...

reactjsnext.js

The Django application is failing to interact with the AJAX autocomplete functionality

After typing the term "bi" into the search bar, I expected to see a username starting with those initials displayed in a dropdown list. However, nothing is showing up. Here are the codes I have used: search.html <html> <div class="ui-widget"> ...

javascriptjquerypythonajaxdjango

Mastering the Art of Displaying Links in Columns within a Table Using ReactJS

I have the following code that fetches data from the backend and displays it in a table. Everything is working correctly. Now, I need to make the first column in the table appear as a link. How can I achieve that? const EditController = () => { c ...

javascriptreactjsnode.jsexpress

Should React.cloneElement be used to pass new children or copy props.children?

I am having trouble understanding the third parameter "children" of React.cloneElement and how it relates to this.props.children. After reading a helpful guide on higher order components, I implemented the following code: render() { const elementsTre ...

javascriptreactjshigher-order-functions

Setting up Material-UI for React in conjunction with Typescript: A step-by-step guide

I've encountered issues while trying to integrate Material UI into my React project that's written in Typescript. Following the tutorial, I began by adding the react-tab-event-plugin. import injectTapEventPlugin from 'react-tap-event-plugi ...

javascriptreactjstypescriptmaterial-ui

Passing along the mouse event to the containing canvas element that utilizes chart.js

Recently, I created a custom tooltip for my chart.js chart by implementing a div that moves above the chart. While it works well, I noticed that the tooltip is capturing mouse events rather than propagating them to the parent element (the chart) for updati ...

javascripttypescriptvue.jschart.js

Guide to creating a delayed response that does not block in Node and Express

I want to implement a delayed response to the browser after 500ms has elapsed. app.post('/api/login', function(req, res) { setTimeout(function() { res.json({message: "Delayed for half a second"}); }, 500); }); The code snippet a ...

javascriptnode.jsexpress

What is the process for customizing the appearance of a prop within the <TextField> component?

Using my custom DatePicker.js component, I have two instances of <TextField>. When the user clicks on the <CalendarIcon> within the <TextField>, a small calendar pops up. However, I want to style the label in the <TextField> in a sp ...

javascriptreactjsmaterial-ui

Prepending a string to the value using Angular's ngOptions

I've been working on creating a custom directive for Angular that includes a label and select element with necessary classes. This is what my directive code looks like: return { restrict: 'E', scope: { text: &a ...

javascriptangularjs

Error: Undefined Function [Thinkster.io's Angular Tutorial Chapter 4]

Currently working on the Angular Tutorial provided by Thinkster.io and enjoying every bit of it. However, I've hit a roadblock in Chapter 4 that seems impossible to overcome. Whenever I attempt to execute a Post or Delete action, I encounter the follo ...

javascriptangularjsyeoman

Troubleshooting Issue with Search Functionality on MongoDB Integrated with Next JS

I'm currently working on developing a search system for my Next JS API. This API contains data such as fuel prices and fuel station names. Below is the snippet of code that I am using: class ApiFeatures { constructor(query, queryStr) { this.quer ...

javascriptnode.jsmongodbnext.js

react-video-recorder` facing challenges with loading

I recently integrated react-video-recorder into my application. After checking out the demos on Stackblitz and Storybook hosted on Vercel, I was impressed with how well it worked in my browsers. However, when I added it to my codebase, the component would ...

javascriptreactjsweb-mediarecorder

Exploring the world of Next.js API routing

In my work with Next.js 13.4, I am attempting to pass the id of a product using query parameters in this format - http://localhost:3000/api/abc/abc/update/89?id=2 Here is the code snippet I have written: export async function PUT(req,res){ console.log(r ...

restnext.jsbackend

Issues with retrieving sessions from subdomains in NextAuth are causing problems

Currently, I am in the process of developing a platform that offers various applications. The main platform is operational on http://localhost while each application will be hosted on a specific subdomain. This includes an application that is currently run ...

sessioncookiesnext.jssubdomainnext-auth

Angular CORS problem when sending information to Google Forms

When submitting the data: Error Message: Unfortunately, an error occurred while trying to send the data. The XMLHttpRequest cannot load https://docs.google.com/forms/d/xxxxxxxxxxxxx/formResponse. The response to the preflight request did not pass the ac ...

javascriptangularjsajaxcors

Building a versatile and interactive table using AngularJS with data sourced from a

I am currently working on creating a dynamic table using Angular JS to display data received from a Spring Rest Service. Here is the code snippet I have been working with: // JavaScript Document var app = angular.module("SDLC", []); app.config([&apos ...

javascriptjqueryjsonangularjsdynamic

An easy guide on inserting a new row or footer in the rc-table component using React JS

I am looking to insert a new row at the end of an rc-table in order to display the total value of a particular column. const columns = [ { title: "Name", className: "cursor-pointer", dataIndex: "name", key: ...

reactjsnext.js