Skip to content

GatsbyThemeComponentShadowingResolverPlugin fails to match shadowed components if the theme adds query params #37925

@jsg2021

Description

@jsg2021

Preliminary Checks

Description

This theme uses a query param on the component path... which is completely acceptable for Webpack... but the shadow resolver does not match it...
https://github.com/LekoArts/gatsby-themes/blob/main/themes/gatsby-theme-minimal-blog-core/gatsby-node.mjs#L348

The resolver should ignore the query params when comparing file paths.

Reproduction Link

https://github.com/jsg2021/gatsby-starter-minimal-blog-shadow-reproduction

Steps to Reproduce

  1. Create a new gatsby site:
npx gatsby new gatsby-starter-minimal-blog https://github.com/LekoArts/gatsby-starter-minimal-blog
  1. Attempt to shadow post-query.tsx:
mkdir -p src/@lekoarts/gatsby-theme-minimal-blog-core/templates
cp node_modules/@lekoarts/gatsby-theme-minimal-blog-core/src/templates/post-query.tsx ./src/@lekoarts/gatsby-theme-minimal-blog-core/templates

In the new copied file, replace import HomepageComponent, { Head } from '.../components/post'; with import HomepageComponent, { Head } from '@lekoarts/gatsby-theme-minimal-blog-core/src/components/post';

  1. Now run
  2. Notice shadowed file is ignored (warning printed to console for it vs the shadowed file)

Expected Result

The shadowed content is used and this warning should be printed:

warn The GraphQL query in the non-page component
"/Users/jonathan/Workspace/personal/website/node_modules/@lekoarts/gatsby-theme-minimal-blog-core/src/templates/blog-query.tsx" will not be run.

Actual Result

The original content is used and instead this console message is printed:

warn The GraphQL query in the non-page component
"/Users/jonathan/Workspace/personal/website/src/@lekoarts/gatsby-theme-minimal-blog-core/templates/post-query.tsx" will not be run.

Environment

System:
    OS: macOS 13.2.1
    CPU: (10) arm64 Apple M1 Max
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 18.12.1 - ~/Library/Caches/fnm_multishells/73099_1681054434372/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 9.3.0 - ~/Library/Caches/fnm_multishells/73099_1681054434372/bin/npm
  Browsers:
    Chrome: 110.0.5481.177
    Edge: 112.0.1722.34
    Safari: 16.3
  npmPackages:
    gatsby: ^5.7.0 => 5.7.0 
    gatsby-plugin-catch-links: ^5.7.0 => 5.7.0 
    gatsby-plugin-disqus: ^1.2.4 => 1.2.4 
    gatsby-plugin-feed: ^5.7.0 => 5.7.0 
    gatsby-plugin-google-analytics: ^5.7.0 => 5.7.0 
    gatsby-plugin-manifest: ^5.7.0 => 5.7.0 
    gatsby-plugin-netlify: ^5.1.0 => 5.1.0 
    gatsby-plugin-offline: ^6.7.0 => 6.7.0 
    gatsby-plugin-sitemap: ^6.7.0 => 6.7.0 
    gatsby-plugin-twitter: ^5.7.0 => 5.7.0 
    gatsby-plugin-webpack-bundle-analyser-v2: ^1.1.30 => 1.1.30 
    gatsby-remark-embedder: jsg2021/gatsby-remark-embedder => 0.0.0-semantically-released 
    gatsby-remark-responsive-iframe: ^6.7.0 => 6.7.0 
  npmGlobalPackages:
    gatsby-remark-embedder: 0.0.0-semantically-released

Config Flags

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    status: confirmedIssue with steps to reproduce the bug that’s been verified by at least one reviewer.topic: coreRelates to Gatsby's core (e.g. page loading, reporter, state machine)type: bugAn issue or pull request relating to a bug in Gatsby

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions