Add `resolve` configuration in Webpack to avoid using relative paths in `import`

Hi guys. I was wondering why don’t you added some config like this in Webpack, to start doing import foo from 'components/foo'; instead of import foo from '../../components/foo';

Is there any issue about it? Thank for your patience.

[gaearon]

It’s been suggested quite a few times before (please search for “absolute imports” in issues). We won’t be supporting it on Webpack level because it is incompatible with Node resolution mechanism.

But if you’d like, you can work around it by adding

NODE_PATH=src

to your .env file in project root.

Then this will work. Alternatively you can symlink node_modules/components to src/components and it will work too.

Hope this helps!

[codeaid]

Adding the path to .env file doesn’t seem to work.

I generated a new project using create-react-app test, edited index.js to import App from 'App'; instead of import App from './App'; and all I’m getting is

Failed to compile.

./src/index.js
Module not found: Can't resolve 'App' in '/var/www/test/src'

The only way I could get it working was by changing the start script to be "start": "NODE_PATH=src react-scripts start".

Is there a reason why my .env file is not being picked up?