{"id":3005,"date":"2022-07-01T14:18:21","date_gmt":"2022-07-01T18:18:21","guid":{"rendered":"https:\/\/www.alpharithms.com\/?p=3005"},"modified":"2022-07-01T14:18:21","modified_gmt":"2022-07-01T18:18:21","slug":"fix-react-scripts-command-not-found-error","status":"publish","type":"post","link":"https:\/\/www.alpharithms.com\/fix-react-scripts-command-not-found-error-211814\/","title":{"rendered":"Fix: React Scripts Command not Found Error"},"content":{"rendered":"<p>React is a powerful JavaScript framework that allows developers convenient means of managing state in web applications. It features convenient application launching utilities that rely on several packages to deploy their full utility. One such package is the react-scripts package,\u00a0 used by the create-react-app utility.<\/p>\n<p>In some cases, including those where the root cause is unknown, the react-scripts utility is not recognized. In these cases, a <code>react-scripts command not found<\/code> error results. This short article presents several options for resolving this issue, roughly in order of how involved each approach is.<\/p>\n<h2>Quick Intro: React Apps Setup 101<\/h2>\n<p>This isn&#8217;t a tutorial on creating react applications. Nonetheless, some important aspects of such applications are needed to understand how to address the issue. As described in the react <em>Getting Started<\/em> page, a new react application can be created via the following command:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"raw\">npx create-react-app &lt;your-app-name&gt;<\/pre>\n<p>After this command is given, the following output will be displayed prior to a series of readouts indicating progress:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"raw\">Installing packages. This might take a couple of minutes.\r\nInstalling react, react-dom, and react-scripts with cra-template...<\/pre>\n<p>Take note that this process installs the <code>react-scripts<\/code> package from which the <code>react scripts command not found<\/code> error originates. This package provides developers with a number of useful commands including, but not limited to, the following:<\/p>\n<ul>\n<li><strong>start<\/strong>: runds an application in development mode.<\/li>\n<li><strong>test<\/strong>: launches the test runner in interactive mode.<\/li>\n<li><strong>build<\/strong>: builds the application for production use.<\/li>\n<\/ul>\n<p>These are the commands that are likely to be issued and cause the <code>react-scripts command not found<\/code> error.<\/p>\n<p><strong>Note<\/strong>: <code>create-react-app<\/code> requires that Node version &gt;= 14 and the <code>npm<\/code> package manager is installed. <a href=\"https:\/\/docs.npmjs.com\/downloading-and-installing-node-js-and-npm\">See here for instructions<\/a>. If the <code>create-react-app<\/code> package is not installed, a prompt to install via <code>npm<\/code> will be displayed following the <code>npx create-react-app &lt;appname&gt;<\/code> command with a <code>y\/n<\/code> prompt.<\/p>\n<h2>The Problem: Running a React-Scripts Command<\/h2>\n<p>The react-scripts listed above are executed via the following syntax:<\/p>\n<ul>\n<li><code>npm [start|test|build]<\/code><\/li>\n<li><code>npm run [start|test|build]<\/code><\/li>\n<\/ul>\n<p>Both approaches follow the <code>npm<\/code> conventions of executing a named script listed in a node-based project&#8217;s <code>package.json<\/code> file in the <code>scripts<\/code> section. For example, a boilerplate react application (having been created via the <code>npx create-react-app<\/code> command, has the following available scripts listed:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"json\">...\r\n\"scripts\": {\r\n    \"start\": \"react-scripts start\",\r\n    \"build\": \"react-scripts build\",\r\n    \"test\": \"react-scripts test\",\r\n    \"eject\": \"react-scripts eject\"\r\n  },\r\n...<\/pre>\n<p>When the <code>npm run start<\/code> command is issued, it executes the <code>react-scripts start<\/code> command. This command can be made without <code>npm<\/code> via the command <code>.\/node_modules\/.bin\/react-scripts start<\/code>. Alternatively, if the <code>react-scripts<\/code> package were installed globally (bad idea) one could also run it explicitly as <code>react-scripts start<\/code> from within the project.<\/p>\n<p><strong>TL;DR<\/strong> &#8211; <code>npm<\/code> uses the <code>npm start<\/code> command to reference the <code>scripts<\/code> portion of the <code>package.lock<\/code> file and execute the reference script. In cases where that script isn&#8217;t found, or there is no listing in <code>package.lock<\/code> there can be issues.<\/p>\n<h2>Fix 1: Run npm install<\/h2>\n<p>In the case where an app might have been cloned, the <code>node_modules<\/code> directory would not have been copied. As such, one needs to run the <code>npm install<\/code> to ensure all project dependencies are available in the local environment.\u00a0 Alternatively, <code>yarn install<\/code> can be used if the yarn package manager is preferred and available.<\/p>\n<p><strong>Note<\/strong>: Projects that are initialized with yarn <em>may<\/em> become corrupt if later the <code>npm install<\/code> command is issued. <a href=\"https:\/\/github.com\/yarnpkg\/yarn\/issues\/5240\">See here<\/a> (shouldn&#8217;t be an issue with updated versions.)<\/p>\n<h2>Fix 2: Delete <code>package-lock.json<\/code> &amp;Re-install<\/h2>\n<p>The <code>package-lock.json<\/code> file is a<a href=\"https:\/\/docs.npmjs.com\/cli\/v8\/configuring-npm\/package-lock-json\"> reflection of the dependency tree<\/a> used by npm and similar package managers for JavaScript-based applications including react apps. It is updated anytime a modification occurs to the <code>node_modules<\/code> tree or to <code>package.json<\/code>.<\/p>\n<p>In some cases (for reasons often unknown) errors can occur when updating this file. The simplest fix is to delete the file and regenerate it anew by issuing the <code>npm install<\/code> command.<\/p>\n<h2>Fix 3: Delete <code>node_modules<\/code> &amp; Reinstall<\/h2>\n<p>This approach takes a bit longer given one needs to completely delete the <code>node_modules<\/code> directory. After the directory is removed, re-run the <code>npm install<\/code> command to download and install all the project dependencies.<\/p>\n<p><strong>Note<\/strong>: Pay attention here to any warnings or errors that are displayed as they might offer insight into the nature of the problem.<\/p>\n<h2>Fix 4: Install <code>react-scripts<\/code> Again Locally<\/h2>\n<p>The <code>react-scripts<\/code> module is a dependency of all react applications by default, at least those created with the <code>create-react-app<\/code> utility. However, it is possible that the <code>react-scripts<\/code> package was removed from the list of dependencies somehow.<\/p>\n<p>One can check if the <code>react-scripts<\/code> package is installed via the <code>npm list<\/code> command, issued from the root directory of a react project. The following is the output when this command is issued from a boilerplate application created via the <code>npx create-react-app test-app-one<\/code> command:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"raw\">path\/to\/test-app\/test-app-one$ npm list\r\ntest-app-one@0.1.0 path\/to\/test-app\/test-app-one\r\n\u251c\u2500\u2500 @testing-library\/jest-dom@5.16.4\r\n\u251c\u2500\u2500 @testing-library\/react@13.3.0\r\n\u251c\u2500\u2500 @testing-library\/user-event@13.5.0\r\n\u251c\u2500\u2500 react-dom@18.2.0\r\n\u251c\u2500\u2500 react-scripts@5.0.1\r\n\u251c\u2500\u2500 react@18.2.0\r\n\u2514\u2500\u2500 web-vitals@2.1.4<\/pre>\n<p>If the the <code>react-scripts@ver<\/code> entry is missing then this fix should resolve the issue. <strong>Note<\/strong>: It is recommended to NOT install <code>react-scripts<\/code> at the global level &#8212; see <a href=\"https:\/\/github.com\/facebook\/create-react-app\/issues\/2436#issuecomment-306830791\">here<\/a>.<\/p>\n<h2>Fix 5: Remove Spaces &amp; Special Characters from Path Names<\/h2>\n<p>In some cases path names inclusive of spaces or special characters like <code>&amp;<\/code> can cause path resolvers to have issues. If you notice any spaces or special characters other than <code>_<\/code> or <code>-<\/code> in your path names try replacing them.<\/p>\n<h2>Fix 6: Run <code>npm audit<\/code><\/h2>\n<p>The <code>npm audit<\/code> command will scour a project&#8217;s dependencies and where a <code>fix<\/code> instruction is available, apply it. This will alter the dependency tree for a project. The <code>npm audit fix<\/code> command will issue a list of deprecations, warnings, and other issues with the current dependency tree. The <code>npm audit fix --force<\/code> command (adding the force option) will apply changes.<\/p>\n<p><strong>Note<\/strong>: the <code>--force<\/code> option is rarely recommended and can cause breaking changes among project dependencies.<\/p>\n<h2>Final Thoughts<\/h2>\n<p>ReactJS is a powerful state-management framework that has risen to be one of the most popular web frameworks. Pioneered by Facebook, it was developed to provide high-level means to manage complicated state changes in HTML elements in <a href=\"https:\/\/www.alpharithms.com\/boostrap-responsive-page-layout-guide-501916\/\">modern responsive websites<\/a>. The issues described here center around issues with package managers and scripts, but can cause a react application to fail before it even starts!<\/p>\n<p>The fixes listed here provide a wide range of options to address issues where <code>react-scripts<\/code> commands aren&#8217;t executing. These fixes are listed roughly in order of a balance of the time they will take to complete and the risk of complication they pose.\u00a0 Please reach out if one of these fixes doesn&#8217;t address an issue you are facing or if you have a better solution.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>React is a powerful JavaScript framework that allows developers convenient means of managing state in web applications. It features convenient application launching utilities that rely on several packages to deploy their full utility. One such package is the react-scripts package,\u00a0 used by the create-react-app utility. In some cases, including those where the root cause is [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":3008,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[10],"tags":[378,479,684,623],"acf":[],"_links":{"self":[{"href":"https:\/\/www.alpharithms.com\/wp-json\/wp\/v2\/posts\/3005"}],"collection":[{"href":"https:\/\/www.alpharithms.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.alpharithms.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.alpharithms.com\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.alpharithms.com\/wp-json\/wp\/v2\/comments?post=3005"}],"version-history":[{"count":1,"href":"https:\/\/www.alpharithms.com\/wp-json\/wp\/v2\/posts\/3005\/revisions"}],"predecessor-version":[{"id":3006,"href":"https:\/\/www.alpharithms.com\/wp-json\/wp\/v2\/posts\/3005\/revisions\/3006"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.alpharithms.com\/wp-json\/wp\/v2\/media\/3008"}],"wp:attachment":[{"href":"https:\/\/www.alpharithms.com\/wp-json\/wp\/v2\/media?parent=3005"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.alpharithms.com\/wp-json\/wp\/v2\/categories?post=3005"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.alpharithms.com\/wp-json\/wp\/v2\/tags?post=3005"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}