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

Certain relative paths are not functioning properly on macOS 10.15 Catalina beta version (19A471t)

When working with relative paths, I've noticed some peculiar behavior. Take for example: $ cd /Users $ ls -l ../bin ls: ../bin: No such file or directory $ ls -l /bin -r-xr-xr-x 1 root wheel 623344 31 May 08:33 bash -rwxr-xr-x 1 root wheel ...

How can I add color to arrow icons in tabulator group rows?

Is there a way to specify the color of the arrows in collapsed/expanded group rows? Also, what CSS code should I use to define the font color for column group summaries? You can view an example of what I am trying to customize here: https://jsfiddle.net/s ...

Selenium - Tips for entering text in a dynamically generated text field using Javascript!

I'm fairly new to the world of web scraping and browser automation, so any guidance would be greatly appreciated! Using Python's Selenium package, my objective is: Navigate to Login using the provided username & password Complete my order thr ...

Troubleshooting KuCoin API: Dealing with Invalid KC-API-SIGN Error and FAQs on Creating the Correct Signature

I want to retrieve open orders for my account using the following code snippet: import { KEY, PASSWORD, SECRET } from "./secrets.js"; import CryptoJS from "crypto-js"; const baseUrl = 'https://api.kucoin.com' const endPointOr ...

Unable to replicate the functionality of the tab key using jQuery for the enter key

How can I focus on the first input ('Qtd on the table') after pressing enter on the 'Buscar' input? I've tried various solutions like $(this).nextAll('input').first().focus(); $(this).next('input:text').focus ...

Unable to retrieve data. Issue: Unable to send headers after they have already been sent to the client

Experiencing an error while attempting to retrieve posts from a specific user. The code for fetching the data appears to be correct, so it's unclear where the error is originating from. Error from server side https://i.stack.imgur.com/ep1Xh.png Error ...

What steps are involved in creating a video playlist with YouTube videos?

Is there a way to create a dynamic video playlist that supports embedded YouTube videos without refreshing the page? If a user clicks on another video, I want the video to change dynamically. You can check out this for an example. Do jPlayer, Video.js, Fl ...

Randomly injecting strings like 'jQuery111201xxx' into a string using jQuery Ajax

After implementing a booking system that utilizes FullCalendar, I encountered an unusual issue with the 'notes' field. Occasionally, a strange string is inserted into the notes field at random points. Here's an example of what I found recent ...

Verifying the functionality of a m3u8 URL with Javascript

I have been using the following code to check if an m3u8 URL is broken or not. I tried with two different URLs, one that is live and one that is offline. However, my javascript function does not alert me whether the file exists or not. There are no errors ...

Chrome Extension to Emphasize Every Word

As a novice, I am embarking on the journey of creating my own chrome extension. The idea is to design a popup.html file that showcases a "highlight" button. The functionality would involve clicking this button to highlight all words on the page. Here&apos ...

Bring in d3 along with d3-force-attract

Recently, I have installed D3 along with d3-force-attract. npm install @types/d3 -S npm install -S d3-force-attract I am currently facing an issue with importing d3 force attract as it is not recognized as a typescript module, unlike d3 itself. The inco ...

Leverage the NextRouter functionality without the need for a React component

I've created a custom hook that checks if a user is logged in and redirects them to the login page if not. Below is a simplified version of the hook assuming the user is not logged in: import { useRouter } from 'next/router'; export default ...

Two distinct controllers: concealing elements through the operation of one of them

I am facing a challenge with my HTML elements: In one form-group, I have the following input: <div class="form-group"> <input type="search" ng-model="search"/> </div> This particular form-group needs to be hidden when another form-g ...

Is there a way to dynamically include an attribute using VueJS?

Is there a way in Vue to dynamically add an attribute, not just the value of an attribute using v-bind? I am aware that I can set a value to an attribute dynamically with v-bind, but I would like to add the attribute itself based on a condition. Something ...

What methods does MaterialUI utilize to achieve this?

Have you checked out the autocomplete feature in their component? You can find it here: https://mui.com/material-ui/react-autocomplete/ I noticed that after clicking on a suggestion in the dropdown, the input box retains its focus. How do they achieve thi ...

Tips for Sending Props While Utilizing CSS Modules

I've been working with a button component that utilizes the Tailwindcss framework and css modules for some extra styling. It currently looks like this, incorporating template literal to integrate the red background styling. CSS Module: .red { back ...

Integrate PEM certificate into an Http Request with AngularJS/NodeJS

Currently, I am working on an application that requires retrieving data from a REST endpoint within an encrypted network. Accessing this data is only possible by physically being present (which is currently not an option) or using a PEM certificate provide ...

What is the proper syntax for using .focus() with the nextElementSibling method in typing?

As I strive to programmatically shift focus in my form using nextElementSibling, I encounter a challenge with typing variables/constants due to working with Typescript... I have managed to achieve success without typing by implementing the following: myF ...

Analyzing two arrays and utilizing ng-style to highlight matching entries within the arrays

My list displays words queried from a database, allowing me to click on a word to add it to another list that I can save. This functionality enables me to create multiple word lists. My goal is to visually distinguish the words in my query list that have a ...

Having difficulty integrating plugins like Lighthouse into my Cypress project

I need assistance with integrating the cypress automation plugin into my project. I made changes to my index.js file in the plugin folder, but now I am receiving this error: cy.lighthouse() is not a function Here is my index.js file content: const { light ...