Webpack alias support (or similar)

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!

[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

[j-lee8]

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!!