React alias for development with npm-link

[michalwerner]

Let's say we have app called My-app managed by create-react-app and some library My-lib, being dependency of My-app. Both uses React.
Now, using npm-link gives us multiple copies of React in dependency tree, which ultimately (at least for me) ends with this error:

Uncaught Invariant Violation: addComponentAsRefTo(...): Only a ReactOwner can have refs. You might be adding a ref to a component that was not created inside a component's render method, or you have multiple copies of React loaded (details: https://fb.me/react-refs-must-have-owner).

The only solution I've found (http://stackoverflow.com/a/31170775/2395401) was to define alias in webpack configuration like this:

resolve: {
  alias: {
    ...
    'react': path.resolve('./node_modules/react')
  }
}

Of course this means ejecting project.
Isn't it good idea to place this alias in default config?

[gaearon]

Well.. We could probably do this although I’m not convinced it’s a great solution (what about all the other possible dependencies?)

There is another solution that is more future proof in my opinion: http://stackoverflow.com/a/38818358/458193

[michalwerner]

This also seems to fix the problem, but... correct me if I'm wrong: npm link (without argument, on "source package", in this case React) creates link /usr/local/lib/node_modules/react. This means that this solution won't work if more than one linking would be needed.

[gaearon]

Not sure I understand. I’m not calling npm link without arguments.

[michalwerner]

Sorry, my bad I've missed that you're linking in just one step.

cd my-react-component
npm link my-app/node_modules/react

output:

/usr/local/lib/node_modules/react -> .../my-app/node_modules/react
.../my-component/node_modules/react -> /usr/local/lib/node_modules/react -> .../my-app/node_modules/react

but it's equivalent to

cd my-app/node_modules/react
npm link

output:

/usr/local/lib/node_modules/react -> .../my-app/node_modules/react

cd my-component
npm link react

output:

.../my-component/node_modules/react -> /usr/local/lib/node_modules/react -> .../my-app/node_modules/react

Anyway, it creates global link at /usr/local/lib/node_modules/react, so only one copy of React could use this method. Or am I missing something?

[gaearon]

I feel like we’re going to enter a forest of subtle issues if we do this. It’s weird to treat React specially in this regard. So I’m inclined to close unless more people ask for this.

[FredericHeem]

I've been bitten by this bug too, it is quite a common use case to use create-react-app to create an example for a react based lib.

[michalwerner]

I ended abandoning npm linkand using gulp to copy files that changed in lib source to node_modules of app using that lib. Perhaps not the cleanest solution, but it works.

[jperl]

I ran into this using a create-react-app within a lerna project -- since it symlinks the packages.

It seems I will have to eject to add 'react': path.resolve('./node_modules/react').

[gaearon]

Please describe your use cases in #1107. Let's consolidate npm link discussion and use cases there. That issue is more generic and not just about react which makes sense to me because npm link issues aren't unique to the react package per se.