Description
This is meant as a follow-up to #3596, as I'm testing out the newest CRA alpha react-scripts 2.0.0-next.66cc7a90
.
The new CRA has solved several of my common reasons for having to use react-app-rewired
, but there are a few pain points that remain.
One of them is adding the top-level src
to the webpack resolve path so all components can import paths relative to the src root as opposed to relative to the file itself. I find this to be cleaner and more descriptive. E.g., this:
import Foo from 'components/Foo'
import Bar from 'store/Bar'
import Util from 'lib/Util'
instead of
import Foo from '../Foo'
import Bar from '../../store/Bar'
import Util from '../../lib/Util'
I generally accomplish this via react-app-rewired:
module.exports = (config, env) => {
config.resolve.modules = [
path.join(__dirname, 'src')
].concat(config.resolve.modules)
return config
}
But I figure this has to be a pretty common practice, and I don't really see any downsides to allowing this in the base CRA webpack config, so I thought I'd suggest it as a very minor change for CRA@next.
I know the current suggestion is to add NODE_PATH=src
to .env
(#3596) with #1333 tracking a more permanent solution, but as of the latest alpha, this functionality is still not working.
To be clear, I generally add this via react-app-rewired because relying on .env
which I've relegated to containing secrets means that the project will no longer "just work" for other devs out of the box.