ReactJS 'NODE_PATH' is not recognized as an internal or external command,

Question

My friend wrote an sample react app and deployed to bitbucket. I cloned it. My local system works fine with reactjs,nodejs but when I say

npm install -> npm start

Normally it work but this time it gives this error.

my package.json

{
  "name": "sample",
  "version": "1.0.0",
  "private": true,
  "dependencies": {
    "@types/react": "16.4.16",
    "assets": "^3.0.1",
    "bootstrap": "^4.4.1",
    "chart.js": "^2.7.2",
    "classnames": "2.2.6",
    "history": "4.7.2",
    "node-sass": "^4.13.1",
    "perfect-scrollbar": "1.4.0",
    "prop-types": "^15.6.2",
    "react": "16.5.2",
    "react-chartjs-2": "^2.7.4",
    "react-dom": "16.5.2",
    "react-google-maps": "9.4.5",
    "react-notification-alert": "0.0.8",
    "react-router-dom": "4.3.1",
    "react-scripts": "^3.4.0",
    "reactstrap": "^7.1.0"
  },
  "scripts": {
    "start": "NODE_PATH=./src react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    "install:clean": "rm -rf node_modules/ && rm -rf package-lock.json && npm install && npm start",
    "compile-scss": "node-sass src/assets/scss/black-dashboard-react.scss src/assets/css/black-dashboard-react.css"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ]
}

  

Answer 1

Im running node v17.5.0 using npm 8.4.1.

NB!! All the files below are located in the root of my project

This is my .env.

NODE_PATH="./src"
HTTPS=true

This is my tsconfig.base.json.

{
  "compilerOptions": {
    "importHelpers": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "baseUrl": "./src"
  }
}

This is my tsconfig.json

{
  "include": ["src/*/**/*"],
  "exclude": ["node_modules", "**/*.spec.ts"],
  "extends": "./tsconfig.base.json",
  "compileOnSave": true,
  "compilerOptions": {
    "target": "es5",
    "lib": ["es6", "dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "removeComments": true,
    "noImplicitAny": true,
    "noImplicitThis": true,
    "strictNullChecks": true
  }
}

This is my package.json

{
  "name": "ts-crud-ui",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@material/button": "^13.0.0",
    "@testing-library/jest-dom": "^5.16.2",
    "@testing-library/react": "^12.1.3",
    "@testing-library/user-event": "^13.5.0",
    "@types/jest": "^27.4.1",
    "@types/node": "^16.11.26",
    "@types/react": "^17.0.39",
    "@types/react-dom": "^17.0.11",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-router-dom": "^6.2.2",
    "react-scripts": "5.0.0",
    "typescript": "^4.6.2",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "prettier": "^2.5.1"
  }
}

With this setup im able to call my styles, fonts, components, basically any custom code that resides inside ./src. Here is an example:

say I need to import custom styles. I can do this import "assets/styles/form.css"; inside my component or say I needed a component inside another component. I can do this: import { Header, Layout, Page } from "components";. Below is a full working implementation that im using for my base projects.

Located in src/App.tsx

import "assets/styles/app.css";
import React from "react";
import { Routes, Route } from "react-router-dom";
import { Header, Layout, Page } from "components";

function App() {
  return (
    <Layout>
      <Header title="dynamic title" />
      <Routes>
        <Route path="/" element={<Page.Login />} />
        <Route path="/register" element={<Page.Register />} />
        <Route path="/dashboard" element={<Page.Dashboard />} />
      </Routes>
    </Layout>
  );
}

export default App;

One thing I also found that worked, (tested on images only), I created a images directory inside my public directory and put the images folder in there. When I want to use the image, I can simply do the following <img src="/images/logo.svg" className="App-logo" alt="logo" />

Below a working implementation:

import React from "react";

type Props = {
  title?: string;
};

function Header(props: Props) {
  return (
    <header className="App-header">
      <img src="/images/logo.svg" className="App-logo" alt="logo" />
      <p>{props.title}</p>
      <a
        className="App-link"
        href="https://reactjs.org"
        target="_blank"
        rel="noopener noreferrer">
        Learn React
      </a>
    </header>
  );
}

export default Header;

Happy Coding =)

Answer 2

"start": "NODE_PATH=./src react-scripts start",

This code is written on mac/linux machine, and NODE_PATH=./... is a right command in mac/linux, but not in cmd. If you're on windows, try using git bash instead of cmd, or change it to:

"start": "react-scripts start",

and use an cross enviroment variable package like crossEnv to set NODE_PATH=./src, like :

"start": "cross-env NODE_PATH=./src react-scripts start"

(don't forget to install cross-env with npm i cross-env)

Answer 3

Just remove NODE_PATH=./src. This will solve your problem.