Gatsby: Document how to use Gatsby with PNPM (& Rush with PNPM)

[charlex]

For users of PNPM (& Rush with PNPM), a little workaround is needed to resolve modules.

This workaround written by @vjpr did the trick for me:

https://github.com/pnpm/pnpm/issues/991#issuecomment-446330885

Workaround

let gatsbyNodeModules = require('fs').realpathSync('node_modules/gatsby')
gatsbyNodeModules = require('path').resolve(gatsbyNodeModules, '..')

exports.onCreateWebpackConfig = ({ stage, actions }) => {

  actions.setWebpackConfig({
    resolve: {
      modules: [gatsbyNodeModules, 'node_modules'],
    },
  })

}

Related tickets:

• https://github.com/gatsbyjs/gatsby/issues/2948
• https://github.com/pnpm/pnpm/issues/991#issuecomment-446330885

[github-actions[bot]]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.
If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!
As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

[github-actions[bot]]

Hey again!

It’s been 30 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it.
Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to reopen this issue or create a new one if you need anything else.
As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks again for being part of the Gatsby community! 💪💜

[wardpeet]

oh @charlex we should have pnpm support without any troubles.

Sorry to hear you're running into an issue. To help us best begin debugging the underlying cause, it is incredibly helpful if you're able to create a minimal reproduction. This is a simplified example of the issue that makes it clear and obvious what the issue is and how we can begin to debug it.

If you're up for it, we'd very much appreciate if you could provide a minimal reproduction and we'll be able to take another look.

Thanks for using Gatsby! 💜

[github-actions[bot]]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.
If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!
As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

[github-actions[bot]]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.
If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!
As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

[Js-Brecht]

There's probably always going to wind up being issues, because of the way Webpack works, and because of how its configuration is extended sometimes. It would be impractical, and excessive, for Gatsby to try to cover every edge case.

Somebody else ran into problems recently with gatsby-plugin-react-svg, because of the way that plugin defines loader... they just use loader: 'svg-react-loader', instead of loader: require.resolve('svg-react-loader'). As a result, Webpack has no idea where to look for svg-react-loader

Because of all of that, and to kind of fill in some gaps in support (plus, I got tired of having to take care of shortcomings in every project), I created gatsby-plugin-pnpm. v1.0.0 handles the most basic use case, but I'm about to release v1.1.0, which will make it much easier to define resolutions for packages that need a little extra help, or even to define your own custom paths that Webpack can use for resolving modules & loaders.

[github-actions[bot]]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.
If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!
As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

[github-actions[bot]]

Hey again!

It’s been 30 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it.
Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to reopen this issue or create a new one if you need anything else.
As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks again for being part of the Gatsby community! 💪💜

[nikoladev]

For yarn and npm there's documentation pages:

• https://www.gatsbyjs.org/docs/glossary/npm/
• https://www.gatsbyjs.org/docs/glossary/yarn/

Is there any reason we shouldn't have one for pnpm too? Then we could also mention gatsby-plugin-pnpm by @Js-Brecht.

Also, it seems that this issue was auto-closed without actually being resolved so I opened it again.

[Js-Brecht]

Btw, I've done some small bits of work recently to make Gatsby work better with Rush. I use a Rush monorepo successfully now; it has several Gatsby sites in it already, and it is steadily getting bigger. Still need gatsby-plugin-pnpm, but the other blocking issues are getting fixed as I encounter them.

[github-actions[bot]]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.
If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!
As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

[wardpeet]

@Js-Brecht is pnpm different from yarn2 pnp? Cause I had some success with gatsby and yarn2

[Js-Brecht]

It is. pnpm still relies on node_modules, while yarn2 has gotten rid of it for the most part. yarn2 also does some patching of the native require & fs, to name a few, so that it can sit between your require() calls and the actual package on the disk. This is the way it eliminates copying/linking everything into your local project, and also guards against phantom dependencies during runtime.

yarn2 aims to download/store once, use everywhere (without linking/copying at all).

pnpm relies on its node_modules structure to isolate packages with access to only their dependencies. This has changed some over time, to where it now places dependencies and their sub-dependencies in their own little bucket so that they can take advantage of hoisting among themselves (to a certain extent), but keeps your project's direct dependencies separate to enforce stricter dependency management.

pnpm downloads packages to its global store, and when you need to install it, it will hard link it instead of copying. This is what makes it so much faster than yarn & npm. The dependency handling is much more reliable, too.

I really like yarn2, and I think that it is the future of dependency management, but it is still lacking first-class support in certain areas, so it can make the DX a little painful sometimes (getting better all the time). If node, vscode, and typescript were to all get on board with it, I would use it everywhere.

For now, I like to use yarn2 in my personal projects, including a couple Gatsby projects. Since pnpm is more stable (less troublesome?) and works great with Rush, I use it for business.