The ReactJS website is encountering issues when attempting to build in AzureDevOps, despite functioning properly

My reactJS App functions properly when run locally, but there are build failures when the same code is built using a pipeline on AzureDevOps.

Could someone please explain why this might be happening?

Here are the npm run build task logs from the build instance:

Starting: npm run build
==============================================================================
Task         : npm
Description  : Install and publish npm packages, or run an npm command. Supports npmjs.com and 
authenticated registries like Azure Artifacts.
Version      : 1.169.2
Author       : Microsoft Corporation

...

##[error]Error: Npm failed with return code: 1
Finishing: npm run build
reactjsnpmazure-devops

Answer №1

Error encountered in production-app.js: No "exports" main resolved in /home/vsts/work/1/s/client/node_modules/@babel/helper-compilation-targets/package.json

The problem appears to stem from a regression in either the current version of Node.js or babel. Here are some suggested steps to resolve this issue:

  • Update @babel dependencies to version 7.8.7
  • Use Node versions below v12.16
  • Delete the node_modules directory and package-lock.json file, then run npm install to reinstall all packages

For further information, you can refer to this discussion thread.

We hope these suggestions prove helpful.

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

Is there a way to trigger a function from a specific div element and showcase the JSON data it retrieves in

I am working with a React JS code page that looks like this: import React, { useState } from "react"; import { Auth, API } from "aws-amplify"; function dailyFiles(props) { const [apiError502, setApiError502] = useState(false); // Extracted into a re ...

javascriptjsonreactjs

Implementing multiple dropdown menus with Material UI in a navigation bar

I am currently working on designing a navigation bar that consists of multiple material UI dropdown menus. However, I have encountered an issue that has proven to be quite challenging for me to resolve. Whenever I click on a navigation bar item, all the dr ...

javascriptreactjsmaterial-ui

React state isn't changing as expected

I'm currently working on a React project where I need to display a modal when a certain element is clicked. I've implemented this using react-modal, and while the modal does show up successfully, I'm facing issues with closing it. Below is t ...

reactjsmodal-dialogstate

The functionality of res.cookie is failing to properly store the cookie in the browser

I'm currently working on a full stack project and encountering difficulties setting cookies in my browser. The backend is built with node.js and express framework, running on localhost:3002. The frontend is using react.js, running on localhost:3000. ...

node.jsreactjsexpress

Encountering a "Page Not Found" error when trying to refresh a Next.js

Whenever I attempt to reload a routed page in my compact Next.js application, I encounter this error. ...

reactjsnext.jshttp-status-code-404refresh

Is it secure to store the access token within the NextAuth session?

Utilizing a custom API built with Node.js and Express.js, I have implemented nextAuth to authenticate users in my Next.js application. Upon a successful login, the date is stored in the nextAuth session and can be accessed using the useSession hook. To acc ...

javascriptreactjsnext.jsjwt

What is preventing WebRTC from re-establishing connection after being disconnected?

In my current React web application project, I am implementing a feature where users can engage in group calls using WebRTC through a NodeJS server running Socket.IO. The setup allows for seamless joining and leaving of the call, similar to platforms like ...

javascriptnode.jsreactjswebrtc

Unable to retrieve JSON element in ReactJS

Here is the code snippet that I am currently working with: const [questions, setQuestions] = useState([]) useEffect(() => { let idVar = localStorage.getItem('idVarianta'); idVar = JSON.parse(idVar) axios({ ...

javascriptnode.jsjsonreactjs

Nexus OSS version 3 now mandates npm login for npm installation

We have recently implemented Nexus OSS 3 as a standalone NPM server and are pleased with its performance. However, there is one aspect that I find confusing - the necessity of running npm login before being able to perform npm install for self-published pa ...

npmnexusnpm-install

react-select seems to have a glitch where only the first option is rendering, but it is not visible. Additionally, when I try to select an option, the entire array seems to be disappearing

My backend is providing me with an array of flavors. This is how I am using it in my jsx: <div className="mb-3"> <Select options={flavorOptions} onChange={onSelectOption} value={flavor} /> </div> I have formatted the ...

reactjsreact-select

Is it necessary to have both index.js and Component.js files for a single component in React?

Continuously analyzing various projects, I often come across authors who organize their file structures in ways that are perplexing to me without proper explanation. Take, for instance, a component where there is a folder named Header. Inside this folder, ...

javascriptreactjs

How to pass the rendered object from one ReactJS component to another as an attribute?

Struggling with a React 16.2.0 issue here and hoping for some guidance. I'm new to React, so could use a sanity check. I'm working on a log viewer app that fetches log entries from a backend database. My goal is to create a Paging component that ...

reactjs

Having issues with importing images in Next.js using the Next Images package

Having trouble with importing images locally from the images folder. Error message: "Module not found: Can't resolve '../images/banner1.jpg'" https://i.stack.imgur.com/Dv90J.png Attempting to access images in ImagesSlider.js file at compo ...

javascriptreactjsimagenext.js

Tips for effectively wrapping Material UI v5 component to ensure the Grow component functions correctly

Being a newcomer to React, I want to apologize in advance for any silly mistakes or inaccuracies that may be present. I have successfully implemented the code for my Blog page: export default function Blog() { const [photos, setPhotos] = useState([]); ...

javascriptreactjsmaterial-uijsx

endless refreshing material ui accordion

Facing an issue with infinite rerender while trying to create a controlled accordion component using Material UI accordion. Here is the code snippet, any insights on why this could be causing an infinite rerender? const [expanded, setExpanded] = React.us ...

javascriptreactjsmaterial-ui

The cache key failed to load due to a pull access denied error in Powershell

While executing the docker file, an issue occurred with this line: RUN apt-get update && apt-get install -y wget && apt-get install -y gnupg2 && wget -qO- | bash - && apt-get install -y build-essential nodejs Error encount ...

dockernpm

"Incorporating React with Redux using object-oriented programming principles

Coming from Angular, I was accustomed to having a separate class for each entity in my database, where all the entity's behavior was encapsulated. For example, a Users Class could look like this: export class User{ static notValid(u){ return ! ...

angularjsoopreactjsreduxdata-modeling

Is it possible to call a function directly from useEffect?

Code VersionA: useEffect(() => doRequest(), []); Code VersionB: useEffect(() => { doRequest(); }, []); I used to believe that both versions were the same, with VersionA being a shortcut and VersionB allowing for multiple commands within the inlin ...

javascriptreactjsreact-hooksnext.js

The hexagons configuration for tsParticles is experiencing technical difficulties

I'm struggling to implement the tsParticles library (specifically using react-tsparticles) in combination with the latest version of Next.js. However, when I try to use the particle.json file and bind it to the <Particles/> component, the partic ...

javascriptreactjsnext.jsparticlesparticles.js

What steps should I take to fix the Axios Network Error that keeps occurring while fetching data from my Express backend API?

I've been attempting to integrate my react native app with a database using the following code snippet: const axiosInstance=axios.create({ baseURL: config.API_URL }) try{ const res = await axiosInstance.get("/all") console.log( ...

node.jsreactjsreact-nativeexpressaxios