pnpm: Not working with Gatsby

It is a plugin, now. Finally got tired of having to write in Webpack/PNPM compatibility fixes in every Gatsby project I create, so I made a plugin to handle it for me: gatsby-plugin-pnpm. See also https://github.com/gatsbyjs/gatsby/issues/19316#issuecomment-582275227

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'],
    },
  })
  
}

@cdfa This is now fixed in yurnalist 1.0.5

Great! I added a link to this plugin to https://github.com/pnpm/awesome-pnpm

I’m going to take a crack at getting pnpm working with gatsby v2.

I think the fix is a custom webpack externals config that resolves all node requires to project root relative paths.

I faced a similar problem with next.js which uses webpack to compile server side code.

The only way to workaround this seems to be to use: pnpm i --shamefully-flatten.

My pnpmfile resolutions are:

  // https://github.com/gatsbyjs/gatsby/issues/4656
  'gatsby': {
    dependencies: {
      'request': '^2',
      'address': '^1',
      'lodash': '^4',
    }
  },

  'gatsby-cli': {
    dependencies: {
      'regenerator-runtime': "^0.11.1",
    }
  },

  // https://github.com/geowarin/friendly-errors-webpack-plugin/issues/64
  'friendly-errors-webpack-plugin': {
    peerDependencies: {
      webpack: '*'
    }
  },

There were also some silent errors in gatsby which needed these top-level deps:

• babel-core
• babel-loader
• react
• react-dom

In pnpmfile should check for root pkg, and if gatsby is in deps there, add these automatically.

I guess an issue should be created at Gatsby and additional investigation done.

With this hook gatsby makes it to the bundling step:

module.exports = {
  hooks: {
    readPackage (pkg) {
      switch (pkg.name) {
        case 'gatsby-cli':
          Object.assign(pkg.dependencies, {
            'regenerator-runtime': "^0.11.1",
          })
          break
        case 'gatsby':
          Object.assign(pkg.dependencies, {
            address: '^1.0.3',
            'request': "^2.83.0",
          })
          break
      }
      return pkg
    }
  }
}

However, there it fails. Seems like because webpack searches for dependencies in project/node_modules instead of in the node_modules of gatsby

maybe try to remove node_modules and shrinkwrap.yaml after changes to pnpmfile.js

to get the output of console.log try to run pnpm install --reporter append-only