"ReferenceError: path is not defined" in my Gatsby project - reactjs

Background
I am trying to install gatsby-plugin-categories following the instructions at https://www.gatsbyjs.org/packages/gatsby-plugin-categories/ but they are either missing steps or I have something conflicting or missing in my code.
gatsby-config-js
module.exports = {
siteMetadata: {
title: `VLLG`,
description: `Village | California Campsites.`,
author: `Juan Gallardo`,
},
plugins: [
`gatsby-plugin-react-helmet`,
{
resolve: `gatsby-source-filesystem`,
options: {
name: `images`,
path: `${__dirname}/src/images`,
},
},
{
resolve: `gatsby-source-filesystem`,
options: {
name: `pages`,
path: `${__dirname}/src/pages/`,
},
},
{
resolve: "gatsby-plugin-categories",
options: {
templatePath: path.join(__dirname, "/src/templates/category.js")
}
},
{
resolve: `gatsby-transformer-remark`,
options: {
// CommonMark mode (default: true)
commonmark: true,
// Footnotes mode (default: true)
footnotes: true,
// Pedantic mode (default: true)
pedantic: true,
// GitHub Flavored Markdown mode (default: true)
gfm: true,
// Plugins configs
plugins: [],
},
},
`gatsby-transformer-sharp`,
`gatsby-plugin-sharp`,
{
resolve: `gatsby-plugin-manifest`,
options: {
name: `VLLG`,
short_name: `vllg`,
start_url: `/`,
background_color: `#663399`,
theme_color: `#663399`,
display: `minimal-ui`,
icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site.
},
},
],
}
src/templates/category.js
import React from "react";
import Helmet from "react-helmet";
import { graphql } from "gatsby";
import Layout from "../layout";
import PostListing from "../components/PostListing";
export default class CategoryTemplate extends React.Component {
render() {
const { pageContext, data } = this.props;
const { category } = pageContext;
return (
<Layout>
<div className="category-container">
<Helmet title={`Posts in category "${category}"`} />
<PostListing postEdges={data.allMarkdownRemark.edges} />
</div>
</Layout>
);
}
}
export const pageQuery = graphql`
query CategoryPage($category: String) {
allMarkdownRemark(
limit: 1000
filter: { fields: { category: { eq: $category } } }
) {
totalCount
edges {
node {
fields {
slug
category
}
excerpt
timeToRead
frontmatter {
title
tags
date
}
}
}
}
}
`;
they have one line that i find confusing, import PostListing from "../components/PostListing"; they never gave the sample code for that. And there is no starter that has what is in there
not sure if the solution would be there in that file or if i need to tweak something in my config.

can you try like your other paths
{
resolve: "gatsby-plugin-categories",
options: {
templatePath: `${__dirname}/src/templates/category.js`
}
}

Related

Gatsby config throw error on new Typescript project creation

Basically, every time that i create a TYPESCRIPT gatsby project, i get errors on the file gatsby-config.ts.
Errors are in bold font.
import type { GatsbyConfig } from "gatsby";
require('dotenv').config({
path: `.env.${process.env.NODE_ENV}`,
});
const strapiConfig = {
apiURL: process.env.STRAPI_API_URL,
accessToken: process.env.STRAPI_TOKEN,
collectionTypes: ['article', 'company', 'author'],
singleTypes: [],
};
const config: GatsbyConfig = {
siteMetadata: {
title: ``,
siteUrl: `https://www.yourdomain.tld`
},
plugins: ["gatsby-plugin-sass", {
resolve: 'gatsby-plugin-google-analytics',
options: {
"trackingId": "portfolio-vanny-1"
}
}, "gatsby-plugin-image", "gatsby-plugin-react-helmet", "gatsby-plugin-mdx", "gatsby-transformer-remark", "gatsby-plugin-sharp", "gatsby-transformer-sharp", {
resolve: 'gatsby-source-filesystem',
options: {
"name": "images",
"path": "./src/images/"
},
***__key: "images"***
}, {
resolve: 'gatsby-source-filesystem',
options: {
"name": "pages",
"path": "./src/pages/"
},
**__key: "pages"**
},
{
resolve: `gatsby-source-strapi`,
options: strapiConfig,
}]
};
export default config;
It seems that those errors doesnt affect anything on my project but its weird, i dont even touch the code and it throws me those errors.

