score:0
just remove node_path=./src
. this will solve your problem.
score:0
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 =)
score:3
"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
)
Source: stackoverflow.com
Related Query
- 'react-scripts' is not recognized as an internal or external command
- React Native Error - yarn' is not recognized as an internal or external command
- 'create-react-app' is not recognized as an internal or external command
- json-server is not recognized as an internal or external command
- 'bash' is not recognized as an internal or external command
- react-scripts' is not recognized as an internal or external command
- React-js project Deployment failed. "serve" is not recognized as an internal or external command
- React Cannot Start Project - 'craco' is not recognized as an internal or external command
- 'sh' is not recognized as an internal or external command
- HOST is not recognized as an internal or external command
- yarn eg:'live-server' is not recognized as an internal or external command
- 'BUILD_PATH' is not recognized as an internal or external command
- create-react-app is working only with cmd but not with bash. With bash : 'npx' not recognized as an internal or external command
- ReactJS 'NODE_PATH' is not recognized as an internal or external command,
- 'next' is not recognized as an internal or external command, operable program or batch file on Reactjs
- 'PORT' is not recognized as an internal or external command
- react is not recognized as an internal or external command or operable program or batch file
- 'react-scripts' is not recognized as an internal or external command, operable program or batch file
- Jest Error: 'jest' is not recognized as an internal or external command, operable program or batch file
- .mongo' is not recognized as an internal or external command, operable program or batch file
- How to fix "'BROWSER' is not recognized as an internal or external command"?
- 'yarn' is not recognized as an internal or external command, operable program or batch file
- cd android && ./gradlew assembleRelease '.' is not recognized as an internal or external command, operable program or batch file
- Npm start gives me : 'react-scripts' is not recognized as an internal or external command, operable program or batch file.'
- when I hit yarn run dev . it shows 'next' is not recognized as an internal or external command, operable program or batch file
- 'prisma' is not recognized as an internal or external command, operable program or batch file
- 'NODE_PATH' is not recognized as an internal or external command, operable program or batch file
- why do I get this error: 'postcss' is not recognized as an internal or external command, operable program or batch file, when I use tailwindcss
- '\"node build\bundle.js\"' is not recognized as an internal or external command, operable program or batch file
- create-next-app' is not recognized as an internal or external command, operable program or batch file
More Query from same tag
- How to merge similar custom hooks into one custom hooks
- Error occured while creating a react app and unable to start the react app
- How to fix the binding of React Component from Parent to Children
- Google sign button dissapears when i refresh - React
- Unable to resolve path to module '@aws-amplify/ui-react/styles.css'
- KonvaJS, Possible to have a draggable group of images?
- How to resolve "Cannot find module" Error when testing react components with mocha
- How to write an abstract class for a component (with extendable state & props)?
- Display Directions with React Google Maps
- Isomorphic JS - httpRequest client side only
- React renderDOM in multiple spots on same page?
- ReactTable - react component with REST API Call
- React-router component does not update on <Link> navigation
- Dynamic variable name using this in ReactJS
- Does Amplify SDK support PKCE out of the box for your React site?
- React Router with deeper paths
- Update Rendered Component Prop Value Async
- React - map props to state for react-images
- JSX template literals for an inline style
- How to redirect to parent route if page doesn't exist?
- Redirect to login page using react-router v4
- The correct way to update props with Mapbox
- stripe.confirmCardPayment intent secret Returns Empty String
- Enforce that every object in an array of objects has the same shape
- How To delete object Array in objects state react
- How can I test react component that fetches the data from firestore?
- React Router doesn't match path
- How to fit a flex container inside a grid container
- How to test react component with mock api calls
- react router - passing props using route deletes all the other props values