sbardian / gatsby-plugin-breadcrumb Goto Github PK
View Code? Open in Web Editor NEWBreadcrumbs for gatsby sites
Breadcrumbs for gatsby sites
Test greeting
Hello. Thank you for your plugin. It works well for my uses.
However, I have two issues that are related to each other.
Currently, the plugin outputs Divs and Spans:
Like so:
<div>
<span class="breadcrumb__title">You are at: </span>
<div class="breadcrumb">
<a class="breadcrumb__link" href="/">Home</a>
<span class="breadcrumb__separator"></span>
</div>
<div class="breadcrumb">
<span class="breadcrumb__link__disabled">blog</span>
<span class="breadcrumb__separator"></span>
</div>
</div>
Issue #1:
Per https://www.w3.org/TR/wai-aria-practices-1.1/examples/breadcrumb/index.html.
A more accessible pattern is:
<nav aria-label="Breadcrumb" class="breadcrumb">
<ol>
<li>
<a href="../../">
WAI-ARIA Authoring Practices 1.1
</a>
</li>
<li>
<a href="../../#aria_ex">
Design Patterns
</a>
</li>
<li>
<a href="../../#breadcrumb">
Breadcrumb Pattern
</a>
</li>
<li>
<a href="./index.html" aria-current="page">
Breadcrumb Example
</a>
</li>
</ol>
</nav>
Like this example, I was able to easily wrap the Breadcrumbs in a Nav element. In doing that I can add the "aria-label='breadcrumb'" to the nav element.
Question: 1. The first issue is how can I go about adding "aria-current="page" to the last link? But I suppose only if it is NOT disabled?
Question: 2. How could I go about changing the HTML structure? Is the only way to modify the https://github.com/sbardian/gatsby-plugin-breadcrumb/blob/develop/src/components/auto-gen-crumb.js page?
And lastly, would you be interested in a Pull Request for changing the HTML to follow these guidelines? I don't know any reason why anyone would prefer divs? An Ordered List, if you think about it, makes a lot more sense.
Again thanks, your plugin is really good. And the other options you've provided just work!
For example, I have a route like /writings/day-and-night
, when I now go to day-and-night
set a crumbLabel
with "Day and Night" my breadcrumb would look like that Root / writings / Day and Night
. What I would love to see is Root / Writings / Day and Night
(capitalized W), is this possible or something to consider adding to this plugin?
Maybe it would make sense to create some router JSON file where static page can be configured while dynamic pages like blog posts get their title
from a Frontmatter attribute.
E.g.:
{
"routes": [
{
"path": "writings",
"title": "Writings"
}
]
}
with the path variable I was able to get the correct pageContext, so I think this should work:
query MyQuery {
sitePage(path: {regex: "/.*writings$/"}) {
path
context {
breadcrumb {
crumbs {
pathname
crumbLabel
}
}
}
}
}
This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.
Warning
These dependencies are deprecated:
Datasource | Name | Replacement PR? |
---|---|---|
npm | jest-dom |
These updates have all been created already. Click a checkbox below to force a retry/rebase of any.
@commitlint/cli
, @commitlint/config-conventional
)babel-preset-gatsby
, babel-preset-gatsby-package
)babel-jest
, jest
)@testing-library/dom
, @testing-library/jest-dom
, @testing-library/react
).circleci/config.yml
circleci/node 16.13
circleci/node 16.13
.github/workflows/greetings.yml
actions/first-interaction v1
package.json
identity-obj-proxy 3.0.0
prop-types 15.8.1
wildcard-match 5.1.3
@babel/cli 7.24.8
@babel/core 7.24.9
@babel/eslint-parser 7.24.8
@babel/helper-define-map 7.18.6
@babel/runtime 7.24.8
@commitlint/cli 14.1.0
@commitlint/config-conventional 14.1.0
@testing-library/dom 8.20.1
@testing-library/jest-dom 5.17.0
@testing-library/react 12.1.5
babel-jest 27.5.1
babel-plugin-dynamic-import-node 2.3.3
babel-preset-gatsby 2.25.0
babel-preset-gatsby-package 2.25.0
commitizen 4.3.0
coveralls 3.1.1
cross-env 7.0.3
cz-conventional-changelog 3.3.0
eslint 8.57.0
eslint-config-airbnb 18.2.1
eslint-config-prettier 8.10.0
eslint-config-react 1.1.7
eslint-plugin-import 2.29.1
eslint-plugin-jsx-a11y 6.9.0
eslint-plugin-prettier 4.2.1
eslint-plugin-react 7.34.4
eslint-plugin-react-hooks 4.6.2
gatsby 4.6.2
husky 7.0.4
jest 27.5.1
jest-dom 4.0.0
lint-staged 11.2.6
prettier 2.8.8
react 17.0.2
react-dom 17.0.2
semantic-release 18.0.1
gatsby 3.x - 5.x
Hi,
I was testing and playing around with your latest update. And I noticed something.
When you navigate into the crumbs, ie. deep into the site, either from a link in the menu or from within a page, ie. tag page, the active style does NOT take affect, UNTIL I click on it in the breadcrumb. So, in order for the styles to take place, I have to click on the active page link when I am on that page.
I hope that is clear?
It should be active, but it isn't.
Now, if I click on it, it because active.
You can see the behaviour on my live demo site
I don't know why this is? Maybe I have it configured incorrectly?
I am styling the active links in the CSS here
I have useClassNames: true
in my gatsby-config.js
I am sorry, but I didn't pay enough attention in the previous version(s) so I am not sure if this is new or not.
Thank you!
Hi there,
I have trailing slashes on my site, but breadcrumbs generated by the plugin have pathnames without them. How can I fix that?
Hi,
Would you consider adding support for TypeScript ?
I have this message when I'm trying to use the plugin in a .tsx file :
TS7016: Could not find a declaration file for module 'gatsby-plugin-breadcrumb/'. '****/node_modules/gatsby-plugin-breadcrumb/index.js' implicitly has an 'any' type. Try 'npm i --save-dev @types/gatsby-plugin-breadcrumb' if it exists or add a new declaration (.d.ts) file containing 'declare module 'gatsby-plugin-breadcrumb/';'
Thanks
Testing Github greetings action
Plugin gatsby-plugin-breadcrumb is not compatible with your gatsby version 2.32.9 - It requires gatsby@^3.0.0
My stack can only run gatsby@^2.* - will this still work
npm error when using npm install gatsby-plugin-breadcrumb
:
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/gatsby
npm ERR! gatsby@"^5.5.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer gatsby@"^3.0.0 || ^4.0.0" from [email protected]
npm ERR! node_modules/gatsby-plugin-breadcrumb
npm ERR! gatsby-plugin-breadcrumb@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
With the workaround npm install gatsby-plugin-breadcrumb --legacy-peer-deps
the plugin seems to work fine with [email protected], except for the dependency warnings/errors.
Gatsby warning when using npm run develop
| gatsby develop
:
warn Plugin gatsby-plugin-breadcrumb is not compatible with your gatsby version 5.5.0 - It requires gatsby@^3.0.0 || ^4.0.0
Would be great if the last slash is removed because it does not make sense to have one more slash when the current page is the last crumb item.
Here is the demo that i think is working how we would expect. I had an error, but seems correct now.
Indeed that demo works as expected!
Here's my sandbox https://codesandbox.io/s/github/dvlprmartins/dvlprmartins
Thanks for your help btw!
Originally posted by @dvlprmartins in #14 (comment)
I'm using the plugin with sitemap , it's working fine on local (after gatsby build and serve).
Since i deploy on Netlify it failed.
I was wondering if there is a special conf to set ?
I'm a big fan of good old CSS (Scss) and don't like the CSS-in-JS hype. So I suggest an option to switch that, so instead of inline CSS, classes are added to each element.
This would allow me to easier style them along the rest of my layout.
<div class="breadcrumb">
<span class="breadcrumb__root">Home</span>
<a class="breadcrumb__link" href="/blog">Blog</a>
<spann class="breadcrumb__divider"> / </spann>
<a class="breadcrumb__link" href="/blog/the-awesome-post">The awesome post</a>
</div>
I have also modified the HTML structure, which IMO makes more sense.
Removing CSS-in-JS would also remove bundle size and reduce the plugin to its core functionality; providing an easy way to show a breadcrumb. I think plugins should not combine structure and styling in one file. A separate optional CSS file that a user can load into would make it more flexible.
My app uses gatsby with a Layout component I put on all of my pages.
I have the useBreadcrumbs in the Layout taking the location and a sent in title.
I noticed my page rerenders multiple times sending both the last and current titles to useBreadcrumb.
I also noticed this doesn't happen without this plugin.
There appears to be no working examples online.
How do you make this actually work on pages?
I have a project where I have two parent paths for pages generated by gatsby-node.js
from a CMS using templates - /journal/
(blog posts) & /work/
(portfolio).
I am using this plugin with AutoGen, with configuration as follows:
{
resolve: `gatsby-plugin-breadcrumb`,
options: {
useAutoGen: true,
exclude: [`/dev-404-page/`, `/404/`, `/404.html`, `/work/*` // a bunch of other individual pages],
},
},
The /work/*
rule does not seem to work as breadcrumbs are still being generated for the sub-sub-paths.
If I test by specifying a specific page within /work/
in the exclude
array, it does work as expected - e.g. /work/[project_slug]
, that page then generates an error because the breadcrumbs cannot be found. But it's too much effort to go through and do this for every single portfolio piece.
I think it would be nice to be able to use wildcards/regex because I only want to generate breadcrumbs for /journal/
, not waste build time generating them for /work/
as well.
Running into this error when following the instructions in the docs under the Click Tracking Layout component example?
Uncaught TypeError: updateCrumbs is not a function
The above error occurred in the <Breadcrumb> component:
The above error occurred in the <AppContainer> component:
Hi there,
I'm trying to use this plugin with useAutoGen
breadcrumbs. In my default layout I have set a custom crumbLabel depending on frontmatter title from pageContext as follows:
<Breadcrumb
crumbs={crumbs}
crumbLabel={pageContext.frontmatter.title}
/>
I have also set autoGenHomeLabel
in gatsby-config.js
. When I'm on a page level 2 (/faq/
), everything works fine and I get correct crumb labels. When I go down to page level 3 (for example, /faq/question1/
), I get correct crumb labels only for home page (defined in gatsby-config.js
file) and the current page. The crumb label for the parent page (/faq/
) is getting generated from the path, and not pageContext.frontmatter.title
.
Is there any way to fix that? I would like the labels to be always generated from pageContext.frontmatter.title
.
I would love the ability to style the first breadcrumb, in the mock up the first breadcrumb (defined as defaultCrumb in my gatsby-config.js) needs a different style than the other breadcrumbs, see attached screenshot.
How ever I cannot write CSS or HTML selectors in the crumbLabel and my CSS attempts have been futile, notably
.breadcrumb__link:first{
color: red;
}
If this is already possible I would love some documentation on how to do this, and maybe a codepen.
I tried to hardcode my own breadcrumbs following the same list stile and added this css
nav a:first-of-type{
color: red;
}
Resulting in my hard coded breadcrumb list getting the correct styling while the gatsby-plugin-breadcrumb list became red in all elements
Noticed some errors in the useBreadcrumb
documentation. Need to update these to avoid confusion.
I created a tiny PR that should handle this here:
#72
Getting warning messages on Gatsby v4 build.
warning Plugin gatsby-plugin-breadcrumb is not compatible with your gatsby version 4.2.0 - It requires gatsby@^3.0.0
...come on write some tests. Plan was to use cypress. Will need a default Gatsby site to include the plugin and run the tests against. more to come. . .
Hi there,
There is an exclude option in AutoGen breadcrumbs for pages like /404/
and /404.html
. I would like to ask, what are the reasons for excluding them? In my case it was generating an error during the build, as I use wrapPageElement
with a layout which includes breadcrumbs. So I had to pass exclude: []
in my gatsby-config.js
file.
I currently have an issue with the breadcrumbs default crumb.
So let's imagine that our default crumb is this one /writtens
.
Inside "writtens" we have our posts, so for example: /writtens/a-funny-post
.
Writtens page is also on my navbar, so I have a that navigates to it.
So this is the behaviour:
If I go to Writtens page and then go to writtens/a-funny-post it will create the expected breadcrumb, so Writtens/A Funny Post
.
But if I now navigate to Writtens from the navbar the breadcrumbs will become Writtens/A Funny Post/Writtens
. That's the first problem.
The second one is if I navigate to "A Funny Post" and then navigate to "Writtens" from the breadcrumb and then navigate to a different post for example "A Mean Post" my breadcrumbs will become Writtens/A Funny Post/A Mean Post
.
Is there a way to whenever I navigate to /writtens
to clear/reset the breadcrumbs?
Thanks!
Hi,
Would you consider to add support for Gatsby v5?
Is it possible to launch a new version of gatsby-plugin-breadcrumb whenever gatsby released a new version too?
I'm asking this question because the new version of gatsby released is never synced with this plugin and it's giving me troubles in build time.
Not really sure what is causing this issue however on some of my pages I am getting duplicate breadcrumb entries. I am using sitemap crumbs.
For instance if the page I am on is /about-us/client-testimonials
The rendered breadcrumb is / about-us / client-testimonials / client-testimonials / client-testimonials /
This is happening to a lot of my pages, however not all so I am kind of confused on what could be causing it.
Loading my sitemap.xml
, I can see the sitemap entry for the page is correct and only has 1 entry.
If I console log pageContext
and view the breadcrumb property, it is indeed somehow getting duplicate crumbs.
Any help with this issue would be appreciated, thank you.
I am using an URL prefix for my Gatsby page:
gatsby-config.js
module.exports = {
pathPrefix: '/en',
And I ended up with double-prefixed breadcrumbs (/en/en/my/url) when using the component like:
<BreadCrumbs
locationBC={props.location}
crumbLabel="My Post" />
Imported from:
export const BreadCrumbs = (props) => {
return(
<Breadcrumb location={props.locationBC} crumbLabel={props.crumbLabel} />
)
}
My Spaghetti solution for this is splitting of the prefix /en
before handing it to the breadcrumb component:
export const BreadCrumbs = (props) => {
const breadcrumbItem = {pathname: props.locationBC.pathname.split('/en')[1]}
return(
<Breadcrumb location={breadcrumbItem} crumbLabel={props.crumbLabel} />
)
}
So far I did not see a downside from it. But is there a cleaner way to handle the prefix?
Not sure how this will look, but I would like to be able to allow setting the crumbLabel
when using Sitemap/SitemapCrumbs
. Currently it uses the page name, which will not look great in some cases
I am working with a route with subdirectories in autogen mode like so http://localhost:8000/page1/page-2/page-3 and in the label it is appearing me the pathname (without the slash) instead of the label I have previously set in each of the pages.
Expected result: Home - Page 1 - Page 2 - Page 3
Actual result: Home-page1-page-2-page-3
Thank you very much for your plugin. Coming from WordPress and SEO in general, I find breadcrumbs to be vital in my battle with our friend Mr. Google. So, thank you for this plugin. (However, I am relatively new to JavaScript and React.)
Having said that, I am getting a weird issue.
For my page that lists all blog posts with a specific tag (or a specific Category), I am expecting:
home/tags/green-tea
I am getting
home/tags/tags/green-tea
Same for categories. I am getting home/categories/categories/health
This is the repo: https://github.com/davidkartuzinski/1001teafacts
Please forgive the look, if you clone, as it's a bit naked (no CSS) until I get all the functionality in place.
I have looked through the issues here that seemed possibly related and found nothing.
I also tried to make it it's own component but failed miserably. (I saw some stuff in this repo that will help, once this below issue is taken care of.)
--
Below is the relevant code:
src/templates/tags.js
import React from "react"
import PropTypes from "prop-types"
import SiteMetaData from "../components/site-metadata"
import { IoIosPricetags } from "react-icons/io"
import { Link, graphql } from "gatsby"
import { Breadcrumb } from "gatsby-plugin-breadcrumb"
const Tags = ({ pageContext, data, location }) => {
const { tag } = pageContext
const { edges, totalCount } = data.allMdx
const tagHeader = `${totalCount} post${
totalCount === 1 ? "" : "s"
} tagged with "${tag}"`
const {
breadcrumb: { crumbs },
} = pageContext
const customCrumbLabel = location.pathname.toLowerCase().replace("-", " ")
return (
<div>
<SiteMetaData />
<h1>
<IoIosPricetags />
{tagHeader}
</h1>
<div>
{" "}
You are here:
<Breadcrumb
crumbs={crumbs}
crumbSeparator=""
crumbLabel={customCrumbLabel}
/>
</div>
<ul>
{edges.map(({ node }) => {
const { slug } = node.fields
const { title } = node.frontmatter
return (
<li key={slug}>
<Link to={slug}>{title}</Link>
</li>
)
})}
</ul>
<Link to="/tags">See all tags</Link>
</div>
)
}
Tags.propTypes = {
pageContext: PropTypes.shape({
tag: PropTypes.string.isRequired,
}),
data: PropTypes.shape({
allMdx: PropTypes.shape({
totalCount: PropTypes.number.isRequired,
edges: PropTypes.arrayOf(
PropTypes.shape({
node: PropTypes.shape({
frontmatter: PropTypes.shape({
title: PropTypes.string.isRequired,
}),
fields: PropTypes.shape({
slug: PropTypes.string.isRequired,
}),
}),
}).isRequired
),
}),
}),
}
export default Tags
export const pageQuery = graphql`
query($tag: String) {
allMdx(
limit: 2000
sort: { fields: [frontmatter___date], order: DESC }
filter: { frontmatter: { tags: { in: [$tag] } } }
) {
totalCount
edges {
node {
frontmatter {
title
}
fields {
slug
}
}
}
}
}
`
gatsby-node.js
const path = require(`path`)
const _ = require(`lodash`)
const { createFilePath } = require(`gatsby-source-filesystem`)
const { paginate } = require(`gatsby-awesome-pagination`)
exports.onCreateNode = ({ node, getNode, actions }) => {
const { createNodeField } = actions
if (node.internal.type === `Mdx`) {
const slug = createFilePath({ node, getNode, basePath: `pages` })
createNodeField({
node,
name: `slug`,
value: slug,
})
}
}
exports.createPages = async ({ graphql, actions }) => {
const { createPage } = actions
// create variable to use for each type of templates
const blogPostTemplate = path.resolve(`./src/templates/blog-post.js`)
const tagTemplate = path.resolve(`./src/templates/tags.js`)
const categoriesTemplate = path.resolve(`./src/templates/categories.js`)
// const blogListTemplate = path.resolve(`./src/templates/blog.js`)
const result = await graphql(`
query {
postsRemark: allMdx(
sort: { order: DESC, fields: [frontmatter___date] }
limit: 2000
) {
edges {
node {
fields {
slug
}
frontmatter {
tags
categories
}
}
next {
frontmatter {
slug
title
}
}
previous {
frontmatter {
slug
title
}
}
}
}
tagsGroup: allMdx(limit: 2000) {
group(field: frontmatter___tags) {
field
fieldValue
}
}
categoriesGroup: allMdx(limit: 2000) {
group(field: frontmatter___categories) {
field
fieldValue
}
}
}
`)
// handle errors
if (result.errors) {
reporter.panicOnBuild(
`Error while running GraphQL query. Check gatsby-node.js file.`
)
return
}
const posts = result.data.postsRemark.edges
posts.forEach(({ node, next, previous }) => {
createPage({
path: node.fields.slug,
component: blogPostTemplate,
context: {
// Data passed to context is available
// in page queries as GraphQL variables.
slug: node.fields.slug,
// https://toripugh.com/blog/gatsby-blog--next-and-previous-links
next,
previous,
},
})
})
// http://codekarate.com/daily-dose-of-drupal/gatsby-pagination-gatsby-awesome-pagination
paginate({
createPage,
items: posts,
itemsPerPage: 2, // number of pages
pathPrefix: "/blog",
component: path.resolve(`./src/templates/blog.js`),
})
// extract tag data from the query
const tags = result.data.tagsGroup.group
// make the tag pages
tags.forEach(tag => {
createPage({
path: `/tags/${_.kebabCase(tag.fieldValue)}/`,
component: tagTemplate,
context: {
tag: tag.fieldValue,
},
})
})
// extract category data from the query
const categories = result.data.categoriesGroup.group
// make the category pages
categories.forEach(category => {
createPage({
path: `/categories/${_.kebabCase(category.fieldValue)}/`,
component: categoriesTemplate,
context: {
category: category.fieldValue,
},
})
})
}
Again, thank you very much for your attention and help.
-DK
gatsby develop works fine, but build failed with below error
`34 | }, /#PURE/_react.default.createElement("ol", {
35 | className: "breadcrumb__list"
36 | }, autoGenCrumbs.map(function (c, i) {
| ^
37 | if (hiddenCrumbs.includes(c.pathname)) {
38 | return null;
39 | }
`
I combine gatsby-plugin-breadcrumb with gatsby-awesome-pagination. Since the 7.0.0 release the pageContext is missing the breadcrumb object on paginated pages. I might find the time to create a minimal reproducible example repository tomorrow.
Create prop (setHome
maybe) for <Breadcrumb>
that will automatically create a base default Home
crumb.
I was using the plugin, but I ended up encountering a problem in my usage scenario.
Whenever the product URL changes, I would necessarily have to reset the accumulated crumbs, for example:
product-1/blank
product-2/blank
When changing the initial path, I needed to reset the crumbs to this new "first path". Did you understand? Me implementing this, I can open a PR, does it make sense? And enabling this via props in the plugin settings.
const indexOfDiffPath = crumbs.findIndex(
(crumb) =>
crumb.pathname.split("/")[1] === location.pathname.split("/")[1]
)
if (indexOfDiffPath === -1) {
setCrumbs([
{ pathname: defaultCrumb.location.pathname, ...defaultCrumb },
{
...location,
crumbLabel,
crumbSeparator,
},
])
}
Hi there,
Is it possible to use useBreadcrumb
hook with AutoGen breadcrumbs? I would like to use this plugin with Ant Design breadcrumbs. So I just need an array of links for each page.
Hi!
Thanks for this great handy plugin.
I wanted to look at the demo of the new version where AutoGen was introduced but it seems there is an error with undefined crumbs there as you can see on the following screenshot.
I tried to follow the tutorial on a local environment and it ended in the same, I probably miss something.
After some investigation, I think the problem is that no crumbs array is put in the pageContext but I am not sure how to do so.
Can you please let me know if this is a known issue or if you know a quick fix?
Regards,
Hi, I am using the sitemap-plugin and I think I will only need to pass the right props to make my breadcrumbs work.
Just one question:
What do I have to pass from, for eg., the contact page to the layout in order to make this assignment work?
const {
breadcrumb: { crumbs },
} = pageContext;
I have passed the pageContext={ breadcrumbs: ['contact'] }
but got the error Uncaught TypeError: Cannot read property 'map' of undefined
Any suggestions?
Thanks
Matteo
I would like to add an ID to the root element so I don't need to wrap it around another div which does not make any sense.
Read more about it here: https://web.dev/dom-size/
Optional:
Return a function with the breadcrumb construction so anyone can build the breadcrumb how they want, like prism-react-renderer
does it here: https://github.com/FormidableLabs/prism-react-renderer/blob/master/README.md#usage
Currently I have to hardcode a lot of crumbLabelUpdates in gatsby-config.js and whenever the data changes, I also have to check whether those are still correct. Is there a way to generate the crumbLabelUpdates in gatsby-node.js?
Hello, I am using the "Sitemap Mode". I've included the gatsby-plugin-sitemap, generated the sitemap and it creates it correctly, but when I include this part in the plugins
{
resolve: `gatsby-plugin-breadcrumb`,
options: {
sitemapPath: `/my-site-map.xml`,
},
}
and run the app, I get:
ReferenceError: URL is not defined
- gatsby-node.js:38
[project-name]/[gatsby-plugin-breadcrumb]/gatsby-node.js:38:15
Thanks
Could you write more clear what does import 'gatsby-plugin-breadcrumb/gatsby-plugin-breadcrumb.css'
mean?
It's some runtime css creation? How I can override default styles? I'm trying to use plugin /w material-ui. Its a pity that in doesn't have native integration.
Currently working on this, using gatsby-plugin-sitemap
. . . more to come.
more to come after I have implemented this for gatsby-plugin-sitemap
There is an error with this repository's Renovate configuration that needs to be fixed. As a precaution, Renovate will stop PRs until it is resolved.
Error type: undefined. Note: this is a nested preset so please contact the preset author if you are unable to fix it yourself.
The plugin should have an option/work with builds that define a pathPrefix in gatsby-config. If one is defined, all location hrefs and Link
s are automatically prefixed with the pathPrefix, which breaks all the breadcrumb functionality.
The features are working well on the UI pages.
But when I tried to test the MyPage
which includes the plugin, it gave me the error:
TypeError: Cannot read properties of undefined (reading 'pathname')
The passing mocked data:
And I was using the AutoGen with version "gatsby-plugin-breadcrumb": "^12.3.2", and gatsby version is 5.10.0
{
resolve: gatsby-plugin-breadcrumb
,
options: {
useAutoGen: true,
autoGenHomeLabel: Home
,
excludeOptions: {
separator: '/'
},
crumbLabelUpdates: [
{
pathname: '/mypage',
crumbLabel: 'MyPage'
}
]
}
},
I'm guessing when I run the test it reads the location.pathname. Please let me know how to solve this issue which has blocked my commitment.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.