Absolute imports do not work

Describe the bug

Absolute imports do not work

Did you try recovering your dependencies?

yes

npm v8.3.0

Which terms did you search for in User Guide?

(Write your answer here if relevant.)

Environment

Environment Info:

current version of create-react-app: 5.0.0 running from /Users/iman/.npm/_npx/c67e74de0542c87c/node_modules/create-react-app

System: OS: macOS 11.6 CPU: (12) x64 Intel® Core™ i7-9750H CPU @ 2.60GHz Binaries: Node: 16.8.0 - ~/.nvm/versions/node/v16.8.0/bin/node Yarn: 1.22.17 - ~/.nvm/versions/node/v16.8.0/bin/yarn npm: 8.3.0 - ~/.nvm/versions/node/v16.8.0/bin/npm Browsers: Chrome: 97.0.4692.71 Edge: Not Found Firefox: 96.0.1 Safari: 14.1.2 npmPackages: react: ^17.0.2 => 17.0.2 react-dom: ^17.0.2 => 17.0.2 react-scripts: 5.0.0 => 5.0.0 npmGlobalPackages: create-react-app: Not Found

Steps to reproduce

1. npx create-react-app my-app
2. cd my-app
3. touch jsconfig.json
4. vim jsconfig.json
5. add these lines:

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

1. mkdir src/utils
2. echo "export const a = 1;" >> src/utils/one.js
3. vim app.js
4. add this at the top of the file: import x from 'utils/one';
5. npm start
6. will fail to compile

Expected behavior

According to this document it should work: https://create-react-app.dev/docs/importing-a-component#absolute-imports

Actual behavior

to compile successfully.

[omkarg01]

I would like to work on this issue.

[jalalbmnf]

Hi everyone ,i have issue like this , when i import index.scss file to App.tsx i see this error

Module not found: Error: Can't resolve '@styles/index.scss' in '/Users/jalalbmnf/Work-projects/jalalbmnfs/src'

this is my tsconfig file

{ “compilerOptions”: { “baseUrl”: “.”, “paths”: { “@components/": ["src/components/”], “@utils/": ["src/utils/”], “@styles/": ["src/assets/styles/”] }, “target”: “es5”, “lib”: [“dom”, “dom.iterable”, “esnext”], “allowJs”: true, “skipLibCheck”: true, “esModuleInterop”: true, “allowSyntheticDefaultImports”: true, “strict”: true, “strictNullChecks”: true, “noImplicitAny”: true, “noImplicitThis”: true, “strictBindCallApply”: true, “strictPropertyInitialization”: true, “strictFunctionTypes”: true, “forceConsistentCasingInFileNames”: true, “noFallthroughCasesInSwitch”: true, “module”: “esnext”, “moduleResolution”: “node”, “resolveJsonModule”: true, “isolatedModules”: true, “noEmit”: true, “jsx”: “react-jsx” }, “include”: [“src/**/*”] }

and i import like this

import "@styles/index.scss";

dependencies

“dependencies”: { “@react-spring/parallax”: “^9.4.5”, “@types/node”: “^16.11.35”, “@types/react”: “^18.0.9”, “@types/react-dom”: “^18.0.4”, “react”: “^18.1.0”, “react-dom”: “^18.1.0”, “react-scripts”: “5.0.1”, “react-spring”: “^9.4.5”, “sass”: “^1.51.0”, “typescript”: “^4.6.4” },