Skip to content

Absolute file paths - #3554

Closed
treyhuffine wants to merge 3 commits into
react:masterfrom
treyhuffine:absolute-file-paths
Closed

treyhuffine wants to merge 3 commits into
react:masterfrom
treyhuffine:absolute-file-paths

Conversation

@treyhuffine

Copy link
Copy Markdown

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

Timer commented Dec 5, 2017

Copy link
Copy Markdown
Contributor

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!

@Timer Timer closed this Dec 5, 2017
@MasonBergstrom

Copy link
Copy Markdown

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

zheeeng commented Sep 13, 2018 •

Copy link
Copy Markdown

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

Copy link
Copy Markdown
Author

@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

Copy link
Copy Markdown

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

rahmen86 commented Nov 1, 2018

Copy link
Copy Markdown

@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

Copy link
Copy Markdown
Author

@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

rahmen86 commented Nov 1, 2018

Copy link
Copy Markdown

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

Copy link
Copy Markdown

@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

cpeele00 commented Dec 14, 2018 •

Copy link
Copy Markdown

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.

@lock lock Bot locked and limited conversation to collaborators Jan 8, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

9 participants