When I try to run Parcel, my ReactJS website just won't deploy in a serverless environment

For a while now, I've been working on a website using serverless. Everything was going smoothly until this morning when I encountered an issue with pushing updates from my site to the serverless platform. When trying to push, I received the following error:

Error: Failed building website via "npm run build" due to the following error: 
"npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: `parcel build index.html`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/maxime/.npm/_logs/2019-12-04T15_03_19_978Z-debug.log"

The error from the logs is:

0 info it worked if it ends with ok
1 verbose cli [ '/usr/local/bin/node', '/usr/local/bin/npm', 'run', 'build' ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'prebuild', 'build', 'postbuild' ]
5 info lifecycle [email protected]~prebuild: [email protected]
6 info lifecycle [email protected]~build: [email protected]
7 verbose lifecycle [email protected]~build: unsafe-perm in lifecycle true
8 verbose lifecycle [email protected]~build: PATH: ...
...

I am completely lost with this error. They're saying my build is failing, even though it was working fine yesterday and I haven't made any changes to the serverless part. Has anyone faced a similar problem and could lend me a hand in understanding?

PS: Even using old content, I cannot utilize serverless.

Thank you and apologies for the seemingly silly question;

PS : My package.json


{
  "name": "website",
  "version": "0.1.0",
  "description": "",
  "scripts": {
    "start": "parcel index.html",
    "build": "parcel build index.html"
  },
  "license": "MIT",
  "dependencies": {
    "@material-ui/core": "^4.6.0",
    "axios": "^0.19.0",
    ...
  },
  "devDependencies": {
    "@babel/core": "^7.7.2",
    "babel-preset-nano-react-app": "^0.1.0",
    ...
  },
  "babel": {
    "presets": [
      "nano-react-app"
    ],
    "plugins": [
      ...
    ]
  }
}

Answer №1

Thanks to @Andrewlohr, I was able to identify and resolve the error.

Npm pinpointed the exact line where the issue occurred during the command parcel build index.html

To delve deeper into why parcel build index.html failed, I ran the command directly in the console without npm.

  ~/D/website copie> parcel build index.html
🚨  /Users/maxime/Documents/website copie/src/app.css:71:3: Unknown word
  69 | 
  70 | Input#ca {
> 71 |   style="border:1px solid #ff0000"
     |   ^
  72 | }
  73 | 

It was revealed that the error stemmed from a particular word within my .css file. Simply put, npm will only indicate the location of the issue whereas running the command yourself provides more detailed insight.

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

"Retrieve a list of all routes that have been registered in Node.js

