Create-react-app: Add `resolve` configuration in Webpack to avoid using relative paths in `import`

[BrodaNoel]

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?

[gaearon]

Maybe you have a global system-wide NODE_PATH set and so .env is ignored. I'm not really sure how we should handle this. Ignoring existing keys almost always makes sense but not sure about this case.

[codeaid]

I do indeed:

$ echo $NODE_PATH
/usr/lib/nodejs:/usr/lib/node_modules:/usr/share/javascript

How about doing something like export NODE_PATH="${NODE_PATH}:/path/to/src"?

[gaearon]

It would be nice if this kind of substitution "just worked" in env files. Not sure if dotenv supports (or wants to support) this.

[azhi09]

i found i have a global node path too.what should i do? @codeaid

[gaearon]

I'd recommend disabling it on your computer. You're going to run into more issues otherwise.

[azhi09]

@i am new in node ,pls tell me how to disbling the global node path.thx @gaearon

[gaearon]

It’s an environment variable. You need to figure out what’s setting it, and remove that. Unfortunately I don’t know how to debug this. You might want to ask on some Node discussion board.

[azhi09]

i finally remove it by using unset NODE_PATH thx @gaearon