gatsby-remark-images-medium-zoom not working

I am creating a blog with Gatsbyjs.
The content is taken from contentful and the content type is markdown.
graphql is:
contentfulBlogPost(id: { eq: $id }) {
content {
childMdx {
body
}
}
}
The acquired body is passed to the following components.
const Markdown = ({ children }) => (
<div>
<MDXProvider>
<MDXRenderer>{children}</MDXRenderer>
</MDXProvider>
</div>
)
<Markdown>{data.contentfulBlogPost.content.childMdx.body}</Markdown>
gatsby-config is:
{
resolve: `gatsby-plugin-mdx`,
options: {
plugins: [
`gatsby-remark-images`,
`gatsby-remark-images-medium-zoom`
],
gatsbyRemarkPlugins: [
{
resolve: `gatsby-remark-images`,
options: {
maxWidth: 500,
linkImagesToOriginal: false,
},
},
{
resolve: `gatsby-remark-images-medium-zoom`,
options: {}
},
],
},
},
Medium-zoom does not work with this configuration.
Thank you in advance.

"gatsby-node.js" threw an error while running the onCreateNode lifecycle: fmImagesToRelative is not a function

I built this project from the basic default gatsby starter with the astronaut
I don't know what I'm doing wrong because this project is very similar in terms of it's gatsby-node and gatsby-config to another project of mine. This error repeatedly keeps looping in the console
TypeError: fmImagesToRelative is not a function
- gatsby-node.js:38 Object.exports.onCreateNode
/Users/Sam/Documents/Projects_and_Code/Web_Dexter_V2/gatsby-node.js:38:3
- api-runner-node.js:330 runAPI
[Web_Dexter_V2]/[gatsby]/src/utils/api-runner-node.js:330:22
- api-runner-node.js:440 Promise.catch.decorateEvent.pluginName
[Web_Dexter_V2]/[gatsby]/src/utils/api-runner-node.js:440:17
- From previous event:
- api-runner-node.js:440 Promise.catch.decorateEvent.pluginName
[Web_Dexter_V2]/[gatsby]/src/utils/api-runner-node.js:440:9
- From previous event:
- api-runner-node.js:439
[Web_Dexter_V2]/[gatsby]/src/utils/api-runner-node.js:439:14
- timers.js:456 processImmediate
internal/timers.js:456:21
- From previous event:
...
gatsby-node.js
const { createFilePath } = require(`gatsby-source-filesystem`)
const { fmImagesToRelative } = require('gatsby-remark-relative-images');
const path = require("path")
exports.createPages = async ({ actions: { createPage }, graphql }) => {
const postTemplate = path.resolve(`src/components/ArticlePage/index.tsx`)
const result = await graphql(`
{
allMarkdownRemark(
sort: { order: DESC, fields: [frontmatter___date] }
) {
edges {
node {
fields {
slug
}
}
}
}
}
`)
if (result.errors) {
return Promise.reject(result.errors)
}
result.data.allMarkdownRemark.edges.forEach(({ node }) => {
createPage({
path: `${node.fields.slug}`,
component: postTemplate,
})
})
}
exports.onCreateNode = ({ node, getNode, actions }) => {
fmImagesToRelative(node)
if (node.internal.type === `MarkdownRemark`)
actions.createNodeField({
node,
name: `slug`,
value: createFilePath({ node, getNode, basePath: `pages`, trailingSlash: true}),
})
}
gatsby-config.js
const path = require(`path`)
module.exports = {
siteMetadata: {
title: `Web Dexter | Saskatoon Website Design and Mobile App Design`,
description: `Web Dexter is a web design, and mobile app design company located in Saskatoon, SK. We also do logo design and graphic design. (306)-241-7019.`,
author: `Web Dexter Design`,
authorDescription: "Saskatoon Web and App Design Company",
themeColor: "#d2f5fb",
siteUrl: "https://webdexter.ca",
socialLinks: {
facebook: "/",
instagram: "/",
linkedin: "https://linkedin.com/company/web-dexter",
twitter: "/"
}
// image: "https://suddenlysask.com/static/54f3be73c004e26215a4a0cbf82c4524/ad85c/suddenly-saskatchewan-logo.webp"
},
plugins: [
{
resolve: `gatsby-source-filesystem`,
options: {
name: `images`,
path: `${__dirname}/src/assets/images`,
},
},
{
resolve: `gatsby-source-filesystem`,
options: {
path: `${__dirname}/content/markdown/`,
name: `markdown-pages`,
},
},
{
resolve: `gatsby-plugin-create-client-paths`,
options: { prefixes: [
`/contact/*`,
] },
},
{
resolve: `gatsby-plugin-manifest`,
options: {
name: `gatsby-starter-default`,
short_name: `starter`,
start_url: `/`,
background_color: `#663399`,
theme_color: `#663399`,
display: `minimal-ui`,
icon: `src/assets/images/gatsby-icon.png`, // This path is relative to the root of the site.
},
},
{
resolve: `gatsby-transformer-remark`,
options: {
plugins: [
'gatsby-remark-relative-images',
{
resolve: `gatsby-remark-images`,
options: {
backgroundColor: "transparent",
maxWidth: "800",
disableBgImageOnAlpha: true,
linkImagesToOriginal: false,
withWebp: true,
loading: "eager"
},
},
],
},
},
{
resolve: 'gatsby-plugin-root-import',
options: {
"components": path.join(__dirname, "src/components"),
"styles": path.join(__dirname, "src/assets/styles"),
"interfaces": path.join(__dirname, "src/interfaces"),
"data": path.join(__dirname, 'src/data'),
"pages": path.join(__dirname, 'src/pages'),
"svg": path.join(__dirname, "src/assets/images/svg"),
"hooks": path.join(__dirname, "src/hooks"),
"types": path.join(__dirname, "src/types")
}
},
`gatsby-transformer-sharp`,
`gatsby-plugin-sharp`,
`gatsby-plugin-typescript`,
`gatsby-plugin-react-helmet`,
`gatsby-plugin-sass`,
`gatsby-plugin-offline`,
`gatsby-plugin-sitemap`,
`gatsby-plugin-netlify`,
// `gatsby-plugin-preact`,
`gatsby-transformer-json`,
{
resolve: `gatsby-source-filesystem`,
options: {
name: `data`,
path: `${__dirname}/src/data`
}
},
{
resolve: 'gatsby-plugin-react-svg',
options: {
rule: {
include: /svg/
}
}
},
{
resolve: `gatsby-plugin-purgecss`,
options: {
// printRejected: true, // Print removed selectors and processed file names
purgeOnly: ['src/assets/styles', 'src/components','node_modules/'],
ignore: ['node_modules/'],
whitelist: [],
whitelistPatterns: []
}
},
],
}
It has something to do with gatsby-remark-relative-images: "^2.0.2", the problem stopped happening when using version ^0.3.0 instead of ^2.0.2 or when using "gatsby-remark-relative-images-v2": "^0.1.5", instead. This is noted on their github page