I am trying to retrieve a list of all registered routes in my project. Here is the code I have used for this purpose: const app = require("express"); let routers = app._router.stack .filter((r) => r.route) .map((r) => { return { ...

Google Maps displays grayscale overlays on the latest version update

Hello, I am facing a challenging issue with the Google Maps API. I have come across some similar threads discussing this problem, but unfortunately, they did not provide a solution that suits my specific case. Currently, I am working on an angular.js 1. ...

Issues encountered while optimizing JSON file in a ReactJS program

I'm struggling with utilizing Array.prototype.map() in Javascript Specifically, I'm reformatting a JSON file within my react app, which looks like: { "id": 1, "title": "Manage data in Docker", "description": "How to use v ...

"Enhance your React application with react-router-dom by including parameters in the index URL while also

Here is the code I am currently using: <Router history={history}> <div> <Route exact path="/:id?" component={Container1} /> <Route path="/component2/ component={Container2} /> </div> </Router> When accessin ...

Removing JSON data with JavaScript

Currently, I am working on developing a custom discord bot for a server that I share with some friends. The bot includes a warn system and level system, and I have successfully implemented JavaScript to write data to an external JSON file. { "othe ...

Tips for positioning an advertisement at the center of a full-screen HTML5 game

I am struggling to find a way to perfectly center my advertisement in a fullscreen HTML5 game. The game automatically expands to fullscreen when played, and I want the advertisement to always be positioned in the center, regardless of whether the game is b ...

Guide to utilizing the importcss plugin in TinyMCE Version 4.0.10: Troubleshooting content_css loading issue and resolving style dropdown display problem

We are currently using the latest version of TinyMCE, specifically v 4.0.10 Our goal is to load content_css and have a dropdown of styles available in the styleselect menu. According to TinyMCE 4.x documentation, we attempted to achieve this by incorpora ...

Issue with Vue.js: document.querySelector is returning a null value even though the element clearly exists

I'm currently working on implementing a responsive navbar following Kevin Powell's tutorial, but I've run into an issue. For some reason, when I try to select the element with the class 'primary-navigation' using 'const primar ...

The exceljs npm package is experiencing unexpected issues in Node.js all of a sudden

I successfully implemented xlsx download code in my Node.js application using the exceljs npm package. Everything was working perfectly when my Node.js version was 13.x. However, after upgrading to Node.js version 16.13.2, I encountered an issue where the ...

Require assistance in accurately assigning a date to a Date[] in Typescript Array without altering current elements

In my current code, I have a loop that verifies if a date is a holiday and then adds it to an array. The issue I'm facing is that whenever I assign a new element to the array, all previous data in the list gets updated to the latest element. Here&apos ...

Building on the functionality of AngularJS, a directive scope can be established to access and modify

Can a directive accept and utilize a parameter as its scope value? For instance: angular .module('app', []) .controller('CTRL', function($scope) { $scope.some_value = { instance1: { key1: 'value11', ...

Is it possible to retrieve a physical address using PHP or Javascript?

Is it possible to retrieve the physical address (Mac Address) using php or javascript? I need to be able to distinguish each system on my website as either being on the same network or different. Thank you ...

What is the best approach for overlaying random meshes onto a terrain using a heightmap in three.js?

I'm interested in plotting randomly generated meshes at the y-position that corresponds to the terrain's height in three.js. While browsing through the documentation, I came across the raycaster method, which seems like it could be useful. Howeve ...

Troubleshooting Vue and Laravel API CRUD: Issue with updating data

I am currently working on building a simple CRUD application using Laravel 9 and Vue js 3. However, I have encountered an issue where the method does not seem to be functioning correctly. The update method from the Laravel API works perfectly fine (I test ...

What is the best way to manage the package-lock.json file during deployment from git using SSH?

In my deployment process, I utilize a Git repository to check code in. By using web hooks, a deployment script is triggered on the production server. Once connected to Git via SSH and a .pem key on the server, I perform a Git pull, npm install, webpack bui ...

Using the clientWidth property in React

While I have a solid background in Javascript, I am relatively new to working with React. In my previous projects where I coded directly in javascript for the browser, I frequently used the following code snippet: width = document.getElementById('elem ...

The NW JS window loaded event fails to trigger when loading a URL, but functions properly when loading from a local

Having trouble triggering the loaded event on a live webpage compared to a local page. The loaded event fails to fire with this code: var mywin = nw.Window.open('http://www.google.com', {"frame": false}, function(testWin) { testWin.on(&apos ...

Vue JS ensures that it has all the necessary data before proceeding with the

I've been grappling with a VueJS data rendering issue for a few weeks now. My approach involves making axios calls, some nested within others. The problem I'm facing is that the data renders before the calls have completed, resulting in an empty ...

Using jQuery to extract the value of an object from an <li> element and updating the class attribute of the <li> element

There is a div element: <div id="ddDistr" class="searchBoxSortDistrict" tabindex="1"> <ul id="ddd"> </ul> </div> I have inserted HTML from json into it: $("#ddd").html(" "), $.each(dis, function( index, value) { $("#dd ...

Is there a way for me to determine which specific dependency is triggering a warning due to utilizing another dependency?

After analyzing my browser console, I found the following warnings: index.js:126 [WDS] Warnings while compiling. warnings @ index.js:126 (anonymous) @ socket.js:47 sock.onmessage @ SockJSClient.js:67 EventTarget.dispatchEvent @ sockjs.js:170 ...