Gatsby: Issue using 'docz' since FastRefresh has been implemented

[Okazari]

Description

I've got an issue that i believe is related to yarn but just in case i want to point it to you as it affect gatsby/docz users using react-native.

It's due to this committ https://github.com/gatsbyjs/gatsby/commit/205847b833c5f7783182ea54a3ddd72f6369ee47 adding @pmmmwh/react-refresh-webpack-plugin as a dependency.

see https://github.com/yarnpkg/yarn/issues/7987
see also https://github.com/doczjs/docz/issues/1418

Steps to Reproduce

1. git clone https://github.com/Okazari/yarnissue.git
2. cd yarnissue
3. yarn
4. yarn start

Expected result

see https://github.com/yarnpkg/yarn/issues/7987

Actual result

see https://github.com/yarnpkg/yarn/issues/7987

Environment

System:
OS: Linux 5.3 Ubuntu 19.10 (Eoan Ermine)
CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
Shell: 5.0.3 - /bin/bash
Binaries:
Node: 12.16.0 - /tmp/yarn--1584111821045-0.9563755931787925/node
Yarn: 1.22.4 - /tmp/yarn--1584111821045-0.9563755931787925/yarn
npm: 6.13.4 - ~/.nvm/versions/node/v12.16.0/bin/npm
Languages:
Python: 2.7.17 - /usr/bin/python
Browsers:
Chrome: 73.0.3683.75
Firefox: 72.0.1

[Js-Brecht]

I've actually had this problem periodically when running yarn 2 in a Gatsby site. It happens because @pmmmwh/react-refresh-webpack-plugin is not a dependency of the project, and that file is being run from the .cache directory. I just haven't done anything about it because it's intermittent, and I was trying to figure out _why_ it's intermittent... that kind of issue is supposed to be taken care of already using pnp-webpack-plugin.

Maybe @arcanis can shed some light on that particular fluke?

---

FWIW, I don't think this is a docz or a yarn issue. It's the fact that a dependency of Gatsby is being imported in a file that gets copied to the .cache in the root project, and it is not a dependency of that project. In that context, the resolution of those packages should be made relative to Gatsby's directory, by Webpack. The fact that it ever works is due to how most project managers hoist packages.

Your guess is as good as mine why react-error-overlay gets hoisted by yarn and @pmmmwh/react-refresh-webpack-plugin/src/overlay doesn't.

I am able to fix the issue by adding a webpack alias for that package here:
https://github.com/gatsbyjs/gatsby/blob/205847b833c5f7783182ea54a3ddd72f6369ee47/packages/gatsby/src/utils/webpack.config.js#L390-L396

like:

        ...(process.env.GATSBY_HOT_LOADER !== `fast-refresh`
          ? {
              "react-hot-loader": path.dirname(
                require.resolve(`react-hot-loader/package.json`)
              ),
            }
          : {}),
        "@pmmmwh/react-refresh-webpack-plugin": path.dirname(
          require.resolve(
            `@pmmmwh/react-refresh-webpack-plugin/package.json`
          )
        ),

---

I also wonder if it might make sense to do something like this:

const resolve = {
  modules: [
    // default
    `node_modules`,
    // hoisted modules
    directoryPath(`node_modules`),
    // gatsby directory
    path.dirname(require.resolve(`gatsby/package.json`)),
    // gatsby node_modules
    path.join(
      path.dirname(require.resolve(`gatsby/package.json`)),
      `node_modules`
    ),
    // pnpm support
    path.dirname(path.dirname(require.resolve(`gatsby/package.json`))),
  ],
}

Then again, maybe there's a good reason why that hasn't been done 🤷‍♂. I can say that it fixes the problem, too, though.

[Okazari]

These is two thing i would love to understand :

• Why does yarn hoist @pmmmwh/react-refresh-webpack-plugin when using docz alone and it doesn't hoist it when using both docz and react-native
• Why does npm hoist @pmmmwh/react-refresh-webpack-plugin when using both docz and react-native when yarn doesn't.

I really feel that there is some core concept about yarn behavior that i don't get.

[Js-Brecht]

I can't answer that with certainty... I think it has to do with how they do dependency resolution. npm is less deterministic about what it hoists... I think

Another thing I've noticed: with react-native as a direct dependency, if you add gatsby as a direct dependency, too, then yarn will hoist @pmmmwh/react-refresh-webpack-plugin. So, perhaps there are version conflicts between @pmmmwh/react-refresh-webpack-plugin dependencies, and react-native dependencies... maybe a sub-dependency of @pmmmwh/react-refresh-webpack-plugin (or sub-sub-dependency, etc) is also required by react-native, and react-native wins out because it is a direct dependency 🤷‍♂

Dependency resolution/hoisting is not a simple process, and diving down that rabbit hole has not been one of my favorite experiences in the past. Perhaps an expert in the field could answer the question better.

In any case, if you are willing to submit a PR fixing the issue, I'm sure you would also get more definitive feedback about the solution from the core team.

[Okazari]

Many thanks for your help :)
I'll look further and will make a PR accordingly.

[pieh]

I opened https://github.com/gatsbyjs/gatsby/pull/23456 which I tested against your repository and it fixed the problem for me, will just need to wait for another maintainer to review