Absolute file paths

[treyhuffine]

There is now the ability to declare alias in the package.json so that absolute file paths can be constructed. I've added the src folder by default to expose the pattrn.

[Timer]

Sorry but we won't be accepting this in its current form. The official solution currently is to use NODE_PATH=src, if you'd like to accomplish this another way, you must eject; sorry!

Please search for previous issues and pull requests for context.

Thanks for your contribution!

[MasonBergstrom]

Can you provide context? All I'm finding is people complaining about this not being a feature, getting the NODE_PATH=src answer, then people explaining why that's NOT good enough and then the issue being closed. It's coming off more as ignoring the complaints than actually giving a good answer as to why.

[zheeeng]

Webpack resolving alias provides us the ability to alias directory to '@src' / '~src' with special symbols that we easily distinguish some package comes from the project root path or relative path.

[treyhuffine]

@Timer is there any ability to reconsider this? It seems like there is quite a bit of demand to not pin everything to src

[dagerikhl]

This would be a great addition. And not just for aliasing /src, but any other, deeper nested, folders as well, which may be of interest, and for which setting NODE_PATH isn't an answer. Aliases are very useful for writing clean code, and I hope this can get included.

[rahmen86]

@Timer
I'm trying to npm link a component with styled-components in it. As I understand it the only way is to eject and add an alias. So adding a feature like this would be really helpful. I'm not sure if you want developers to eject or if you don't see why people struggle with this. My understanding is that ejecting should be avoided but maybe I'm wrong?

This is the situation I'm in where the conclusion is that it is "...appropriate to say that npm-linking will not work with create-react-app/react-scripts and styled-components unless you "eject" create-react-app and add that configuration".
styled-components/styled-components#1770

What I want to know is if ejecting is the only solution today and there won't be a solution within CRA to avoid ejecting in the future.

[treyhuffine]

@rahmen86 does this tutorial help? It uses CRA with styled components and redux https://gitconnected.com/courses/learn-react-redux-tutorial-build-a-hacker-news-clone

[rahmen86]

I did some additional testing and I realized that I can actually run npm link and run the webpack in production mode (webpack --mode production --watch). So whenever I update my npm package locally it will rebuild and update the package and the main application will notice the change and update. If I run webkit in development mode (webpack --mode development --watch) I get this error:

Uncaught ReferenceError: require is not defined

So my problem is actually solved. And it seems like the comment in styled-components/styled-components#1770 is at least partly wrong:

So would it be appropriate to say that npm-linking will not work with create-react-app/react-scripts and styled-components unless you "eject" create-react-app and add that configuration?

Otherwise, outside of npm-linking, styled-components should work fine with create-react-app?

I'm running CRA with npm link on a styled-components package. But as I mentioned - in production mode only.

I'm not sure I'm writing in the correct thread - but if someone else follows the same path I hope that this post helps.

[gabemeola]

@Timer is there any ability to reconsider this? It seems like there is quite a bit of demand to not pin everything to src

@treyhuffine
You could add multiple entries to NODE_PATH.

Unix
NODE_PATH="src:server"
Windows
NODE_PATH="src;server"

[cpeele00]

I just looked over @treyhuffine 's PR's for this. What an awesome contribution this is would be! I am completely baffled as to why this approach was rejected in favor of assigning to NODE_PATH. :-(

For those who are interested, Next.js allows you to add custom aliases and you also get Server-side rendering for free. Create-react-app is awesome, but there are other alternatives if you need this functionality. We use CRA and opted to eject so we could tailor it to our needs, this is the approach I'd recommend.