Easily add absolute imports in create react app

absolute-imports-in-create-react-app.md

Easy absolute imports in VSC + Create React Apps

create-react-apps supports absolute imports via .env

.env

    NODE_PATH=src

this will make webpack look for absolute imports (imports without .. or /) in the src directory of our project, meaning we can do something like this

    ...
    import Marcello from 'components/Marcello'
    ...

Still, Visual Studio Code doesn't play well with it. Intellisense will not be able to resolve our absolute imports, meaning we can't benefit of autocomplete or clicking on imports to open the file.

This is easily solved with a VSC specific configuration file in our project root: jsconfig.json

{
	"compilerOptions": {
		"module": "CommonJS",
		"baseUrl": "./src"
	}
}

This will tell VSC to resolve CommonJS imports by looking in the ./src directory instead of only in node_modules.

This is great! Thank you!