path.resolve() was not pointing the templates/blogpost.js in gatsby application

I'm developing very basic blog application that display blog posts from markdown files. When i click each post, it will open on the new route with dynamically create page with createPages functionality. The problem is When i pointing the templates/blogpost.js in the gatsby-node.js.
It is showing like this.
Your site's "gatsby-node.js" created a page with a component that doesn't exist.
Error :
The path to the missing component is "C:\Users\viper\Desktop\react\gatsby\portfolio\imlohith\src\templates\blog.js"
The page object passed to createPage:
{
"path": "/post-four",
"component": "C:\\Users\\viper\\Desktop\\react\\gatsby\\portfolio\\imlohith\\src\\templates\\blog.js"
}
const postTemplate = path.resolve(`src/templates/blog.js`)
return graphql(`
{
allMarkdownRemark {
edges {
node {
html
id
frontmatter {
path
title
date
author
}
}
}
}
}
`).then(res => {
if (res.errors) {
return Promise.reject(res.errors)
}
res.data.allMarkdownRemark.edges.forEach(({ node }) => {
createPage({
path: node.frontmatter.path,
component: postTemplate,
})
})
})
}
Gatsby-congig.js file
const config = require('./config');
module.exports = {
pathPrefix: config.pathPrefix,
siteMetadata: {
title: config.siteTitle,
description: "This is awesome site awesome awesome"
},
plugins: [
'gatsby-plugin-react-helmet',
'gatsby-plugin-catch-links',
{
resolve: 'gatsby-source-filesystem',
options: {
path: `${__dirname}/src/pages`,
name: 'pages',
},
},
'gatsby-transformer-remark',
`gatsby-plugin-sharp`,
`gatsby-transformer-sharp`,
{
resolve: `gatsby-plugin-manifest`,
options: {
name: config.manifestName,
short_name: config.manifestShortName,
start_url: config.pathPrefix || config.manifestStartUrl,
background_color: config.manifestBackgroundColor,
theme_color: config.manifestThemeColor,
display: config.manifestDisplay,
icon: config.manifestIcon, // This path is relative to the root of the site.
},
},
'gatsby-plugin-sass',
'gatsby-plugin-offline',
],
};

