netlify/netlify-plugin-gatsby

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

rburgst opened this issue · 1 comments

rburgst commented

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

  • I am building using the CLI
  • I am building using file-based configuration (netlify.toml)

What OS are you using?

Mac OS

Your netlify.toml file

`netlify.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` 
# 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

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