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)


Related Query

More Query from same tag