Imports not picking absolute path other than immediate sub folder to baseUrl path (src)

[krajasekhar]

To have imports from absolute path, I am configuring baseUrl and paths in jsconfig.json and facing below issues.
My app folder structure:

> src
  > assets
  > app
     > components
     > views

When I configure jsconfig.json like this
1.

{
  "compilerOptions": {
    "baseUrl": ".",
    "module": "commonjs",
    "paths": {
      "src/*": ["src/*"],
      "assets/*": ["src/assets/*"],
      "components/*": ["src/app/components/*"],
      "views/*": ["src/app/views/*"]
    }
  },
  "include": ["src"]
}

it is failing at import {someThing} from 'assets/someFile' with error Module not found: Can't resolve 'assets/someFile'. No error for components/views folders imports.
2.

{
  "compilerOptions": {
    "baseUrl": "src",
    "module": "commonjs",
    "paths": {
      "components/*": ["src/app/components/*"],
      "views/*": ["src/app/views/*"]
    }
  },
  "include": ["src"]
}

it is failing at import {someThing} from 'views/someFile' with error Module not found: Can't resolve 'views/someFile'. No error for assets folders imports.
but vs code is navigating to the source file when I do 'Ctrl + click' on the path with any of above config.

[DarnerDiaz]

Absolute Path Imports in Create React App

You can absolutely use absolute imports from src! No eject needed. Here's how:

Method 1: jsconfig.json (Easiest - JavaScript)

Create jsconfig.json in your project root (same level as package.json):

{
  "compilerOptions": {
    "baseUrl": "src"
  },
  "include": ["src"]
}

Now import from src directly:

// Before (relative)
import Button from "../../../../../components/Button";

// After (absolute)
import Button from "components/Button";
import { useAuth } from "hooks/useAuth";
import { API_URL } from "constants/config";

Method 2: tsconfig.json (TypeScript)

For TypeScript projects, add to tsconfig.json:

{
  "compilerOptions": {
    "baseUrl": "src",
    "paths": {
      "@components/*": ["components/*"],
      "@hooks/*": ["hooks/*"],
      "@utils/*": ["utils/*"],
      "@/*": ["./*"]
    }
  }
}

Usage:

import Button from "@components/Button";
import { useAuth } from "@hooks/useAuth";
import { API_URL } from "@constants/config";

Why Nested Folders Fail (Your Issue)

// ❌ Won't work - only baseUrl, not sub-folders
import something from "components/Button/nested";

// ✅ Must use full path from src
import something from "components/Button/nested/file";

The baseUrl is set to src, so:

• src/components/Button.jsx → import from "components/Button"
• src/utils/helpers.js → import from "utils/helpers"
• src/pages/Dashboard/index.js → import from "pages/Dashboard"

Recommended Structure

Organize like this for best results:

src/
  components/
    Button.jsx
    Modal.jsx
  hooks/
    useAuth.js
  utils/
    helpers.js
  pages/
    Dashboard.jsx
  App.jsx

Then import anywhere:

// In any file, at any depth
import Button from "components/Button";
import { useAuth } from "hooks/useAuth";

IDE Support

VS Code + Pylance automatically recognize jsconfig.json/tsconfig.json, so:

• ✅ Autocomplete works
• ✅ Click to definition works
• ✅ Linting catches bad imports

Common Gotchas

1. Path must match directory structure - baseUrl: "src" means imports start from src/
2. No node_modules aliasing - Use NPM modules normally
3. Restart dev server - After changing config, run npm start again

Current Directory Issue

// ❌ This fails
import X from "pages/Dashboard/AnotherFile";

// ✅ This works - explicit full path
import X from "pages/Dashboard/AnotherFile";

// ✅ Or use relative for same directory
import X from "./AnotherFile";

That's it! Add jsconfig.json or update tsconfig.json, then use absolute imports from src/ everywhere.

See: https://create-react-app.dev/docs/importing-a-component/