gatsby with pnpm

/post/gatsby-pnpm article cover image

在使用pnpm作为包管理器时,当启动打包gatsby项目时因为webpack无法识别pnpm独特的node_modules结构导致无法正常使用。

官方说明pnpm-compatibility-plugin-for-gatsby

js
// gatsby-config.js
module.exports = {
  plugins: [
    // ...,
    `gatsby-plugin-pnpm`
    // ...
  ]
}

使用pnpm安装包含eslint依赖时,它会被提升至上层存储并且包依赖地址会被硬链接导致使用其他包管理器启动时的会报错(此处是eslint): failed to load plugin 'jsx-a11y' declared in 'baseconfig'

eslint-airbnb-issue

使用pnpm-prune

<Callout type="error"> 使用此第三方插件虽然解决了Gatsby中webpack插件和解析器的路径解析但是导致热更新(对于react-refresh-webpack-plugin未做处理)失败,暂不使用。等待官方解决方案 </Callout>