netlify / netlify-plugin-gatsby

A build plugin to integrate Gatsby seamlessly with Netlify
https://www.npmjs.com/package/@netlify/plugin-gatsby
MIT License
92 stars 18 forks source link

[Bug]: netlify build fails with gatsby v5 on node 18 with yarn2 pnp, "Cannot find module 'postcss-color-function'" #550

Open rburgst opened 1 year ago

rburgst commented 1 year ago

Summary

When using a gatsby-config.js that includes require statements these does not seem to be resolved by netlify-plugin-gatsby.

Steps to reproduce

  1. create a new gatsby site
  2. add the following code to your gatsby-config.js
    {
      resolve: 'gatsby-plugin-postcss',
      options: {
        postCssPlugins: [require('postcss-color-function'), require('cssnano')()],
      },
    },
  3. with the following `netlify

A link to a reproduction repository

No response

Plugin version

3.4.8

More information about your build

What OS are you using?

Mac OS

Your netlify.toml file

`netlify.toml` ```toml [[plugins]] package = "@netlify/plugin-gatsby" [build] ## Yarn 3 cache does not work out of the box as of Jan 2022. Context: ## https://github.com/netlify/build/issues/1535#issuecomment-1021947989 [build.environment] YARN_CACHE_FOLDER = "/opt/buildhome/.yarn_cache" YARN_VERSION = "3.2.4" ```

Configuration

`gatsby-config.js` and options ``` /* eslint-disable @typescript-eslint/no-var-requires */ const path = require('path'); module.exports = { flags: { DEV_SSR: true, }, graphqlTypegen: true, siteMetadata: { title: 'Site', description: 'Site', siteUrl: 'https://site.url', // full path to blog - no ending slash }, mapping: { // eslint-disable-next-line @typescript-eslint/naming-convention 'MarkdownRemark.frontmatter.author': 'AuthorYaml.name', }, plugins: [ 'gatsby-plugin-image', { resolve: 'gatsby-plugin-sharp', options: { defaultQuality: 100, stripMetadata: true, }, }, 'gatsby-transformer-sharp', 'gatsby-plugin-sitemap', { resolve: 'gatsby-source-filesystem', options: { name: 'content', path: path.join(__dirname, 'src', 'content'), }, }, { resolve: 'gatsby-transformer-remark', options: { plugins: [ { resolve: 'gatsby-remark-responsive-iframe', options: { wrapperStyle: 'margin-bottom: 1rem', }, }, 'gatsby-remark-prismjs', 'gatsby-remark-copy-linked-files', 'gatsby-remark-smartypants', { resolve: 'gatsby-remark-images', options: { maxWidth: 1000, quality: 100, backgroundColor: '#191B1F', }, }, ], }, }, 'gatsby-transformer-json', { resolve: 'gatsby-plugin-canonical-urls', options: { siteUrl: 'https://site.url', }, }, 'gatsby-plugin-typescript', 'gatsby-plugin-emotion', 'gatsby-plugin-react-helmet', 'gatsby-transformer-yaml', { resolve: 'gatsby-plugin-feed', options: { query: ` { site { siteMetadata { title description siteUrl site_url: siteUrl } } } `, feeds: [ { serialize: ({ query: { site, allMarkdownRemark } }) => allMarkdownRemark.edges.map(edge => ({ ...edge.node.frontmatter, description: edge.node.excerpt, date: edge.node.frontmatter.date, url: `${site.siteMetadata.siteUrl}${edge.node.fields.slug}`, guid: `${site.siteMetadata.siteUrl}${edge.node.fields.slug}`, custom_elements: [{ 'content:encoded': edge.node.html }], })), query: `{ allMarkdownRemark( filter: {fields: {layout: {eq: "post"}}, frontmatter: {draft: {ne: true}}} sort: {frontmatter: {date: DESC}} ) { edges { node { excerpt html fields { slug } frontmatter { title date } } } } }`, output: '/rss.xml', title: 'Blog', match: '^/blog/', }, ], }, }, { resolve: 'gatsby-plugin-postcss', options: { postCssPlugins: [require('postcss-color-function'), require('cssnano')()], }, }, ], }; ```

Environment

Environment ``` # Paste output from `npx envinfo` here. ```

Gatsby info

