Create-react-app: Webpack alias support (or similar)

[ricokahler]

Is this a bug report?

No

I'll be using SBAR for this issue. Hopefully that helps put things into context.

Situation

My team has a few separate npm packages that we import into our applications made with create-react-app. These packages are shared between other applications that also use either create-react-app or the react-native-cli.

Recently, it has become increasingly challenging to use linked packages in create-react-app that are not yet published to npm.

Background

Historically, when we've wanted to dev or test these packages inside a CRA application, we would simply npm link it into that CRA application.

We can no longer do this (with ease) because of two things in React:

1. hooks
2. context

React isn't the culprit here but the features above do cause some challenging issues when it comes to singletons.

Assessment

With hooks, React requires the same instance of React to be available in both the linked package and the CRA application.

When you npm link a package into a CRA application, what happens is the npm linked package will resolve to a different instance of React than the instance inside the CRA application causing an error. @JennieJi 's post in https://github.com/facebook/react/issues/13991 explains this perfectly.

With context, the convention is to create the context as a singleton and export it somewhere inside the package being developed. This causes issues because it's possible that the context instance inside the CRA application is different from the context instance from the package causing components or hooks that use the context to not find it.

Recommendations

First off, I would recommend not ignoring/closing this issue 😅 😆.

Even if you consider linking package within CRA as advanced usage, I believe it's not out of the scope of CRA's mission. There are a lot of users having issues linking react packages and it would be amazing if CRA had a solution for this problem (even if it's not the solution below).

I think a good and simple solution would be to allow the users of CRA to have access to the resolve.alias configuration of webpack (or a similar, restricted variant). (relevant post)

Package authors can alias their packages to the exact place on their machine and then CRA could handle compiling the the package and all the appropriate dependencies would resolve nicely.

Let me know if this is a feasible feature to add. I'd also be willing to work on a PR upon your blessing. 🙏 😆

Thank you for your time!

[Loveleen1991]

I faced similar kind of issue but fixed by doing following steps:

1. rm -rf node_modules/
2. rm -rf package-lock.json / yarn.lock.json // Remove lock files
3. remove react and react-dom package from your package.json
4. then run npm install

It worked for me.
Thanks

[dwjohnston]

I'm resolving this issue by using react-app-rewired and customize-cra.

Agree that it would be nice for CRA to support this.

Here is my config-overrides.js :

const {
    override,
    addWebpackAlias,
  } = require("customize-cra");

const path = require('path'); 

module.exports = override( 
    addWebpackAlias({
        react: path.resolve('./node_modules/react')
    })
)

Example project: https://github.com/dwjohnston/material-ui-hooks-issue/tree/master

[NathanAB]

Yes please. Even for the use case of just aliasing the local src/ directory or similar, this would be super useful. I know that we are capable of setting NODE_PATH as an alternative to an alias, but this can cause hard-to-debug conflicts with dependencies in your node_modules, which just happened to me.

[stale[bot]]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[ricokahler]

Hello stale bot. I do in fact care still

[dwjohnston]

Active bump.

On Sun, 28 Jul. 2019, 8:48 am stale[bot], [e-mail] wrote:

This issue has been automatically marked as stale because it has not had
any recent activity. It will be closed in 5 days if no further activity
occurs.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/facebook/create-react-app/issues/6953?email_source=notifications&email_token=AAS2MMMRQCJTIA7AB5AKTRTQBSYDTA5CNFSM4HJLEI4KYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD26SMIA#issuecomment-515712544,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAS2MMIWVXVF2YDA2ILKRCTQBSYDTANCNFSM4HJLEI4A
.

[stale[bot]]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[ricokahler]

I do care, i do i do!!

[ricokahler]

For the record, even though this issue recommends adding webpack alias support, I don’t think that has to be the only solution.

Mainly, I just wanted to have this issue to acknowledge the pain of working with linked packages within create-react-app and discuss some sort of solution.

[stale[bot]]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[ricokahler]

The quick brown fox jumps over the lazy dog. Loren ipsum dolor

[javierguzman]

I also think this would be very helpful to have. The only reason I am thinking about eject is just for having aliases...

[alvcarmona]

I also care about this one. At least it would be nice to have an explanation about why this is not being considered.

[malithrw]

I wonder why there is not even a single word from the maintainers?

[JavaJamie]

Any update on this? We've just gone through a restructuring exercise and would really like to use aliases to target components, utils etc without using relative paths!!

[stale[bot]]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[ricokahler]

Four score and seven years ago our fathers brought forth on this continent, a new nation, conceived in Liberty, and dedicated to the proposition that all men are ...

[wyqydsyq]

To provide some context, there were similar issues/PRs opened in the past but they were dismissed by CRA maintainers without sufficient reason

https://github.com/facebook/create-react-app/issues/2188
https://github.com/facebook/create-react-app/pull/3554

Maintainers seem to have asserted that setting the NODE_PATH is sufficient when it arguably is not for most of these use-cases. The PR I linked actually implements a solution but was rejected because:

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!

It seems they simply don't care for supporting this (obviously quite common) use-case, if you want aliases then either don't use CRA, or eject and then add aliases to the ejected webpack config. Otherwise it's bad luck for you according to CRA maintainers.

I think it would be unlikely this issue will get any traction, expect it to be promptly closed with a comment to use NODE_PATH if a maintainer actually notices it.

[javierguzman]

Thanks @wyqydsyq for giving some info about this. Indeed, I ended up with a new project from ground and the code copied, I did not even bother in ejecting!