Absolute imports do not work
See original GitHub issueDescribe 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
npx create-react-app my-app
cd my-app
touch jsconfig.json
vim jsconfig.json
- add these lines:
{
"compilerOptions": {
"baseUrl": "src"
},
"include": ["src"]
}
mkdir src/utils
echo "export const a = 1;" >> src/utils/one.js
vim app.js
- add this at the top of the file:
import x from 'utils/one';
npm start
- 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.
Issue Analytics
- State:
- Created 2 years ago
- Comments:7
I would like to work on this issue.
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” },