gatsby info ``` System: OS: macOS 13.0.1 CPU: (8) arm64 Apple M1 Pro Shell: 5.8.1 - /bin/zsh Binaries: Node: 18.12.1 - /private/var/folders/qm/2wy0hxgs30q25ws7qgql07600000gn/T/xfs-81d3c4e5/node Yarn: 3.2.4 - /private/var/folders/qm/2wy0hxgs30q25ws7qgql07600000gn/T/xfs-81d3c4e5/yarn npm: 8.19.2 - ~/.volta/tools/image/node/18.12.1/bin/npm Browsers: Firefox: 107.0.1 Safari: 16.1 ```

Your _redirects file

`_redirects` ```toml # Paste content of your `_redirects` file here ```

Builds logs (or link to your logs)

Build logs ``` ​ 10:29:46 AM: ──────────────────────────────────────────────────────────────── 10:29:46 AM: 1. netlify-plugin-gatsby-cache (onPreBuild event) 10:29:46 AM: ──────────────────────────────────────────────────────────────── 10:29:46 AM: ​ 10:29:46 AM: No Gatsby cache found. Building fresh. 10:29:46 AM: ​ 10:29:46 AM: (netlify-plugin-gatsby-cache onPreBuild completed in 7ms) 10:29:46 AM: ​ 10:29:46 AM: ──────────────────────────────────────────────────────────────── 10:29:46 AM: 2. @netlify/plugin-gatsby (onPreBuild event) 10:29:46 AM: ──────────────────────────────────────────────────────────────── 10:29:46 AM: ​ 10:29:46 AM: No Gatsby cache found. Building fresh. 10:29:46 AM: ​ 10:29:46 AM: ──────────────────────────────────────────────────────────────── 10:29:46 AM: Plugin "@netlify/plugin-gatsby" failed 10:29:46 AM: ──────────────────────────────────────────────────────────────── 10:29:46 AM: ​ 10:29:46 AM: Error message 10:29:46 AM: Error: Could not load gatsby-config.js 10:29:46 AM: Cannot find module 'postcss-color-function' 10:29:46 AM: Require stack: 10:29:46 AM: - /opt/build/repo/gatsby-config.js 10:29:46 AM: - /opt/build/repo/.netlify/plugins/node_modules/@netlify/plugin-gatsby/lib/helpers/config.js 10:29:46 AM: - /opt/build/repo/.netlify/plugins/node_modules/@netlify/plugin-gatsby/lib/helpers/cache.js 10:29:46 AM: - /opt/build/repo/.netlify/plugins/node_modules/@netlify/plugin-gatsby/lib/index.js 10:29:46 AM: ​ 10:29:46 AM: Plugin details 10:29:46 AM: Package: @netlify/plugin-gatsby 10:29:46 AM: Version: 3.4.8 10:29:46 AM: Repository: git+https://github.com/netlify/netlify-plugin-gatsby.git 10:29:46 AM: npm link: https://www.npmjs.com/package/@netlify/plugin-gatsby 10:29:46 AM: Report issues: https://github.com/netlify/netlify-plugin-gatsby/issues 10:29:46 AM: ​ 10:29:46 AM: Error location 10:29:46 AM: In "onPreBuild" event in "@netlify/plugin-gatsby" from netlify.toml 10:29:46 AM: ​ 10:29:46 AM: Resolved config 10:29:46 AM: build: 10:29:46 AM: command: yarn build 10:29:46 AM: commandOrigin: ui 10:29:46 AM: environment: 10:29:46 AM: - YARN_CACHE_FOLDER 10:29:46 AM: - YARN_VERSION 10:29:46 AM: publish: /opt/build/repo/public 10:29:46 AM: publishOrigin: ui 10:29:46 AM: plugins: 10:29:46 AM: - inputs: {} 10:29:46 AM: origin: ui 10:29:46 AM: package: netlify-plugin-gatsby-cache 10:29:48 AM: Creating deploy upload records 10:29:46 AM: - inputs: {} 10:29:46 AM: origin: config 10:29:46 AM: package: '@netlify/plugin-gatsby' 10:29:47 AM: Caching artifacts 10:29:48 AM: Failed during stage 'building site': Build script returned non-zero exit code: 2 (https://ntl.fyi/exit-code-2) ```

Function logs

Function logs ``` # Paste logs here ```
ascorbic commented 1 year ago

Hi. Unfortunately we don't support PnP with Yarn yet. You'd need to set nodeLinkers: node-modules for this to build properly.