Issue encountered while executing the build command using npm run in a ReactJS project

Encountering an error when running "craco build"

The command being executed is:

npm run dist

When I try to run npm run build from the same folder, I face the same error.

Here are the commands in the package.json file:

"scripts": {
    "start": "npm run storybook:start",
    "dev": "craco start",
    "build": "craco build",
    "dist": "npm run build && del-cli build/*.* build/fonts",
    "test": "craco test",
    "lint": "eslint . --ext .js,.jsx --ignore-path .gitignore",
    "eject": "react-scripts eject",
-----------------

Error Output

craco build

'craco' is not recognized as an internal or external command,
operable program or batch file.
npm ERR! code ELIFECYCLE
npm ERR! errno 1

After checking the craco version with npm info craco version, it shows 0.0.3. My current node version is v8.0.0 and npm version is 5.0.0

I am using node v8.0.0 due to some project-specific requirements.

Answer №1

try running this script

yarn add @craco/craco

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

The compatibility issues, absence, or failure to assign property entities in NestJS Prisma

Trying to update the Postgres database with Prisma ORM in NestJS (Microservices architecture) includes allowing users to interact with invitation requests. However, encountering the error message: Argument of type 'Invitation' is not assignable t ...

Is there a way to redirect the results of the 'find' command into a pipeline that will trigger the execution of 'more' followed by 'grep' on the package.json file located two directories above?

I'm on a quest to identify the troublesome package.json file that is triggering a dependency warning. The warning originates from a sub-module, and I have employed a find command find . -name 'foo' to reveal its location. /a/very/very/very/ ...

Can I incorporate a new React project into an existing React project or webpage?

I have a question about deploying my React project. After using npm run build, I now have a build folder with all the necessary files. My project is more complex than the simple "like button" example on React.org. It includes multiple sub-components, fetc ...

Can a PropType be used for a string that can be converted to a

Looking for a prop type that can accept number strings? When passing the prop directly to a DOM element, it doesn't matter if it's prop={1} or prop="1", but how can I create a PropType that matches it without using a custom callback? I ...

Using REST APIs in React programming

While working on an existing code base for a React application, I found myself in a situation where the original developer had left and I am still quite new to React. In the current code base, the library "request-promise-native" is being passed from one c ...

Interactive Tab Navigation using React Swipe

As a new user of React, I am exploring ways to implement swipeable tabs for mobile browsers (similar to Instagram's profile tabs). After some research, I came across react-swipeable-views and Material UI, which I tried using. While it seems to be fu ...

The 'ref' attribute is not found within the 'IntrinsicAttributes' type

I'm currently working on a TypeScript project using React. Although the code is functional, I keep encountering compiler errors with my ref. Here's an example of the code: Firstly, there's a higher-order component that handles errors: expor ...

When using async functions in iterative processes

In my current setup, I am utilizing a for-each loop to handle a list and specifically require element n to be processed only after element n-1 has completed: let elements = ["item1", "item2", "item3"]; elements.forEach(function(element){ someAsyncFun ...

npm is indicating a connection issue with a different registry, displaying the error message: "npm ERR! network getaddr

In my current project, I am attempting to compile a Gradle project within a Docker container using Jenkins. After logging into a private repository to retrieve the image for the build step and initiating the build process, I encountered an npm error messag ...

How can I transfer data to a node in Node-RED using a specified setup and then access the setup again at a later point?

Currently, I am utilizing Node-RED on Bluemix and would like to enable users to upload a document. Below is the relevant code snippet within a function/template of a flow: <form action="/upload" method="POST"> <h1>Upload PDF</h1> &l ...

Best Practices for Handling Form State in ReactJS with Redux

Currently in ReactJS + Redux, I am utilizing Material-UI's TextField for a form where users input their firstName, lastName, birthMonth, birthDay, and birthYear. The existing setup works but appears redundant, especially when handling the birth date f ...

Error encountered: Unsolicited rejection with message "invalid configuration key requested during Cypress update process via NPM"

I am attempting to upgrade Cypress to the latest version using the command provided below: npm install --save-dev <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0b68727b796e78784b382539253b">[email protected]</a> ...

Waiting for a function to finish within a nested function in JavaScript

I'm facing a simple issue that I'm struggling to solve. I have two functions and an object in JavaScript (Node.js) structured like this: var auxmap = new Map(); function one() { for(var i...) { //initialize the map and do something tw ...

The Material-UI ThemeProvider applies styles globally, affecting all components instead of just the ones it wraps

In my React application, I have implemented a Component that contains multiple Material-UI Selects. In order to customize the styles of one specific Select, I created a theme and attempted to apply it using the ThemeProvider component. However, I encounter ...

Tips for adding an asterisk to the label of a Material-UI switch component

I am trying to include an asterisk symbol in the label by passing a required prop with a property, but it doesn't seem to be functioning correctly. <FormControlLabel control={ <Switch onChange={event => ...

Error: npm command is not recognized in the cPanel Terminal

When I attempt to write the following command: $ /usr/local/bin/node -v 14.17.3 I receive an error when using this command: $ node -v bash: node: command not found I tried the same approach with different commands, but it was unsuccessful: $ /usr/local/b ...

What is the process for invoking an API from one API to another using Node.js?

app.put('/sounds',(req,res)=>{ var animal = req.body.animal; //I need to trigger the following api call using 'animal' variable //app.get('/:animalname',(req,res)=>{res.render('animal.ejs')}) ...

Implementing a white color scheme for TextField forms using Material UI

Hi there! I'm a beginner in using Material UI with React and have two questions that I hope someone can help me with: I've been trying to figure out how to set the color of the TextFields (the input fields) to white. Currently, the placeholder ...

Updating the latest version of Typescript from NPM is proving to be a challenge

Today, my goal was to update Typescript to a newer version on this machine as the current one installed is 1.0.3.0 (checked using the command tsc --v). After entering npm install -g typescript@latest, I received the following output: %APPDATA%\npm&b ...

Performing search operations in elasticsearch using both the bool must match and match_all clauses in a

This is my first time using elasticsearch and I'm attempting to retrieve all documents that have a specific parameter matched, while also using the match _all field simultaneously. Here is an overview of my schema: { "mappings":{ "product":{ "_ ...