Create-react-app: Resolve symlinks using Node resolution mechanism

[gaearon]

Copying my comment from #1107 since that issue is pretty crowded and I want it to be here instead.

---

Having read some discussions in https://github.com/nodejs/node/pull/6537 and https://github.com/isaacs/node6-module-system-change I think we're actually already being inconsistent in how we handle symlinks.

Let's forget about the issue about compiling source code for a second. I feel like that can be solved by https://github.com/facebookincubator/create-react-app/issues/1333 and thus is not the most important one here.

The important part here is that the resolution should match Node algorithm so that our webpack setup matches our test setup. I thought that was the case, but I was wrong.

Consider this structure:

my-comp
  index.js // already compiled
  package.json // react is a peer dependency

my-app
  node_modules
    my-comp // symlink to my-comp folder

It turns out that if my-comp doesn't declare a dependency on react, it can find React in the browser builds but not in tests.

We introduced this regression in https://github.com/facebookincubator/create-react-app/pull/1359.

We probably missed it because if my-comp does explicitly depend on React (e.g. as a devDependency), the test passes (and in the browser we just get two Reacts).

[gaearon]

I think the correct fix would be to:

• Have the webpack build respect Node resolution and fail in this case
• Add an opt-in to Node "preserve symlinks" behavior which seems to be what people using npm link really want

[gaearon]

Even more interesting. Apparently Jest itself doesn't quite use Node module resolution.

In fact I was the one who changed Jest from --preserve-symlinks behavior to normal behavior 😅 https://github.com/facebook/jest/pull/4761

It seems like maybe we should support both? I believe webpack has a flag for it. Maybe Jest could have a flag too.

[gaearon]

While this is fresh in my mind, I immortalized this dilemma in a tweet.
https://mobile.twitter.com/dan_abramov/status/955061849648779264

Hope this is helpful to whoever ends up reading this to consider fixes (me?)

[gaearon]

Filed an issue in Jest.
https://github.com/facebook/jest/issues/5356

[gaearon]

@bradfordlemley Do you have thoughts on this? You probably spent more thinking about symlinks than most of us :-)

[gaearon]

After more digging, the reason "jest already worked correctly" in https://github.com/facebookincubator/create-react-app/pull/1359 per https://github.com/facebookincubator/create-react-app/pull/1359#issuecomment-279191236 was because Jest was not respecting Node resolution. Since I fixed Jest in https://github.com/facebook/jest/pull/4761, that integration has regressed. But again, it was broken in the first place because it didn't match how Node resolves modules.

[1st]

Is it somehow related to #3547?

[1st]

I found a workaround that I use in my projects. You can run a watch process to compile your shared library and use it as symlink in your project. Here is my gist.

[conartist6]

Any progress on this? I'm game to help if there's work to be done.

[omerdn1]

Any progress or a workaround for this that doesn't require running a watcher compiler?

[ianqueue]

Any progress on this?

[pietmichal]

Is there a scenario where someone would prefer having dependencies read from linked node_modules instead from CRA-based project's node_modules? Modifying webpack.config.js to have { resolve: { symlinks: false } } fixes the "two react" problem.

If there is no scenario, then maybe CRA should have the value, from above, hardcoded?

[tannerlinsley]

I just encountered this and after many many attempts to get around it, I ended up installing rescripts and doing this:

// .rescriptsrc.js

const path = require('path')
const resolveFrom = require('resolve-from')

module.exports = [
  config => {
    config.resolve = {
      ...config.resolve,
      alias: {
        ...config.resolve.alias,
        react$: resolveFrom(path.resolve('node_modules'), 'react'),
        'react-dom$': resolveFrom(path.resolve('node_modules'), 'react-dom')
      }
    }
    return config
  }
]

Leaving here for posterity.

[fast0490f]

Up

[ianschmitz]

I believe #7993 will fix this.

[PeledYuval]

Over at Vim we've arrived at a decent working solution using craco.
I've elaborated here: https://github.com/facebook/create-react-app/issues/3547#issuecomment-668842318