Issues using layout option

[CDBridger]

When I add this to my gatsby-config file

{
      resolve: "gatsby-plugin-transition-link",
      options: {
        layout: require.resolve("./src/components/layout"), // <-- this
      },
},

I get errors at the compile step

Failed to compile Gatsby files (@parcel/core):

No transformers found for __src/styles/layout.css__..

Here is my layout file

import { Link } from "gatsby";
import React from "react"
import  "../styles/layout.css"
import SEO from "./seo";


type Props = {
    children: React.ReactNode
    pageTitle: string;
    article?: boolean
}

const Layout: React.FC<Props> = ({children, pageTitle, article}) => {
    return(
        <>
        <SEO title={pageTitle} article={article}/>
        <div className='container'>
            <nav>
                <ul className="nav-links">
                    <li className="nav-link-item"><Link to="/" className="navLinkText">About</Link></li>
                    <li className="nav-link-item"><Link to="/blogs" className="navLinkText">Blogs</Link></li>
                    <li className="nav-link-item"><Link to="/history" className="navLinkText">Work</Link></li>
                    <li className="nav-link-item"><Link to="/contact" className="navLinkText">Contact</Link></li>
                </ul>
            </nav>
            <main>
                <h1>{pageTitle}</h1>
                {children}
            </main>
        </div>
        </>
    )
}

export default Layout

so then I removed the layout CSS file and I got

 ERROR #11902  COMPILATION

We encountered an error while trying to compile your site's gatsby-config. Please fix the error and try again.



  Error: Cannot find module '@reach/router'
  Require stack:
  - _SNIP-\project-root\.cache\compiled\gatsby-config.js

which would be due to the SEO component I have in my layout ( I use the useLocation hook to get current path). So I remove the SEO component and I get.

There was an error compiling the html.js component for the development server.
See our docs page on debugging HTML builds for help https://gatsby.dev/debug-html  Couldn't find layout component at
"[object Object].





WebpackError: Couldn't find layout component at "[object Object].

here are my dependencies

 "dependencies": {
  "@mdx-js/mdx": "^1.6.22",
  "@mdx-js/react": "^1.6.22",
  "date-fns": "^2.28.0",
  "gatsby": "^4.13.1",
  "gatsby-plugin-image": "^2.13.0",
  "gatsby-plugin-mdx": "^3.13.0",
  "gatsby-plugin-react-helmet": "^5.13.0",
  "gatsby-plugin-sass": "^5.13.0",
  "gatsby-plugin-sharp": "^4.13.0",
  "gatsby-plugin-transition-link": "^1.20.5",
  "gatsby-source-contentful": "^7.11.0",
  "gatsby-source-filesystem": "^4.13.0",
  "gatsby-transformer-sharp": "^4.13.0",
  "react": "^18.1.0",
  "react-dom": "^18.1.0",
  "react-helmet": "^6.1.0",
  "sass": "^1.51.0"
},
"devDependencies": {
  "@types/node": "^17.0.31",
  "@types/react": "^18.0.8",
  "@types/react-dom": "^18.0.3",
  "@types/react-helmet": "^6.1.5",
  "typescript": "^4.6.4"
}

am I doing something wrong? Is this plugin still supported? Is there another way of excluding my layout tsx from the page animations?

EDIT: I just noticed a typo in this post, I removed the CSS import FROM the layout TSX file, not the layout tsx file itself.

[musiur]

Hi, I think you don't need to config the layout as option.

 ERROR #11902  COMPILATION

We encountered an error while trying to compile your site's gatsby-config. Please fix the error and try again.



  Error: Cannot find module '@reach/router'
  Require stack:
  - _SNIP-\project-root\.cache\compiled\gatsby-config.js

Here compiler asked for @reach/router. So, you have to install this first.

As far I can advise...you can use GatsbySEO for SEO in particular page which is another useful plugin I have used in one of my Gatsby Project. This may not hamper your page transition I think.

Here is the Plugin link

[CDBridger]

I need to pass a layout so that It doesn't transition my layout file (which had also included my SEO, which is a slight red herring, I was just demonstrating what steps I had taken to try and get it to work). I just want the content of my pages to transition, not the header and footer too (which are in my layout file). This use case is exactly what the layout config is for clearly documented here, which does not work for me, which is why this issue was raised.