Get all images from specific directory via GraphQL and Gatsby JS

I have three folders with images that will be loaded in multiple carousel components. Here is the folder structure, I would get all the images that in the collection folders.
src/
images/
collection1/
collection2/
collection3/
randomImage.jpg
randomImage.svg
components/
pages/
I currently have this query:
export const pageQuery = graphql`
query IndexQuery {
site {
siteMetadata {
title
}
}
heroFeaturedImage: imageSharp(id: { regex: "/war-room.jpg/" }) {
sizes(maxWidth: 1250, quality: 90) {
...GatsbyImageSharpSizes
}
}
allImageSharp {
edges {
node {
... on ImageSharp {
sizes(maxWidth: 1250, quality: 90) {
src
srcSet
originalName
}
}
}
}
}
}
`;
Here is my gatsby-config.js:
module.exports = {
siteMetadata: {
title: 'Get all images in directory test',
},
plugins: [
'gatsby-plugin-react-helmet',
'gatsby-plugin-styled-components',
`gatsby-transformer-sharp`,
`gatsby-plugin-sharp`,
{
resolve: `gatsby-source-filesystem`,
options: {
path: `${__dirname}/src/pages`,
name: 'pages',
},
},
{
resolve: `gatsby-source-filesystem`,
options: {
path: `${__dirname}/src/images`,
name: 'images',
},
},
{
resolve: `gatsby-source-filesystem`,
options: {
name: `collection1`,
path: `${__dirname}/src/images/collection1`,
},
},
{
resolve: `gatsby-plugin-google-fonts`,
options: {
fonts: [`Roboto\:300,400,500,600`, `Montserrat\:300,400,600,800`],
},
},
],
};
The issue with it is that returns ALL of the images in the project without a great way of organizing the specific images I want.
So how can I only get all of the images out of a specific directory (e.g. collection1)?
Couple things jump out at me, although I'm not sure if this solves it:
1) Kinda weird in gatsby-config.js you're calling gatsby-source-filesystem twice on what amounts to the same set of images. I think you could lose that call to the collection1 set, it's redundant as best I understand.
2) The allImageSharp query looks to be doing what it should, returning everything. Have you tried a query like:
export const pageQuery = graphql`
query IndexQuery {
site {
siteMetadata {
title
}
}
collectionOneImages: imageSharp(id: { regex: "^\/collection1\/?(?:[^\/]+\/?)*$" }) {
sizes(maxWidth: 1250, quality: 90) {
...GatsbyImageSharpSizes
}
}
collectionTwoImages: imageSharp(id: { regex: "^\/collection2\/?(?:[^\/]+\/?)*$" }) {
sizes(maxWidth: 1250, quality: 90) {
...GatsbyImageSharpSizes
}
}
collectionThreeImages: imageSharp(id: { regex: "^\/collection3\/?(?:[^\/]+\/?)*$" }) {
sizes(maxWidth: 1250, quality: 90) {
...GatsbyImageSharpSizes
}
}
}
`;
I'm not the best with regex, but those regex queries essentially mean, "give me any file after the collection#".

Resources