Create-react-app: Offer a way to import files relative to `src/`

[gaelduplessix]

Not really sure about this, but I find it quite annoying to have imports that look like:

import mock from "../../../testUtils/myMock"

Relative paths are good for resources that will always live next to the calling file but when referring to shared helpers/modules I find them quite counter-productive.

It would be possible to configure webpack so we could import files from src/ just like import 'testUtils/myMock or maybe src/testUtils/myMock by adding src to the resolve root.

Would it make sense ? Maybe relative paths are not that bad and I'm missing something ?

[gaearon]

We already allow this if you explicitly set NODE_PATH environment variable. So, NODE_PATH=./src npm test should work.

We won't diverge from Node resolution mechanism by default because there are very confusing corner cases. Like having a directory with the same name as a dependency. People have been burned hard over this in the past.

You have two other options too. You can publish these helpers as a (private) module. Or you can create src/setupTests.js to perform initialization (if you only need to set up some globals). It will be picked up by default, as documented in the usage guide.

I hope this helps!

[gaelduplessix]

Think it's a bit heavy to publish a module but I get the problem with conflicting names. It wouldn't be an issue if we would only catch names that start with src/ but I agree that diverging from default Node resolution mechanism doesn't feel right.

No clear solution for this then :(

[gaearon]

Is setting NODE_PATH or setting up a global in setupTests.js not working for you?

[gaelduplessix]

It's working for tests but not for re-usable modules/helpers.

The directory structure of a project can become quite deep, let's say a file ./routes/posts/create/FormContainer.js uses ./entities/posts.js, I would prefer write import { ... } from "src/entities/posts" rather than ../../../entities/posts. Not just because it breaks if I move FormContainer.js but also because it's more readable and easier to retrieve imo.

[gaearon]

I don't understand. Setting NODE_PATH will give you precisely that. Have you tried it?

[gaearon]

1. Put NODE_PATH=./src before every script command in package.json
2. Now you can write from 'entities/posts' assuming entities exists inside src.

[gaelduplessix]

Indeed, that works, thanks!

I just didn't like adding NODE_PATH=./src before every command but it's a tradeoff ¯\_(ツ)_/¯

[gaearon]

Yeah. If you have suggestions on how to make this better while preserving the opt-in nature, please file an issue with your proposal. Maybe we could have a top-level directory called packages whose subfolders are implicitly resolved.

[Sodj]

@gaearon on windows NODE_PATH.src/ before script doesn't work
any other solutions?

[bikeshedder]

I quite like the idea how Vue solved it in vue-cli: They configured webpack to replace @/ by the source directory using resolve.alias. I quite like the idea and typing import "@/base/components/FooBar" doesn't look too bad. @ on its own should never be a valid scope and should be pretty future proof.

How about adopting that idea to create-react-app as well?

[codialsoftware]

using .env file also does the trick and it's even better - no need to modify package.json