Popular New Releases in Gatsby
gatsby
v4.12
react-static
mkdocs-material
mkdocs-material-8.2.9
github-profile-readme-generator
GPRG v1.2.0
spectacle
v9.0.0
Popular Libraries in Gatsby
by gatsbyjs 
javascript
52745 MIT
Build blazing fast, modern apps and websites with React
by pedronauck typescript
21405 MIT
✍ It has never been so easy to document your things!
by jxnblk javascript
10574 MIT
♠️ React MDX-based presentation decks
by react-static javascript
9762 MIT
⚛️ 🚀 A progressive static site generator for React.
by squidfunk typescript
9310 MIT
Technical documentation that just works
by rahuldkjain javascript
9217 Apache-2.0
🚀 Generate GitHub profile README easily with the latest add-ons like visitors count, GitHub stats, etc using minimal UI.
by FormidableLabs typescript
9196 MIT
ReactJS based Presentation Library
by timarney javascript
8765 MIT
Override create-react-app webpack configs without ejecting
by tinacms typescript
7311 Apache-2.0
Open source editor that brings visual editing into React websites. A developer-centric CMS to build contextual and intuitive editing experience without sacrificing code quality.
Trending New libraries in Gatsby
by rahuldkjain javascript
9217 Apache-2.0
🚀 Generate GitHub profile README easily with the latest add-ons like visitors count, GitHub stats, etc using minimal UI.
by shuding javascript
3346 MIT
The Next.js Static Site Generator
by splitbee typescript
2230 MIT
A fast React renderer for Notion pages
by transitive-bullshit typescript
2210 MIT
Deploy your own Notion-powered website in minutes with Next.js and Vercel.
by jamstack-cms javascript
1631 MIT
A starter project for building performant ECommerce applications with Next.js and React
by plasmicapp typescript
1455 MIT
Visual page builder and web design tool for any website or web app tech stack
by iamvishnusankar typescript
1439 MIT
Sitemap generator for next.js. Generate sitemap(s) and robots.txt for all static/pre-rendered/dynamic/server-side pages.
by yihong0618 python
1368 MIT
Make your own running home page
by craigary javascript
1314 MIT
A static blog build on top of Notion and NextJS, deployed on Vercel.
Top Authors in Gatsby
1
51 Libraries
1330
2
50 Libraries
60441
3
35 Libraries
5815
4
26 Libraries
1021
5
21 Libraries
819
6
21 Libraries
391
7
18 Libraries
229
8
17 Libraries
1060
9
17 Libraries
85
10
16 Libraries
180
1
51 Libraries
1330
2
50 Libraries
60441
3
35 Libraries
5815
4
26 Libraries
1021
5
21 Libraries
819
6
21 Libraries
391
7
18 Libraries
229
8
17 Libraries
1060
9
17 Libraries
85
10
16 Libraries
180
Trending Kits in Gatsby
No Trending Kits are available at this moment for Gatsby
Trending Discussions on Gatsby
Restore scroll position when navigating with React Router 6
How to create schema customization to use optional field "featureImage" from gatsby blog
Can't require remark and rehype plugins for gatsby-plugin-mdx
Could not find a declaration file for module 'gatsby-plugin-dark-mode'
Node.js 17.0.1 Gatsby error - "digital envelope routines::unsupported ... ERR_OSSL_EVP_UNSUPPORTED"
Netlify says, "error Gatsby requires Node.js 14.15.0 or higher (you have v12.18.0)"—yet I have the newest Node version?
Migrate from react-router to react router v6
Gatsby deployment failure on AWS Amplify
How to change the background color of a parent component from inside a child component in react, gatsby
How to use Gatsbys wrapPageElement with Typescript in a local plugin?
QUESTION
Restore scroll position when navigating with React Router 6
Asked 2022-Mar-25 at 23:34How do I set up React Router 6 to restore scroll position when I navigate and when the browser window is refreshed?
React Router 5 has a page about scroll restoration, but I can't find anything about scrolling in the docs for v6, so I guess that you're supposed to handle this yourself with another package. Fair enough, but I can't find anything that's compatible with React Router 6.
The packages react-scroll-restoration and oaf-react-router require v5. (oaf-react-router does list that it supports v6, but the basic usage code example isn't compatible with v6, and the related issue #210 is still open.)
Gatsby and Next.js support scroll restoration out of the box, but I doesn't look like there's a neatly packaged package that you can just use.
This little demo app with server side rendered pages does what I want. Scroll position is restored when navigation back and forth and refreshing the browser window.
Here is the same app using React Router 6, where the scroll position isn't saved and restored, but actually reused between pages. The usual workaround for that is to scroll to the top whenever the page is navigated, but I am not interested in that behaviour.
Edit: React Query writes that the issue with scroll restoration is that pages are refetching data, thereby implying that if the data for rendering the pages is there, scroll restoration just works. I cannot confirm that, because my small React Router 6 app has the issue even without doing any data fetching at all. I feel like there is something small think I am missing in order to get it to work.
Rant: I am quite surprised that the typical answer to this issue is to call window.scrollTo(0, 0) when navigating. This only fixes the issue of the scroll position being transferred between pages. When the scroll position isn't restored, the user experience when navigating between pages is seriously deteriorated. I guess this is partly why pop-up windows have become so popular, but they bring a long suite of other UX issues, so I really want to avoid using them.
ANSWER
Answered 2022-Feb-05 at 16:52Thanks to this comment in oaf-react-router I was able to get it to work with React Router 6. There are a few caveats, though, so I do not consider this a viable solution for a professional web app.
As stated in this code comment,
oaf-react-routerhas to use the same version ofhistoryasreact-router-domdoes. That's whyHistoryRouteris exported asunstable_HistoryRouter. This solution does indeed feel quite unstable.oaf-react-routerdoes not restore the scroll position when refreshing a web page. I don't know if this can be achieved easily, and it's something that might be acceptable.
1import { createBrowserHistory } from 'history';
2import { wrapHistory } from 'oaf-react-router';
3import React from 'react';
4import ReactDOM from 'react-dom';
5import { unstable_HistoryRouter as HistoryRouter } from 'react-router-dom';
6
7const history = createBrowserHistory();
8wrapHistory(history);
9
10ReactDOM.render(
11 <React.StrictMode>
12 <HistoryRouter history={history}>
13 <App />
14 </HistoryRouter>
15 </React.StrictMode>,
16 document.getElementById('root')
17);
18
19QUESTION
How to create schema customization to use optional field "featureImage" from gatsby blog
Asked 2022-Mar-15 at 16:54I'm making a Gatsby blog as a side project.
I want to use the "featureImage" optional field in mdx frontmatter.
I tried to refer to the https://www.gatsbyjs.com/docs/reference/graphql-data-layer/schema-customization#creating-type-definitions document according to the error message, but it was difficult to understand.
This is part of my code.
index.js
1import React, { useEffect } from "react";
2import { graphql } from "gatsby";
3import { App, ContentCard, TagsNavi, User } from "../components";
4import { ContentWrapper } from "../elements";
5import { useDispatch, useTag } from "../store/StoreContext";
6import { ALL, SET_TAG, TAG } from "../constants";
7
8const IndexPage = ({ location, data }) => {
9 const {
10 allMdx: { edges },
11 } = data;
12
13 const tag = useTag();
14 const dispatch = useDispatch();
15
16 useEffect(() => {
17 const tagName = new URLSearchParams(location.search).get(TAG);
18 dispatch({ type: SET_TAG, tag: tagName || ALL });
19 }, [dispatch, location.search]);
20
21 return (
22 <App title="Home">
23 <div>
24 <ContentWrapper>
25 <User />
26 <TagsNavi />
27 {edges
28 .filter(
29 (edge) => edge.node.frontmatter.tags.includes(tag) || tag === ALL
30 )
31 .map((edge) => {
32 const { node } = edge;
33 return <ContentCard key={node.slug} {...node} />;
34 })}
35 </ContentWrapper>
36 </div>
37 </App>
38 );
39};
40
41export default IndexPage;
42
43export const pageQuery = graphql`
44 query AllPostsQuery {
45 allMdx(sort: { fields: frontmatter___date, order: DESC }) {
46 edges {
47 node {
48 slug
49 excerpt(pruneLength: 140, truncate: true)
50 frontmatter {
51 date(formatString: "MMMM DD, YYYY")
52 tags
53 title
54 featureImage {
55 childImageSharp {
56 gatsbyImageData
57 }
58 }
59 }
60 }
61 }
62 }
63 }
64`;
65gatsby-node.js
1import React, { useEffect } from "react";
2import { graphql } from "gatsby";
3import { App, ContentCard, TagsNavi, User } from "../components";
4import { ContentWrapper } from "../elements";
5import { useDispatch, useTag } from "../store/StoreContext";
6import { ALL, SET_TAG, TAG } from "../constants";
7
8const IndexPage = ({ location, data }) => {
9 const {
10 allMdx: { edges },
11 } = data;
12
13 const tag = useTag();
14 const dispatch = useDispatch();
15
16 useEffect(() => {
17 const tagName = new URLSearchParams(location.search).get(TAG);
18 dispatch({ type: SET_TAG, tag: tagName || ALL });
19 }, [dispatch, location.search]);
20
21 return (
22 <App title="Home">
23 <div>
24 <ContentWrapper>
25 <User />
26 <TagsNavi />
27 {edges
28 .filter(
29 (edge) => edge.node.frontmatter.tags.includes(tag) || tag === ALL
30 )
31 .map((edge) => {
32 const { node } = edge;
33 return <ContentCard key={node.slug} {...node} />;
34 })}
35 </ContentWrapper>
36 </div>
37 </App>
38 );
39};
40
41export default IndexPage;
42
43export const pageQuery = graphql`
44 query AllPostsQuery {
45 allMdx(sort: { fields: frontmatter___date, order: DESC }) {
46 edges {
47 node {
48 slug
49 excerpt(pruneLength: 140, truncate: true)
50 frontmatter {
51 date(formatString: "MMMM DD, YYYY")
52 tags
53 title
54 featureImage {
55 childImageSharp {
56 gatsbyImageData
57 }
58 }
59 }
60 }
61 }
62 }
63 }
64`;
65exports.createSchemaCustomization = ({ actions }) => {
66 const { createTypes } = actions;
67 const typeDefs = `
68 type MdxFrontmatter implements Node {
69 featureImage: File
70 }
71 `;
72 createTypes(typeDefs);
73};
74I tried this and it works when featureImage is not present. But if I have featureImage it doesn't work.
How can I create the functionality I want? Please help me.
I'm not good at English, so I use a translator so my words may be a little weird. Sorry.
The Codesandbox address is here. https://codesandbox.io/s/gatsby-starter-ki-demo-8fyty?file=/gatsby-node.js
When tested locally, GraphiQL playground output: "Cannot read property 'contentDigest' of undefined" terminal message: ERROR getNodeAndSavePathDependency failed for node id: undefined as it was not found in cache
warn You can't use childImageSharp together with undefined.undefined — use publicURL instead. The childImageSharp portion of the query in this file will return null: undefined
Browser console: Warning: Failed prop type: The prop image is marked as required in GatsbyImage, but its value is undefined.
[gatsby-plugin-image] Missing image prop
ANSWER
Answered 2022-Mar-15 at 16:54You may find this GitHub thread insightful. Following it, try using:
1import React, { useEffect } from "react";
2import { graphql } from "gatsby";
3import { App, ContentCard, TagsNavi, User } from "../components";
4import { ContentWrapper } from "../elements";
5import { useDispatch, useTag } from "../store/StoreContext";
6import { ALL, SET_TAG, TAG } from "../constants";
7
8const IndexPage = ({ location, data }) => {
9 const {
10 allMdx: { edges },
11 } = data;
12
13 const tag = useTag();
14 const dispatch = useDispatch();
15
16 useEffect(() => {
17 const tagName = new URLSearchParams(location.search).get(TAG);
18 dispatch({ type: SET_TAG, tag: tagName || ALL });
19 }, [dispatch, location.search]);
20
21 return (
22 <App title="Home">
23 <div>
24 <ContentWrapper>
25 <User />
26 <TagsNavi />
27 {edges
28 .filter(
29 (edge) => edge.node.frontmatter.tags.includes(tag) || tag === ALL
30 )
31 .map((edge) => {
32 const { node } = edge;
33 return <ContentCard key={node.slug} {...node} />;
34 })}
35 </ContentWrapper>
36 </div>
37 </App>
38 );
39};
40
41export default IndexPage;
42
43export const pageQuery = graphql`
44 query AllPostsQuery {
45 allMdx(sort: { fields: frontmatter___date, order: DESC }) {
46 edges {
47 node {
48 slug
49 excerpt(pruneLength: 140, truncate: true)
50 frontmatter {
51 date(formatString: "MMMM DD, YYYY")
52 tags
53 title
54 featureImage {
55 childImageSharp {
56 gatsbyImageData
57 }
58 }
59 }
60 }
61 }
62 }
63 }
64`;
65exports.createSchemaCustomization = ({ actions }) => {
66 const { createTypes } = actions;
67 const typeDefs = `
68 type MdxFrontmatter implements Node {
69 featureImage: File
70 }
71 `;
72 createTypes(typeDefs);
73};
74exports.createSchemaCustomization = ({ actions }) => {
75 const { createTypes } = actions
76
77 createTypes(`
78 type Mdx implements Node {
79 frontmatter: MdxFrontmatter!
80 }
81 type MdxFrontmatter {
82 featuredImage: File @fileByRelativePath
83 }
84 `)
85}
86The problem I assume in your implementation is that there were no internal nodes for Gatsby to treat your image so the resolver can't find the path to create childImageSharp. That's why the output was undefined.
Other useful threads:
Browser console: Warning: Failed prop type: The prop
imageis marked as required in GatsbyImage, but its value isundefined.
This one is because you are trying to render GatsbyImage whether exists or not, so you are not passing any image prop. You've not shared the logic in the component but add a simple ternary condition like:
1import React, { useEffect } from "react";
2import { graphql } from "gatsby";
3import { App, ContentCard, TagsNavi, User } from "../components";
4import { ContentWrapper } from "../elements";
5import { useDispatch, useTag } from "../store/StoreContext";
6import { ALL, SET_TAG, TAG } from "../constants";
7
8const IndexPage = ({ location, data }) => {
9 const {
10 allMdx: { edges },
11 } = data;
12
13 const tag = useTag();
14 const dispatch = useDispatch();
15
16 useEffect(() => {
17 const tagName = new URLSearchParams(location.search).get(TAG);
18 dispatch({ type: SET_TAG, tag: tagName || ALL });
19 }, [dispatch, location.search]);
20
21 return (
22 <App title="Home">
23 <div>
24 <ContentWrapper>
25 <User />
26 <TagsNavi />
27 {edges
28 .filter(
29 (edge) => edge.node.frontmatter.tags.includes(tag) || tag === ALL
30 )
31 .map((edge) => {
32 const { node } = edge;
33 return <ContentCard key={node.slug} {...node} />;
34 })}
35 </ContentWrapper>
36 </div>
37 </App>
38 );
39};
40
41export default IndexPage;
42
43export const pageQuery = graphql`
44 query AllPostsQuery {
45 allMdx(sort: { fields: frontmatter___date, order: DESC }) {
46 edges {
47 node {
48 slug
49 excerpt(pruneLength: 140, truncate: true)
50 frontmatter {
51 date(formatString: "MMMM DD, YYYY")
52 tags
53 title
54 featureImage {
55 childImageSharp {
56 gatsbyImageData
57 }
58 }
59 }
60 }
61 }
62 }
63 }
64`;
65exports.createSchemaCustomization = ({ actions }) => {
66 const { createTypes } = actions;
67 const typeDefs = `
68 type MdxFrontmatter implements Node {
69 featureImage: File
70 }
71 `;
72 createTypes(typeDefs);
73};
74exports.createSchemaCustomization = ({ actions }) => {
75 const { createTypes } = actions
76
77 createTypes(`
78 type Mdx implements Node {
79 frontmatter: MdxFrontmatter!
80 }
81 type MdxFrontmatter {
82 featuredImage: File @fileByRelativePath
83 }
84 `)
85}
86{data.someNode.featuredImage && <GatsbyImage image={data.someNode.featuredImage} /> }
87P.S: it's a pity the CodeSandbox issue and thanks for trying it
QUESTION
Can't require remark and rehype plugins for gatsby-plugin-mdx
Asked 2022-Mar-03 at 23:15I was trying to follow the documentation on including rehype plugins for gatsby-plugin-mdx. Specifically I was trying to use the rehype-slug plugin. I installed the packaged with npm and set my gatsby.config.js file to
1module.exports = {
2 siteMetadata: {
3 siteUrl: "https://www.yourdomain.tld",
4 title: "test Website",
5 },
6 plugins: [
7 {
8 resolve: "gatsby-plugin-mdx",
9 options:{
10 rehypePlugins: [
11 require("rehype-slug")
12 ]
13 }
14 }
15 ],
16};gatsby develop I encouter the following error:
Error: [ERR_REQUIRE_ESM]: Must use import to load ES Module: C:\Users\User\Documents\test-site\node_modules\rehype-slug\index.js require() of ES modules is not supported.
I encouter similar problems when trying to use the remark-math and rehype-katex plugins. I'm using version 3.13.0 of the Gatsby CLI. The problem persists even with a completely new website. Any help with this issue would be much appreciated.
ANSWER
Answered 2021-Sep-14 at 04:51Not sure if it will work but, instead of using require from ES modules have you tried something like:
1module.exports = {
2 siteMetadata: {
3 siteUrl: "https://www.yourdomain.tld",
4 title: "test Website",
5 },
6 plugins: [
7 {
8 resolve: "gatsby-plugin-mdx",
9 options:{
10 rehypePlugins: [
11 require("rehype-slug")
12 ]
13 }
14 }
15 ],
16};import slug from 'rehype-slug'
17
18module.exports = {
19 siteMetadata: {
20 siteUrl: "https://www.yourdomain.tld",
21 title: "test Website",
22 },
23 plugins: [
24 {
25 resolve: "gatsby-plugin-mdx",
26 options:{
27 rehypePlugins: [
28 slug
29 ]
30 }
31 }
32 ],
33};
34Based on: https://github.com/rehypejs/rehype-slug
Or directly importing in inside rehypePlugins as a dynamic import.
I've made a little bit of research and I found that dynamic imports are not supported because you can't access the value in the callback, so waiting for the import is not a solution either nor using an ES module.
However, the final solution (or at least the temporary working one) with your exact same use-case can be found in this GitHub discussion:
Update: I got the update to
rehype-slug@5.0.0in mygatsby-config.jsworking by installingesmandpatch-packageand:
Modifying the
gatsby-config.jsas follows (to allowrequire()with the pure ES Modules)
1module.exports = {
2 siteMetadata: {
3 siteUrl: "https://www.yourdomain.tld",
4 title: "test Website",
5 },
6 plugins: [
7 {
8 resolve: "gatsby-plugin-mdx",
9 options:{
10 rehypePlugins: [
11 require("rehype-slug")
12 ]
13 }
14 }
15 ],
16};import slug from 'rehype-slug'
17
18module.exports = {
19 siteMetadata: {
20 siteUrl: "https://www.yourdomain.tld",
21 title: "test Website",
22 },
23 plugins: [
24 {
25 resolve: "gatsby-plugin-mdx",
26 options:{
27 rehypePlugins: [
28 slug
29 ]
30 }
31 }
32 ],
33};
34require = require('esm')(module);
35
36module.exports = {
37 plugins: [
38 {
39 resolve: `gatsby-plugin-mdx`,
40 options: {
41 rehypePlugins: [
42 require('rehype-slug').default,
43Try running the Gatsby dev server and see what breaks. It will throw an error either like this:
1module.exports = {
2 siteMetadata: {
3 siteUrl: "https://www.yourdomain.tld",
4 title: "test Website",
5 },
6 plugins: [
7 {
8 resolve: "gatsby-plugin-mdx",
9 options:{
10 rehypePlugins: [
11 require("rehype-slug")
12 ]
13 }
14 }
15 ],
16};import slug from 'rehype-slug'
17
18module.exports = {
19 siteMetadata: {
20 siteUrl: "https://www.yourdomain.tld",
21 title: "test Website",
22 },
23 plugins: [
24 {
25 resolve: "gatsby-plugin-mdx",
26 options:{
27 rehypePlugins: [
28 slug
29 ]
30 }
31 }
32 ],
33};
34require = require('esm')(module);
35
36module.exports = {
37 plugins: [
38 {
39 resolve: `gatsby-plugin-mdx`,
40 options: {
41 rehypePlugins: [
42 require('rehype-slug').default,
43 Error: Must use import to load ES Module: /Users/k/p/project/node_modules/rehype-slug/index.js
44 require() of ES modules is not supported.
45 require() of /Users/k/p/project/node_modules/rehype-slug/index.js from /Users/k/p/project/gatsby-config.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
46 Instead rename index.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from /Users/k/p/project/node_modules/rehype-slug/package.json.
47...or like this:
1module.exports = {
2 siteMetadata: {
3 siteUrl: "https://www.yourdomain.tld",
4 title: "test Website",
5 },
6 plugins: [
7 {
8 resolve: "gatsby-plugin-mdx",
9 options:{
10 rehypePlugins: [
11 require("rehype-slug")
12 ]
13 }
14 }
15 ],
16};import slug from 'rehype-slug'
17
18module.exports = {
19 siteMetadata: {
20 siteUrl: "https://www.yourdomain.tld",
21 title: "test Website",
22 },
23 plugins: [
24 {
25 resolve: "gatsby-plugin-mdx",
26 options:{
27 rehypePlugins: [
28 slug
29 ]
30 }
31 }
32 ],
33};
34require = require('esm')(module);
35
36module.exports = {
37 plugins: [
38 {
39 resolve: `gatsby-plugin-mdx`,
40 options: {
41 rehypePlugins: [
42 require('rehype-slug').default,
43 Error: Must use import to load ES Module: /Users/k/p/project/node_modules/rehype-slug/index.js
44 require() of ES modules is not supported.
45 require() of /Users/k/p/project/node_modules/rehype-slug/index.js from /Users/k/p/project/gatsby-config.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
46 Instead rename index.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from /Users/k/p/project/node_modules/rehype-slug/package.json.
47 Error: /Users/k/p/project/gatsby-config.js:1
48 Error: Must use import to load ES Module: /Users/k/p/project/node_modules/rehype-slug/index.js
49Make a note of the location of the pure ES Modules package so that you can locate the package.json file corresponding to the pure ESM package and manually remove the line with "type": "module", like this:
1module.exports = {
2 siteMetadata: {
3 siteUrl: "https://www.yourdomain.tld",
4 title: "test Website",
5 },
6 plugins: [
7 {
8 resolve: "gatsby-plugin-mdx",
9 options:{
10 rehypePlugins: [
11 require("rehype-slug")
12 ]
13 }
14 }
15 ],
16};import slug from 'rehype-slug'
17
18module.exports = {
19 siteMetadata: {
20 siteUrl: "https://www.yourdomain.tld",
21 title: "test Website",
22 },
23 plugins: [
24 {
25 resolve: "gatsby-plugin-mdx",
26 options:{
27 rehypePlugins: [
28 slug
29 ]
30 }
31 }
32 ],
33};
34require = require('esm')(module);
35
36module.exports = {
37 plugins: [
38 {
39 resolve: `gatsby-plugin-mdx`,
40 options: {
41 rehypePlugins: [
42 require('rehype-slug').default,
43 Error: Must use import to load ES Module: /Users/k/p/project/node_modules/rehype-slug/index.js
44 require() of ES modules is not supported.
45 require() of /Users/k/p/project/node_modules/rehype-slug/index.js from /Users/k/p/project/gatsby-config.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
46 Instead rename index.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from /Users/k/p/project/node_modules/rehype-slug/package.json.
47 Error: /Users/k/p/project/gatsby-config.js:1
48 Error: Must use import to load ES Module: /Users/k/p/project/node_modules/rehype-slug/index.js
49- "type": "module",
50Run yarn patch-package <pkg name> --exclude '^$', which will record the changes that you have made in the package.json file (to be reapplied by patch-package every time that you run yarn or npm install). Examples:
1module.exports = {
2 siteMetadata: {
3 siteUrl: "https://www.yourdomain.tld",
4 title: "test Website",
5 },
6 plugins: [
7 {
8 resolve: "gatsby-plugin-mdx",
9 options:{
10 rehypePlugins: [
11 require("rehype-slug")
12 ]
13 }
14 }
15 ],
16};import slug from 'rehype-slug'
17
18module.exports = {
19 siteMetadata: {
20 siteUrl: "https://www.yourdomain.tld",
21 title: "test Website",
22 },
23 plugins: [
24 {
25 resolve: "gatsby-plugin-mdx",
26 options:{
27 rehypePlugins: [
28 slug
29 ]
30 }
31 }
32 ],
33};
34require = require('esm')(module);
35
36module.exports = {
37 plugins: [
38 {
39 resolve: `gatsby-plugin-mdx`,
40 options: {
41 rehypePlugins: [
42 require('rehype-slug').default,
43 Error: Must use import to load ES Module: /Users/k/p/project/node_modules/rehype-slug/index.js
44 require() of ES modules is not supported.
45 require() of /Users/k/p/project/node_modules/rehype-slug/index.js from /Users/k/p/project/gatsby-config.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
46 Instead rename index.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from /Users/k/p/project/node_modules/rehype-slug/package.json.
47 Error: /Users/k/p/project/gatsby-config.js:1
48 Error: Must use import to load ES Module: /Users/k/p/project/node_modules/rehype-slug/index.js
49- "type": "module",
50# For a top-level dependency
51yarn patch-package rehype-slug --exclude '^$'
52
53# For a transitive dependency
54yarn patch-package rehype-slug/unist-util-visit --exclude '^$'
55Run the Gatsby dev server again, and repeat step 3 and 4 for every pure ESM package.
At that point, I could start the Gatsby dev server with the new pure ESM dependency versions.
cc @Ir1d @kimbaudi @wardpeet @LekoArts
Caveat: In my specific case, I needed to also patch one of the dependencies (hast-util-heading-rank) because I was getting an undefined node.tagName, but I think this is unrelated to this problem - probably related to a different issue.
All credits to the magician involved
QUESTION
Could not find a declaration file for module 'gatsby-plugin-dark-mode'
Asked 2022-Feb-17 at 09:47I'm getting the below error, trying to import ThemeToggler from gatsby-plugin-dark-mode
1module "C:/Users/Karim Elnemr/Desktop/my-gatsby-website/node_modules/gatsby-plugin-dark-mode/index"
2Could not find a declaration file for module 'gatsby-plugin-dark-mode'. 'C:/Users/Karim Elnemr/Desktop/my-gatsby-website/node_modules/gatsby-plugin-dark-mode/index.js' implicitly has an 'any' type.
3 Try `npm i --save-dev @types/gatsby-plugin-dark-mode` if it exists or add a new declaration (.d.ts) file containing `declare module 'gatsby-plugin-dark-mode';`ts(7016)
4also I'm getting this errors on the terminal for ever I try to install the blugin
1module "C:/Users/Karim Elnemr/Desktop/my-gatsby-website/node_modules/gatsby-plugin-dark-mode/index"
2Could not find a declaration file for module 'gatsby-plugin-dark-mode'. 'C:/Users/Karim Elnemr/Desktop/my-gatsby-website/node_modules/gatsby-plugin-dark-mode/index.js' implicitly has an 'any' type.
3 Try `npm i --save-dev @types/gatsby-plugin-dark-mode` if it exists or add a new declaration (.d.ts) file containing `declare module 'gatsby-plugin-dark-mode';`ts(7016)
4npm ERR! code ERESOLVE
5npm ERR! ERESOLVE unable to resolve dependency tree
6npm ERR!
7npm ERR! While resolving: gatsby-starter-hello-world@0.1.0
8npm ERR! Found: react@17.0.2
9npm ERR! node_modules/react
10npm ERR! react@"^17.0.1" from the root project
11npm ERR!
12npm ERR! Could not resolve dependency:
13npm ERR! peer react@"16.x" from gatsby-plugin-dark-mode@1.1.2
14npm ERR! node_modules/gatsby-plugin-dark-mode
15npm ERR! gatsby-plugin-dark-mode@"^1.1.2" from the root project
16npm ERR!
17npm ERR! Fix the upstream dependency conflict, or retry
18npm ERR! this command with --force, or --legacy-peer-deps
19npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
20npm ERR!
21down below is where I imported the said plugin
1module "C:/Users/Karim Elnemr/Desktop/my-gatsby-website/node_modules/gatsby-plugin-dark-mode/index"
2Could not find a declaration file for module 'gatsby-plugin-dark-mode'. 'C:/Users/Karim Elnemr/Desktop/my-gatsby-website/node_modules/gatsby-plugin-dark-mode/index.js' implicitly has an 'any' type.
3 Try `npm i --save-dev @types/gatsby-plugin-dark-mode` if it exists or add a new declaration (.d.ts) file containing `declare module 'gatsby-plugin-dark-mode';`ts(7016)
4npm ERR! code ERESOLVE
5npm ERR! ERESOLVE unable to resolve dependency tree
6npm ERR!
7npm ERR! While resolving: gatsby-starter-hello-world@0.1.0
8npm ERR! Found: react@17.0.2
9npm ERR! node_modules/react
10npm ERR! react@"^17.0.1" from the root project
11npm ERR!
12npm ERR! Could not resolve dependency:
13npm ERR! peer react@"16.x" from gatsby-plugin-dark-mode@1.1.2
14npm ERR! node_modules/gatsby-plugin-dark-mode
15npm ERR! gatsby-plugin-dark-mode@"^1.1.2" from the root project
16npm ERR!
17npm ERR! Fix the upstream dependency conflict, or retry
18npm ERR! this command with --force, or --legacy-peer-deps
19npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
20npm ERR!
21import React from "react"
22import { ThemeToggler } from "gatsby-plugin-dark-mode"
23
24export default function ThemeToggle() {
25 return (
26 <ThemeToggler>
27 {({ theme, toggleTheme }) => {
28 if (theme == null) {
29 return null
30 }
31 return (
32 <label className="theme-switch">
33 <input
34 type="checkbox"
35 onChange={e => toggleTheme(e.target.checked ? "dark" : "light")}
36 checked={theme === "dark"}
37 />
38 <span className="toggle"></span>
39 </label>
40 )
41 }}
42 </ThemeToggler>
43 )
44}
45need some explanation what dose it mean and why it's happening so I can solve it.
ANSWER
Answered 2022-Feb-17 at 08:33You can simply do : npm i gatsby-plugin-dark-mode --force
QUESTION
Node.js 17.0.1 Gatsby error - "digital envelope routines::unsupported ... ERR_OSSL_EVP_UNSUPPORTED"
Asked 2022-Feb-13 at 04:42I am building a Gatsby site. I upgraded Node.js to v17.0.1, and when I run a build, there is an error:
1Error: digital envelope routines::unsupported
2
3opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
4library: 'digital envelope routines',
5reason: 'unsupported',
6code: 'ERR_OSSL_EVP_UNSUPPORTED'
7If I downgrade it to v16, it works fine, and the build will be successful. How can I fix this?
From googling, this may be a similar issue: Error: error:06065064:digital envelope routines:EVP_DecryptFinal_ex:bad decrypt #48
ANSWER
Answered 2022-Jan-04 at 23:33Gatsby must be using an algorithm or key size which is no longer allowed by default with OpenSSL 3.0.
UPDATE ⚠️This is most likely a webpack issue - https://github.com/webpack/webpack/issues/14532
They have since released a fix in version 5.61.0 - https://github.com/webpack/webpack/releases/tag/v5.61.0 - so upgrading webpack should address the issue as well
A member of the webpack team has stated they do not plan to backport the fix to webpack 4, so if you are on webpack 4 you may need to look to upgrading to webpack 5 first.
From Node.js 17's announcement post:
If you hit an
ERR_OSSL_EVP_UNSUPPORTEDerror in your application with Node.js 17, it’s likely that your application or a module you’re using is attempting to use an algorithm or key size which is no longer allowed by default with OpenSSL 3.0. A new command-line option,--openssl-legacy-provider, has been added to revert to the legacy provider as a temporary workaround for these tightened restrictions.
Running this on the terminal might look like:
1Error: digital envelope routines::unsupported
2
3opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
4library: 'digital envelope routines',
5reason: 'unsupported',
6code: 'ERR_OSSL_EVP_UNSUPPORTED'
7node --openssl-legacy-provider ./node_modules/.bin/gatsby build
8You can also pass this in via the NODE_OPTIONS environment variable.
So if you'd like to continue using the NPM script, you can change the build script to:
1Error: digital envelope routines::unsupported
2
3opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
4library: 'digital envelope routines',
5reason: 'unsupported',
6code: 'ERR_OSSL_EVP_UNSUPPORTED'
7node --openssl-legacy-provider ./node_modules/.bin/gatsby build
8// package.json
9{
10 "scripts": {
11 "build": "export NODE_OPTIONS=--openssl-legacy-provider; gatsby build"
12 }
13}
14QUESTION
Netlify says, "error Gatsby requires Node.js 14.15.0 or higher (you have v12.18.0)"—yet I have the newest Node version?
Asked 2022-Jan-08 at 07:21After migrating from Remark to MDX, my builds on Netlify are failing.
I get this error when trying to build:
110:13:28 AM: $ npm run build
210:13:29 AM: > blog-gatsby@0.1.0 build /opt/build/repo
310:13:29 AM: > gatsby build
410:13:30 AM: error Gatsby requires Node.js 14.15.0 or higher (you have v12.18.0).
510:13:30 AM: Upgrade Node to the latest stable release: https://gatsby.dev/upgrading-node-js
6Yet when I run node -v in my terminal, it says v17.2.0.
I assume it's not a coincidence that this happened after migrating. Can the problem be because of my node-modules folder? Or is there something in my gatsby-config.js or package.json files I need to change?
My package.json file:
110:13:28 AM: $ npm run build
210:13:29 AM: > blog-gatsby@0.1.0 build /opt/build/repo
310:13:29 AM: > gatsby build
410:13:30 AM: error Gatsby requires Node.js 14.15.0 or higher (you have v12.18.0).
510:13:30 AM: Upgrade Node to the latest stable release: https://gatsby.dev/upgrading-node-js
6{
7 "name": "blog-gatsby",
8 "private": true,
9 "description": "A starter for a blog powered by Gatsby and Markdown",
10 "version": "0.1.0",
11 "author": "Magnus Kolstad <kolstadmagnus@gmail.com>",
12 "bugs": {
13 "url": "https://kolstadmagnus.no"
14 },
15 "dependencies": {
16 "@mdx-js/mdx": "^1.6.22",
17 "@mdx-js/react": "^1.6.22",
18 "gatsby": "^4.3.0",
19 "gatsby-plugin-feed": "^4.3.0",
20 "gatsby-plugin-gatsby-cloud": "^4.3.0",
21 "gatsby-plugin-google-analytics": "^4.3.0",
22 "gatsby-plugin-image": "^2.3.0",
23 "gatsby-plugin-manifest": "^4.3.0",
24 "gatsby-plugin-mdx": "^3.4.0",
25 "gatsby-plugin-offline": "^5.3.0",
26 "gatsby-plugin-react-helmet": "^5.3.0",
27 "gatsby-plugin-sharp": "^4.3.0",
28 "gatsby-remark-copy-linked-files": "^5.3.0",
29 "gatsby-remark-images": "^6.3.0",
30 "gatsby-remark-prismjs": "^6.3.0",
31 "gatsby-remark-responsive-iframe": "^5.3.0",
32 "gatsby-remark-smartypants": "^5.3.0",
33 "gatsby-source-filesystem": "^4.3.0",
34 "gatsby-transformer-sharp": "^4.3.0",
35 "prismjs": "^1.25.0",
36 "react": "^17.0.1",
37 "react-dom": "^17.0.1",
38 "react-helmet": "^6.1.0",
39 "typeface-merriweather": "0.0.72",
40 "typeface-montserrat": "0.0.75"
41 },
42 "devDependencies": {
43 "prettier": "^2.4.1"
44 },
45 "homepage": "https://kolstadmagnus.no",
46 "keywords": [
47 "blog"
48 ],
49 "license": "0BSD",
50 "main": "n/a",
51 "repository": {
52 "type": "git",
53 "url": "git+https://github.com/gatsbyjs/gatsby-starter-blog.git"
54 },
55 "scripts": {
56 "build": "gatsby build",
57 "develop": "gatsby develop",
58 "format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,md}\"",
59 "start": "gatsby develop",
60 "serve": "gatsby serve",
61 "clean": "gatsby clean",
62 "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1"
63 }
64}
65What am I doing wrong here?
Update #1
110:13:28 AM: $ npm run build
210:13:29 AM: > blog-gatsby@0.1.0 build /opt/build/repo
310:13:29 AM: > gatsby build
410:13:30 AM: error Gatsby requires Node.js 14.15.0 or higher (you have v12.18.0).
510:13:30 AM: Upgrade Node to the latest stable release: https://gatsby.dev/upgrading-node-js
6{
7 "name": "blog-gatsby",
8 "private": true,
9 "description": "A starter for a blog powered by Gatsby and Markdown",
10 "version": "0.1.0",
11 "author": "Magnus Kolstad <kolstadmagnus@gmail.com>",
12 "bugs": {
13 "url": "https://kolstadmagnus.no"
14 },
15 "dependencies": {
16 "@mdx-js/mdx": "^1.6.22",
17 "@mdx-js/react": "^1.6.22",
18 "gatsby": "^4.3.0",
19 "gatsby-plugin-feed": "^4.3.0",
20 "gatsby-plugin-gatsby-cloud": "^4.3.0",
21 "gatsby-plugin-google-analytics": "^4.3.0",
22 "gatsby-plugin-image": "^2.3.0",
23 "gatsby-plugin-manifest": "^4.3.0",
24 "gatsby-plugin-mdx": "^3.4.0",
25 "gatsby-plugin-offline": "^5.3.0",
26 "gatsby-plugin-react-helmet": "^5.3.0",
27 "gatsby-plugin-sharp": "^4.3.0",
28 "gatsby-remark-copy-linked-files": "^5.3.0",
29 "gatsby-remark-images": "^6.3.0",
30 "gatsby-remark-prismjs": "^6.3.0",
31 "gatsby-remark-responsive-iframe": "^5.3.0",
32 "gatsby-remark-smartypants": "^5.3.0",
33 "gatsby-source-filesystem": "^4.3.0",
34 "gatsby-transformer-sharp": "^4.3.0",
35 "prismjs": "^1.25.0",
36 "react": "^17.0.1",
37 "react-dom": "^17.0.1",
38 "react-helmet": "^6.1.0",
39 "typeface-merriweather": "0.0.72",
40 "typeface-montserrat": "0.0.75"
41 },
42 "devDependencies": {
43 "prettier": "^2.4.1"
44 },
45 "homepage": "https://kolstadmagnus.no",
46 "keywords": [
47 "blog"
48 ],
49 "license": "0BSD",
50 "main": "n/a",
51 "repository": {
52 "type": "git",
53 "url": "git+https://github.com/gatsbyjs/gatsby-starter-blog.git"
54 },
55 "scripts": {
56 "build": "gatsby build",
57 "develop": "gatsby develop",
58 "format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,md}\"",
59 "start": "gatsby develop",
60 "serve": "gatsby serve",
61 "clean": "gatsby clean",
62 "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1"
63 }
64}
657:11:59 PM: failed Building production JavaScript and CSS bundles - 20.650s
667:11:59 PM: error Generating JavaScript bundles failed
677:11:59 PM: Module build failed (from ./node_modules/url-loader/dist/cjs.js):
687:11:59 PM: Error: error:0308010C:digital envelope routines::unsupported
697:11:59 PM: at new Hash (node:internal/crypto/hash:67:19)
707:11:59 PM: at Object.createHash (node:crypto:130:10)
717:11:59 PM: at getHashDigest (/opt/build/repo/node_modules/file-loader/node_modules/loader-utils/lib/getHashDigest.js:46:34)
727:11:59 PM: at /opt/build/repo/node_modules/file-loader/node_modules/loader-utils/lib/interpolateName.js:113:11
737:11:59 PM: at String.replace (<anonymous>)
747:11:59 PM: at interpolateName (/opt/build/repo/node_modules/file-loader/node_modules/loader-utils/lib/interpolateName.js:110:8)
757:11:59 PM: at Object.loader (/opt/build/repo/node_modules/file-loader/dist/index.js:29:48)
767:11:59 PM: at Object.loader (/opt/build/repo/node_modules/url-loader/dist/index.js:127:19)
777:11:59 PM:
787:11:59 PM: ────────────────────────────────────────────────────────────────
797:11:59 PM: "build.command" failed
807:11:59 PM: ────────────────────────────────────────────────────────────────
817:11:59 PM:
827:11:59 PM: Error message
837:11:59 PM: Command failed with exit code 1: npm run build
847:11:59 PM:
857:11:59 PM: Error location
867:11:59 PM: In Build command from Netlify app:
877:11:59 PM: npm run build
887:11:59 PM:
897:11:59 PM: Resolved config
907:11:59 PM: build:
917:11:59 PM: command: npm run build
927:11:59 PM: commandOrigin: ui
937:11:59 PM: publish: /opt/build/repo/public
947:11:59 PM: publishOrigin: ui
957:11:59 PM: plugins:
967:11:59 PM: - inputs: {}
977:11:59 PM: origin: ui
987:11:59 PM: package: '@netlify/plugin-gatsby'
997:11:59 PM: redirects:
1007:12:00 PM: - from: /api/*
101 status: 200
102 to: /.netlify/functions/gatsby
103 - force: true
104 from: https://magnuskolstad.com
105 status: 301
106 to: https://kolstadmagnus.no
107 redirectsOrigin: config
108Caching artifacts
109ANSWER
Answered 2022-Jan-08 at 07:21The problem is that you have Node 17.2.0. locally but in Netlify's environment, you are running a lower version (by default it's not set as 17.2.0). So the local environment is OK, Netlify environment is KO because of this mismatch of Node versions.
When Netlify deploys your site it installs and builds again your site so you should ensure that both environments work under the same conditions. Otherwise, both node_modules will differ so your application will have different behavior or eventually won't even build because of dependency errors.
You can easily play with the Node version in multiple ways but I'd recommend using the .nvmrc file. Just run the following command in the root of your project:
110:13:28 AM: $ npm run build
210:13:29 AM: > blog-gatsby@0.1.0 build /opt/build/repo
310:13:29 AM: > gatsby build
410:13:30 AM: error Gatsby requires Node.js 14.15.0 or higher (you have v12.18.0).
510:13:30 AM: Upgrade Node to the latest stable release: https://gatsby.dev/upgrading-node-js
6{
7 "name": "blog-gatsby",
8 "private": true,
9 "description": "A starter for a blog powered by Gatsby and Markdown",
10 "version": "0.1.0",
11 "author": "Magnus Kolstad <kolstadmagnus@gmail.com>",
12 "bugs": {
13 "url": "https://kolstadmagnus.no"
14 },
15 "dependencies": {
16 "@mdx-js/mdx": "^1.6.22",
17 "@mdx-js/react": "^1.6.22",
18 "gatsby": "^4.3.0",
19 "gatsby-plugin-feed": "^4.3.0",
20 "gatsby-plugin-gatsby-cloud": "^4.3.0",
21 "gatsby-plugin-google-analytics": "^4.3.0",
22 "gatsby-plugin-image": "^2.3.0",
23 "gatsby-plugin-manifest": "^4.3.0",
24 "gatsby-plugin-mdx": "^3.4.0",
25 "gatsby-plugin-offline": "^5.3.0",
26 "gatsby-plugin-react-helmet": "^5.3.0",
27 "gatsby-plugin-sharp": "^4.3.0",
28 "gatsby-remark-copy-linked-files": "^5.3.0",
29 "gatsby-remark-images": "^6.3.0",
30 "gatsby-remark-prismjs": "^6.3.0",
31 "gatsby-remark-responsive-iframe": "^5.3.0",
32 "gatsby-remark-smartypants": "^5.3.0",
33 "gatsby-source-filesystem": "^4.3.0",
34 "gatsby-transformer-sharp": "^4.3.0",
35 "prismjs": "^1.25.0",
36 "react": "^17.0.1",
37 "react-dom": "^17.0.1",
38 "react-helmet": "^6.1.0",
39 "typeface-merriweather": "0.0.72",
40 "typeface-montserrat": "0.0.75"
41 },
42 "devDependencies": {
43 "prettier": "^2.4.1"
44 },
45 "homepage": "https://kolstadmagnus.no",
46 "keywords": [
47 "blog"
48 ],
49 "license": "0BSD",
50 "main": "n/a",
51 "repository": {
52 "type": "git",
53 "url": "git+https://github.com/gatsbyjs/gatsby-starter-blog.git"
54 },
55 "scripts": {
56 "build": "gatsby build",
57 "develop": "gatsby develop",
58 "format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,md}\"",
59 "start": "gatsby develop",
60 "serve": "gatsby serve",
61 "clean": "gatsby clean",
62 "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1"
63 }
64}
657:11:59 PM: failed Building production JavaScript and CSS bundles - 20.650s
667:11:59 PM: error Generating JavaScript bundles failed
677:11:59 PM: Module build failed (from ./node_modules/url-loader/dist/cjs.js):
687:11:59 PM: Error: error:0308010C:digital envelope routines::unsupported
697:11:59 PM: at new Hash (node:internal/crypto/hash:67:19)
707:11:59 PM: at Object.createHash (node:crypto:130:10)
717:11:59 PM: at getHashDigest (/opt/build/repo/node_modules/file-loader/node_modules/loader-utils/lib/getHashDigest.js:46:34)
727:11:59 PM: at /opt/build/repo/node_modules/file-loader/node_modules/loader-utils/lib/interpolateName.js:113:11
737:11:59 PM: at String.replace (<anonymous>)
747:11:59 PM: at interpolateName (/opt/build/repo/node_modules/file-loader/node_modules/loader-utils/lib/interpolateName.js:110:8)
757:11:59 PM: at Object.loader (/opt/build/repo/node_modules/file-loader/dist/index.js:29:48)
767:11:59 PM: at Object.loader (/opt/build/repo/node_modules/url-loader/dist/index.js:127:19)
777:11:59 PM:
787:11:59 PM: ────────────────────────────────────────────────────────────────
797:11:59 PM: "build.command" failed
807:11:59 PM: ────────────────────────────────────────────────────────────────
817:11:59 PM:
827:11:59 PM: Error message
837:11:59 PM: Command failed with exit code 1: npm run build
847:11:59 PM:
857:11:59 PM: Error location
867:11:59 PM: In Build command from Netlify app:
877:11:59 PM: npm run build
887:11:59 PM:
897:11:59 PM: Resolved config
907:11:59 PM: build:
917:11:59 PM: command: npm run build
927:11:59 PM: commandOrigin: ui
937:11:59 PM: publish: /opt/build/repo/public
947:11:59 PM: publishOrigin: ui
957:11:59 PM: plugins:
967:11:59 PM: - inputs: {}
977:11:59 PM: origin: ui
987:11:59 PM: package: '@netlify/plugin-gatsby'
997:11:59 PM: redirects:
1007:12:00 PM: - from: /api/*
101 status: 200
102 to: /.netlify/functions/gatsby
103 - force: true
104 from: https://magnuskolstad.com
105 status: 301
106 to: https://kolstadmagnus.no
107 redirectsOrigin: config
108Caching artifacts
109node -v > .nvmrc
110This should create a .nvmrc file containing the Node version (node -v) in it. When Netlify finds this file during the build process, it uses it as a base Node version so it installs all the dependencies accordingly.
The file is also useful to tell other contributors which Node version are you using.
QUESTION
Migrate from react-router to react router v6
Asked 2021-Dec-13 at 18:34I am trying to complete this tutorial Securing Gatsby With Auth0, but have hit a roadblock due to reach/router not being compatible with react 17. After a bit of googling around, I found this issue Which router project to use moving forward which has a migration guide: Migrate to React Router from Reach
However, as a beginner, I am not well versed enough to make sense of what it contains.
The source code from the tutorial is as follows:
1import React from "react"
2import { Router } from "@reach/router"
3import { Link } from "gatsby"
4
5const Home = () => <p>Home</p>
6const Settings = () => <p>Settings</p>
7const Billing = () => <p>Billing</p>
8
9const Account = () => (
10 <>
11 <nav>
12 <Link to="/account">Home</Link>{" "}
13 <Link to="/account/settings">Settings</Link>{" "}
14 <Link to="/account/billing">Billing</Link>{" "}
15 </nav>
16 <Router>
17 <Home path="/account" />
18 <Settings path="/account/settings" />
19 <Billing path="/account/billing" />
20 </Router>
21 </>
22)
23
24export default Account
25From the migration guide update router to routes, I have changed this to:
1import React from "react"
2import { Router } from "@reach/router"
3import { Link } from "gatsby"
4
5const Home = () => <p>Home</p>
6const Settings = () => <p>Settings</p>
7const Billing = () => <p>Billing</p>
8
9const Account = () => (
10 <>
11 <nav>
12 <Link to="/account">Home</Link>{" "}
13 <Link to="/account/settings">Settings</Link>{" "}
14 <Link to="/account/billing">Billing</Link>{" "}
15 </nav>
16 <Router>
17 <Home path="/account" />
18 <Settings path="/account/settings" />
19 <Billing path="/account/billing" />
20 </Router>
21 </>
22)
23
24export default Account
25import React from "react"
26import { Link } from "gatsby"
27import { Routes } from "react-router-dom";
28
29const Home = () => <p>Home</p>
30const Settings = () => <p>Settings</p>
31const Billing = () => <p>Billing</p>
32
33const Account = () => (
34 <>
35 <nav>
36 <Link to="/account">Home</Link>{" "}
37 <Link to="/account/settings">Settings</Link>{" "}
38 <Link to="/account/billing">Billing</Link>{" "}
39 </nav>
40 <Routes>
41 <Home path="/account" />
42 <Settings path="/account/settings" />
43 <Billing path="/account/billing" />
44 </Routes>
45 </>
46)
47
48export default Account
49So in essence, replace Router with Routes. Now this compiles successfully, but fails at run time with this error:
[Home] is not a
<Route>component. All component children of<Routes>must be a<Route>or<React.Fragment>
So Home, Settings, and Billing are deemed not to be <Route\> or <React.Fragment\>
This is a simple example, for somebody well versed in react-router. I am just learning this stuff so having some difficulty. I have asked auth0 to update this tutorial but have no idea when this will be actioned, if ever.
ANSWER
Answered 2021-Dec-13 at 18:28The Routes component only replaces the Switch component from react-router-dom v5, but is required to wrap Route components in v6. The routed components, Home, etc... need to be rendered by a Route.
1import React from "react"
2import { Router } from "@reach/router"
3import { Link } from "gatsby"
4
5const Home = () => <p>Home</p>
6const Settings = () => <p>Settings</p>
7const Billing = () => <p>Billing</p>
8
9const Account = () => (
10 <>
11 <nav>
12 <Link to="/account">Home</Link>{" "}
13 <Link to="/account/settings">Settings</Link>{" "}
14 <Link to="/account/billing">Billing</Link>{" "}
15 </nav>
16 <Router>
17 <Home path="/account" />
18 <Settings path="/account/settings" />
19 <Billing path="/account/billing" />
20 </Router>
21 </>
22)
23
24export default Account
25import React from "react"
26import { Link } from "gatsby"
27import { Routes } from "react-router-dom";
28
29const Home = () => <p>Home</p>
30const Settings = () => <p>Settings</p>
31const Billing = () => <p>Billing</p>
32
33const Account = () => (
34 <>
35 <nav>
36 <Link to="/account">Home</Link>{" "}
37 <Link to="/account/settings">Settings</Link>{" "}
38 <Link to="/account/billing">Billing</Link>{" "}
39 </nav>
40 <Routes>
41 <Home path="/account" />
42 <Settings path="/account/settings" />
43 <Billing path="/account/billing" />
44 </Routes>
45 </>
46)
47
48export default Account
49import React from "react"
50import { Link } from "gatsby"
51import { Routes } from "react-router-dom";
52
53const Home = () => <p>Home</p>
54const Settings = () => <p>Settings</p>
55const Billing = () => <p>Billing</p>
56
57const Account = () => (
58 <>
59 <nav>
60 <Link to="/account">Home</Link>{" "}
61 <Link to="/account/settings">Settings</Link>{" "}
62 <Link to="/account/billing">Billing</Link>{" "}
63 </nav>
64 <Routes>
65 <Route path="/account" element={<Home />} />
66 <Route path="/account/settings" element={<Settings />} />
67 <Route path="/account/billing" element={<Billing />} />
68 </Routes>
69 </>
70);
71QUESTION
Gatsby deployment failure on AWS Amplify
Asked 2021-Nov-02 at 11:16I have a gatsby portfolio page that's simply all in an index.js file.
I am having trouble deploying it on AWS Amplify, here are the build logs:
1 # Starting phase: preBuild
2 # Executing command: npm install
32021-11-02T07:59:54.079Z [INFO]: > msgpackr-extract@1.0.15 install /codebuild/output/src648320162/src/simonshampoo.io/node_modules/msgpackr-extract
4 > node-gyp-build
52021-11-02T07:59:54.283Z [INFO]: > lmdb-store@1.6.11 install /codebuild/output/src648320162/src/simonshampoo.io/node_modules/lmdb-store
6 > node-gyp-build
72021-11-02T07:59:54.534Z [INFO]: > core-js@3.18.3 postinstall /codebuild/output/src648320162/src/simonshampoo.io/node_modules/core-js
8 > node -e "try{require('./postinstall')}catch(e){}"
92021-11-02T07:59:54.582Z [INFO]: [96mThank you for using core-js ([94m https://github.com/zloirock/core-js [96m) for polyfilling JavaScript standard library![0m
10 [96mThe project needs your help! Please consider supporting of core-js:[0m
11 [96m>[94m https://opencollective.com/core-js [0m
12 [96m>[94m https://patreon.com/zloirock [0m
13 [96m>[94m https://paypal.me/zloirock [0m
14 [96m>[94m bitcoin: bc1qlea7544qtsmj2rayg0lthvza9fau63ux0fstcz [0m
15 [96mAlso, the author of core-js ([94m https://github.com/zloirock [96m) is looking for a good job -)[0m
162021-11-02T07:59:54.588Z [INFO]: > core-js-pure@3.18.3 postinstall /codebuild/output/src648320162/src/simonshampoo.io/node_modules/core-js-pure
17 > node -e "try{require('./postinstall')}catch(e){}"
182021-11-02T07:59:54.942Z [INFO]: > gatsby-telemetry@3.0.0 postinstall /codebuild/output/src648320162/src/simonshampoo.io/node_modules/gatsby-telemetry
19 > node src/postinstall.js || true
202021-11-02T07:59:55.003Z [INFO]: > gatsby-cli@4.0.0 postinstall /codebuild/output/src648320162/src/simonshampoo.io/node_modules/gatsby-cli
21 > node scripts/postinstall.js
222021-11-02T07:59:55.057Z [INFO]: > gatsby@4.0.1 postinstall /codebuild/output/src648320162/src/simonshampoo.io/node_modules/gatsby
23 > node scripts/postinstall.js
242021-11-02T07:59:56.402Z [WARNING]: npm
252021-11-02T07:59:56.403Z [WARNING]: WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.3.2 (node_modules/fsevents):
26 npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.3.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
272021-11-02T07:59:56.407Z [INFO]: added 1667 packages from 742 contributors and audited 1668 packages in 46.524s
282021-11-02T07:59:57.367Z [INFO]: 290 packages are looking for funding
29 run `npm fund` for details
302021-11-02T07:59:57.369Z [INFO]: found 17 vulnerabilities (7 moderate, 9 high, 1 critical)
31 run `npm audit fix` to fix them, or `npm audit` for details
322021-11-02T07:59:57.437Z [INFO]: # Completed phase: preBuild
33 # Starting phase: build
34 # Executing command: npm run build
352021-11-02T07:59:57.634Z [INFO]: > new-portfolio@1.0.0 build /codebuild/output/src648320162/src/simonshampoo.io
36 > gatsby build
372021-11-02T07:59:58.185Z [WARNING]: error Gatsby requires Node.js 14.15.0 or higher (you have v12.21.0).
38 Upgrade Node to the latest stable release: https://gatsby.dev/upgrading-node-js
392021-11-02T07:59:58.502Z [WARNING]: npm
402021-11-02T07:59:58.502Z [WARNING]: ERR! code ELIFECYCLE
41 npm ERR! errno 1
422021-11-02T07:59:58.504Z [WARNING]: npm
432021-11-02T07:59:58.505Z [WARNING]: ERR! new-portfolio@1.0.0 build: `gatsby build`
44 npm ERR! Exit status 1
45 npm ERR!
46 npm ERR! Failed at the new-portfolio@1.0.0 build script.
47 npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
482021-11-02T07:59:58.509Z [WARNING]:
492021-11-02T07:59:58.510Z [WARNING]: npm ERR! A complete log of this run can be found in:
50 npm ERR! /root/.npm/_logs/2021-11-02T07_59_58_505Z-debug.log
512021-11-02T07:59:58.510Z [HELP]: Outputting the npm debug log
52 0 info it worked if it ends with ok
53 1 verbose cli [
54 1 verbose cli '/root/.nvm/versions/node/v12.21.0/bin/node',
55 1 verbose cli '/root/.nvm/versions/node/v12.21.0/bin/npm',
56 1 verbose cli 'run',
57 1 verbose cli 'build'
58 1 verbose cli ]
59 2 info using npm@6.14.11
60 3 info using node@v12.21.0
61 4 verbose run-script [ 'prebuild', 'build', 'postbuild' ]
62 5 info lifecycle new-portfolio@1.0.0~prebuild: new-portfolio@1.0.0
63 6 info lifecycle new-portfolio@1.0.0~build: new-portfolio@1.0.0
64 7 verbose lifecycle new-portfolio@1.0.0~build: unsafe-perm in lifecycle true
65 8 verbose lifecycle new-portfolio@1.0.0~build: PATH: /root/.nvm/versions/node/v12.21.0/lib/node_modules/npm/node_modules/npm-lifecycle/node-gyp-bin:/codebuild/output/src648320162/src/simonshampoo.io/node_modules/.bin:/usr/local/rvm/gems/ruby-2.4.6/bin:/usr/local/rvm/gems/ruby-2.4.6@global/bin:/usr/local/rvm/rubies/ruby-2.4.6/bin:/usr/local/rvm/bin:/root/.yarn/bin:/root/.config/yarn/global/node_modules/.bin:/root/.nvm/versions/node/v12.21.0/bin:/root/.local/bin:/root/.local/bin:/usr/local/rvm/bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/root/.dotnet/tools
66 9 verbose lifecycle new-portfolio@1.0.0~build: CWD: /codebuild/output/src648320162/src/simonshampoo.io
67 10 silly lifecycle new-portfolio@1.0.0~build: Args: [ '-c', 'gatsby build' ]
68 11 silly lifecycle new-portfolio@1.0.0~build: Returned: code: 1 signal: null
69 12 info lifecycle new-portfolio@1.0.0~build: Failed to exec build script
70 13 verbose stack Error: new-portfolio@1.0.0 build: `gatsby build`
71 13 verbose stack Exit status 1
72 13 verbose stack at EventEmitter.<anonymous> (/root/.nvm/versions/node/v12.21.0/lib/node_modules/npm/node_modules/npm-lifecycle/index.js:332:16)
73 13 verbose stack at EventEmitter.emit (events.js:314:20)
74 13 verbose stack at ChildProcess.<anonymous> (/root/.nvm/versions/node/v12.21.0/lib/node_modules/npm/node_modules/npm-lifecycle/lib/spawn.js:55:14)
75 13 verbose stack at ChildProcess.emit (events.js:314:20)
76 13 verbose stack at maybeClose (internal/child_process.js:1022:16)
77 13 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:287:5)
78 14 verbose pkgid new-portfolio@1.0.0
79 15 verbose cwd /codebuild/output/src648320162/src/simonshampoo.io
80 16 verbose Linux 4.14.248-189.473.amzn2.x86_64
81 17 verbose argv "/root/.nvm/versions/node/v12.21.0/bin/node" "/root/.nvm/versions/node/v12.21.0/bin/npm" "run" "build"
82 18 verbose node v12.21.0
83 19 verbose npm v6.14.11
84 20 error code ELIFECYCLE
85 21 error errno 1
86 22 error new-portfolio@1.0.0 build: `gatsby build`
87 22 error Exit status 1
88 23 error Failed at the new-portfolio@1.0.0 build script.
89 23 error This is probably not a problem with npm. There is likely additional logging output above.
90 24 verbose exit [ 1, true ]
912021-11-02T07:59:58.513Z [ERROR]: !!! Build failed
922021-11-02T07:59:58.513Z [ERROR]: !!! Non-Zero Exit Code detected
932021-11-02T07:59:58.513Z [INFO]: # Starting environment caching...
942021-11-02T07:59:58.513Z [INFO]: # Environment caching completed
95Terminating logging...
96It says that my node is outdated, but I do node -v in the project directory and it says I have v14.8.1, so I am confused. Is there another problem? public subdirectory was previously gitignored, so I removed it from there, but that doesn't seem to do anything. I can't find much information about deployment failures on Amplify since it's supposed to be straightforward. Do I have to use nvm? It also won't even deploy on Github pages-- it just shows the "Gatsby Minimal Starter" page in my repo.
ANSWER
Answered 2021-Nov-02 at 11:16I think there's a mismatching Node version between your local environment and the AWS Amplify's. If you run different versions of Node, the installed dependencies in the npm install will be different so your application will behave differently in both environments, assuming that it builds locally (if don't, there might be another underlying problem).
As you pointed, you can use nvm to set the provision version. Based on How to change Node Version in Provision Step in Amplify Console you can try:
1 # Starting phase: preBuild
2 # Executing command: npm install
32021-11-02T07:59:54.079Z [INFO]: > msgpackr-extract@1.0.15 install /codebuild/output/src648320162/src/simonshampoo.io/node_modules/msgpackr-extract
4 > node-gyp-build
52021-11-02T07:59:54.283Z [INFO]: > lmdb-store@1.6.11 install /codebuild/output/src648320162/src/simonshampoo.io/node_modules/lmdb-store
6 > node-gyp-build
72021-11-02T07:59:54.534Z [INFO]: > core-js@3.18.3 postinstall /codebuild/output/src648320162/src/simonshampoo.io/node_modules/core-js
8 > node -e "try{require('./postinstall')}catch(e){}"
92021-11-02T07:59:54.582Z [INFO]: [96mThank you for using core-js ([94m https://github.com/zloirock/core-js [96m) for polyfilling JavaScript standard library![0m
10 [96mThe project needs your help! Please consider supporting of core-js:[0m
11 [96m>[94m https://opencollective.com/core-js [0m
12 [96m>[94m https://patreon.com/zloirock [0m
13 [96m>[94m https://paypal.me/zloirock [0m
14 [96m>[94m bitcoin: bc1qlea7544qtsmj2rayg0lthvza9fau63ux0fstcz [0m
15 [96mAlso, the author of core-js ([94m https://github.com/zloirock [96m) is looking for a good job -)[0m
162021-11-02T07:59:54.588Z [INFO]: > core-js-pure@3.18.3 postinstall /codebuild/output/src648320162/src/simonshampoo.io/node_modules/core-js-pure
17 > node -e "try{require('./postinstall')}catch(e){}"
182021-11-02T07:59:54.942Z [INFO]: > gatsby-telemetry@3.0.0 postinstall /codebuild/output/src648320162/src/simonshampoo.io/node_modules/gatsby-telemetry
19 > node src/postinstall.js || true
202021-11-02T07:59:55.003Z [INFO]: > gatsby-cli@4.0.0 postinstall /codebuild/output/src648320162/src/simonshampoo.io/node_modules/gatsby-cli
21 > node scripts/postinstall.js
222021-11-02T07:59:55.057Z [INFO]: > gatsby@4.0.1 postinstall /codebuild/output/src648320162/src/simonshampoo.io/node_modules/gatsby
23 > node scripts/postinstall.js
242021-11-02T07:59:56.402Z [WARNING]: npm
252021-11-02T07:59:56.403Z [WARNING]: WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.3.2 (node_modules/fsevents):
26 npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.3.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
272021-11-02T07:59:56.407Z [INFO]: added 1667 packages from 742 contributors and audited 1668 packages in 46.524s
282021-11-02T07:59:57.367Z [INFO]: 290 packages are looking for funding
29 run `npm fund` for details
302021-11-02T07:59:57.369Z [INFO]: found 17 vulnerabilities (7 moderate, 9 high, 1 critical)
31 run `npm audit fix` to fix them, or `npm audit` for details
322021-11-02T07:59:57.437Z [INFO]: # Completed phase: preBuild
33 # Starting phase: build
34 # Executing command: npm run build
352021-11-02T07:59:57.634Z [INFO]: > new-portfolio@1.0.0 build /codebuild/output/src648320162/src/simonshampoo.io
36 > gatsby build
372021-11-02T07:59:58.185Z [WARNING]: error Gatsby requires Node.js 14.15.0 or higher (you have v12.21.0).
38 Upgrade Node to the latest stable release: https://gatsby.dev/upgrading-node-js
392021-11-02T07:59:58.502Z [WARNING]: npm
402021-11-02T07:59:58.502Z [WARNING]: ERR! code ELIFECYCLE
41 npm ERR! errno 1
422021-11-02T07:59:58.504Z [WARNING]: npm
432021-11-02T07:59:58.505Z [WARNING]: ERR! new-portfolio@1.0.0 build: `gatsby build`
44 npm ERR! Exit status 1
45 npm ERR!
46 npm ERR! Failed at the new-portfolio@1.0.0 build script.
47 npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
482021-11-02T07:59:58.509Z [WARNING]:
492021-11-02T07:59:58.510Z [WARNING]: npm ERR! A complete log of this run can be found in:
50 npm ERR! /root/.npm/_logs/2021-11-02T07_59_58_505Z-debug.log
512021-11-02T07:59:58.510Z [HELP]: Outputting the npm debug log
52 0 info it worked if it ends with ok
53 1 verbose cli [
54 1 verbose cli '/root/.nvm/versions/node/v12.21.0/bin/node',
55 1 verbose cli '/root/.nvm/versions/node/v12.21.0/bin/npm',
56 1 verbose cli 'run',
57 1 verbose cli 'build'
58 1 verbose cli ]
59 2 info using npm@6.14.11
60 3 info using node@v12.21.0
61 4 verbose run-script [ 'prebuild', 'build', 'postbuild' ]
62 5 info lifecycle new-portfolio@1.0.0~prebuild: new-portfolio@1.0.0
63 6 info lifecycle new-portfolio@1.0.0~build: new-portfolio@1.0.0
64 7 verbose lifecycle new-portfolio@1.0.0~build: unsafe-perm in lifecycle true
65 8 verbose lifecycle new-portfolio@1.0.0~build: PATH: /root/.nvm/versions/node/v12.21.0/lib/node_modules/npm/node_modules/npm-lifecycle/node-gyp-bin:/codebuild/output/src648320162/src/simonshampoo.io/node_modules/.bin:/usr/local/rvm/gems/ruby-2.4.6/bin:/usr/local/rvm/gems/ruby-2.4.6@global/bin:/usr/local/rvm/rubies/ruby-2.4.6/bin:/usr/local/rvm/bin:/root/.yarn/bin:/root/.config/yarn/global/node_modules/.bin:/root/.nvm/versions/node/v12.21.0/bin:/root/.local/bin:/root/.local/bin:/usr/local/rvm/bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/root/.dotnet/tools
66 9 verbose lifecycle new-portfolio@1.0.0~build: CWD: /codebuild/output/src648320162/src/simonshampoo.io
67 10 silly lifecycle new-portfolio@1.0.0~build: Args: [ '-c', 'gatsby build' ]
68 11 silly lifecycle new-portfolio@1.0.0~build: Returned: code: 1 signal: null
69 12 info lifecycle new-portfolio@1.0.0~build: Failed to exec build script
70 13 verbose stack Error: new-portfolio@1.0.0 build: `gatsby build`
71 13 verbose stack Exit status 1
72 13 verbose stack at EventEmitter.<anonymous> (/root/.nvm/versions/node/v12.21.0/lib/node_modules/npm/node_modules/npm-lifecycle/index.js:332:16)
73 13 verbose stack at EventEmitter.emit (events.js:314:20)
74 13 verbose stack at ChildProcess.<anonymous> (/root/.nvm/versions/node/v12.21.0/lib/node_modules/npm/node_modules/npm-lifecycle/lib/spawn.js:55:14)
75 13 verbose stack at ChildProcess.emit (events.js:314:20)
76 13 verbose stack at maybeClose (internal/child_process.js:1022:16)
77 13 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:287:5)
78 14 verbose pkgid new-portfolio@1.0.0
79 15 verbose cwd /codebuild/output/src648320162/src/simonshampoo.io
80 16 verbose Linux 4.14.248-189.473.amzn2.x86_64
81 17 verbose argv "/root/.nvm/versions/node/v12.21.0/bin/node" "/root/.nvm/versions/node/v12.21.0/bin/npm" "run" "build"
82 18 verbose node v12.21.0
83 19 verbose npm v6.14.11
84 20 error code ELIFECYCLE
85 21 error errno 1
86 22 error new-portfolio@1.0.0 build: `gatsby build`
87 22 error Exit status 1
88 23 error Failed at the new-portfolio@1.0.0 build script.
89 23 error This is probably not a problem with npm. There is likely additional logging output above.
90 24 verbose exit [ 1, true ]
912021-11-02T07:59:58.513Z [ERROR]: !!! Build failed
922021-11-02T07:59:58.513Z [ERROR]: !!! Non-Zero Exit Code detected
932021-11-02T07:59:58.513Z [INFO]: # Starting environment caching...
942021-11-02T07:59:58.513Z [INFO]: # Environment caching completed
95Terminating logging...
96frontend:
97 phases:
98 preBuild:
99 commands:
100 - nvm install your_local_node_version
101Using a .nvmrc file in the root of the project should also work. You can set it directly by:
1 # Starting phase: preBuild
2 # Executing command: npm install
32021-11-02T07:59:54.079Z [INFO]: > msgpackr-extract@1.0.15 install /codebuild/output/src648320162/src/simonshampoo.io/node_modules/msgpackr-extract
4 > node-gyp-build
52021-11-02T07:59:54.283Z [INFO]: > lmdb-store@1.6.11 install /codebuild/output/src648320162/src/simonshampoo.io/node_modules/lmdb-store
6 > node-gyp-build
72021-11-02T07:59:54.534Z [INFO]: > core-js@3.18.3 postinstall /codebuild/output/src648320162/src/simonshampoo.io/node_modules/core-js
8 > node -e "try{require('./postinstall')}catch(e){}"
92021-11-02T07:59:54.582Z [INFO]: [96mThank you for using core-js ([94m https://github.com/zloirock/core-js [96m) for polyfilling JavaScript standard library![0m
10 [96mThe project needs your help! Please consider supporting of core-js:[0m
11 [96m>[94m https://opencollective.com/core-js [0m
12 [96m>[94m https://patreon.com/zloirock [0m
13 [96m>[94m https://paypal.me/zloirock [0m
14 [96m>[94m bitcoin: bc1qlea7544qtsmj2rayg0lthvza9fau63ux0fstcz [0m
15 [96mAlso, the author of core-js ([94m https://github.com/zloirock [96m) is looking for a good job -)[0m
162021-11-02T07:59:54.588Z [INFO]: > core-js-pure@3.18.3 postinstall /codebuild/output/src648320162/src/simonshampoo.io/node_modules/core-js-pure
17 > node -e "try{require('./postinstall')}catch(e){}"
182021-11-02T07:59:54.942Z [INFO]: > gatsby-telemetry@3.0.0 postinstall /codebuild/output/src648320162/src/simonshampoo.io/node_modules/gatsby-telemetry
19 > node src/postinstall.js || true
202021-11-02T07:59:55.003Z [INFO]: > gatsby-cli@4.0.0 postinstall /codebuild/output/src648320162/src/simonshampoo.io/node_modules/gatsby-cli
21 > node scripts/postinstall.js
222021-11-02T07:59:55.057Z [INFO]: > gatsby@4.0.1 postinstall /codebuild/output/src648320162/src/simonshampoo.io/node_modules/gatsby
23 > node scripts/postinstall.js
242021-11-02T07:59:56.402Z [WARNING]: npm
252021-11-02T07:59:56.403Z [WARNING]: WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.3.2 (node_modules/fsevents):
26 npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.3.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
272021-11-02T07:59:56.407Z [INFO]: added 1667 packages from 742 contributors and audited 1668 packages in 46.524s
282021-11-02T07:59:57.367Z [INFO]: 290 packages are looking for funding
29 run `npm fund` for details
302021-11-02T07:59:57.369Z [INFO]: found 17 vulnerabilities (7 moderate, 9 high, 1 critical)
31 run `npm audit fix` to fix them, or `npm audit` for details
322021-11-02T07:59:57.437Z [INFO]: # Completed phase: preBuild
33 # Starting phase: build
34 # Executing command: npm run build
352021-11-02T07:59:57.634Z [INFO]: > new-portfolio@1.0.0 build /codebuild/output/src648320162/src/simonshampoo.io
36 > gatsby build
372021-11-02T07:59:58.185Z [WARNING]: error Gatsby requires Node.js 14.15.0 or higher (you have v12.21.0).
38 Upgrade Node to the latest stable release: https://gatsby.dev/upgrading-node-js
392021-11-02T07:59:58.502Z [WARNING]: npm
402021-11-02T07:59:58.502Z [WARNING]: ERR! code ELIFECYCLE
41 npm ERR! errno 1
422021-11-02T07:59:58.504Z [WARNING]: npm
432021-11-02T07:59:58.505Z [WARNING]: ERR! new-portfolio@1.0.0 build: `gatsby build`
44 npm ERR! Exit status 1
45 npm ERR!
46 npm ERR! Failed at the new-portfolio@1.0.0 build script.
47 npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
482021-11-02T07:59:58.509Z [WARNING]:
492021-11-02T07:59:58.510Z [WARNING]: npm ERR! A complete log of this run can be found in:
50 npm ERR! /root/.npm/_logs/2021-11-02T07_59_58_505Z-debug.log
512021-11-02T07:59:58.510Z [HELP]: Outputting the npm debug log
52 0 info it worked if it ends with ok
53 1 verbose cli [
54 1 verbose cli '/root/.nvm/versions/node/v12.21.0/bin/node',
55 1 verbose cli '/root/.nvm/versions/node/v12.21.0/bin/npm',
56 1 verbose cli 'run',
57 1 verbose cli 'build'
58 1 verbose cli ]
59 2 info using npm@6.14.11
60 3 info using node@v12.21.0
61 4 verbose run-script [ 'prebuild', 'build', 'postbuild' ]
62 5 info lifecycle new-portfolio@1.0.0~prebuild: new-portfolio@1.0.0
63 6 info lifecycle new-portfolio@1.0.0~build: new-portfolio@1.0.0
64 7 verbose lifecycle new-portfolio@1.0.0~build: unsafe-perm in lifecycle true
65 8 verbose lifecycle new-portfolio@1.0.0~build: PATH: /root/.nvm/versions/node/v12.21.0/lib/node_modules/npm/node_modules/npm-lifecycle/node-gyp-bin:/codebuild/output/src648320162/src/simonshampoo.io/node_modules/.bin:/usr/local/rvm/gems/ruby-2.4.6/bin:/usr/local/rvm/gems/ruby-2.4.6@global/bin:/usr/local/rvm/rubies/ruby-2.4.6/bin:/usr/local/rvm/bin:/root/.yarn/bin:/root/.config/yarn/global/node_modules/.bin:/root/.nvm/versions/node/v12.21.0/bin:/root/.local/bin:/root/.local/bin:/usr/local/rvm/bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/root/.dotnet/tools
66 9 verbose lifecycle new-portfolio@1.0.0~build: CWD: /codebuild/output/src648320162/src/simonshampoo.io
67 10 silly lifecycle new-portfolio@1.0.0~build: Args: [ '-c', 'gatsby build' ]
68 11 silly lifecycle new-portfolio@1.0.0~build: Returned: code: 1 signal: null
69 12 info lifecycle new-portfolio@1.0.0~build: Failed to exec build script
70 13 verbose stack Error: new-portfolio@1.0.0 build: `gatsby build`
71 13 verbose stack Exit status 1
72 13 verbose stack at EventEmitter.<anonymous> (/root/.nvm/versions/node/v12.21.0/lib/node_modules/npm/node_modules/npm-lifecycle/index.js:332:16)
73 13 verbose stack at EventEmitter.emit (events.js:314:20)
74 13 verbose stack at ChildProcess.<anonymous> (/root/.nvm/versions/node/v12.21.0/lib/node_modules/npm/node_modules/npm-lifecycle/lib/spawn.js:55:14)
75 13 verbose stack at ChildProcess.emit (events.js:314:20)
76 13 verbose stack at maybeClose (internal/child_process.js:1022:16)
77 13 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:287:5)
78 14 verbose pkgid new-portfolio@1.0.0
79 15 verbose cwd /codebuild/output/src648320162/src/simonshampoo.io
80 16 verbose Linux 4.14.248-189.473.amzn2.x86_64
81 17 verbose argv "/root/.nvm/versions/node/v12.21.0/bin/node" "/root/.nvm/versions/node/v12.21.0/bin/npm" "run" "build"
82 18 verbose node v12.21.0
83 19 verbose npm v6.14.11
84 20 error code ELIFECYCLE
85 21 error errno 1
86 22 error new-portfolio@1.0.0 build: `gatsby build`
87 22 error Exit status 1
88 23 error Failed at the new-portfolio@1.0.0 build script.
89 23 error This is probably not a problem with npm. There is likely additional logging output above.
90 24 verbose exit [ 1, true ]
912021-11-02T07:59:58.513Z [ERROR]: !!! Build failed
922021-11-02T07:59:58.513Z [ERROR]: !!! Non-Zero Exit Code detected
932021-11-02T07:59:58.513Z [INFO]: # Starting environment caching...
942021-11-02T07:59:58.513Z [INFO]: # Environment caching completed
95Terminating logging...
96frontend:
97 phases:
98 preBuild:
99 commands:
100 - nvm install your_local_node_version
101node -v > .nvmrc
102Out of the scope of the question: /public directory should be always ignored because it's autogenerated in each build, so it will be overridden. There's no point in pushing it and it will save you MB bandwidth.
QUESTION
How to change the background color of a parent component from inside a child component in react, gatsby
Asked 2021-Oct-27 at 13:26I am using react, gatsby and I have 2 components
1const Landing = ( { children }) => {
2 return (
3 <div className={container}>
4 <div className={wrapper}>
5 <ZoneButton zone={'pink'} icon={'child'} />
6 <ZoneButton zone={'blue'} icon={'code'} />
7 </div>
8 </div>
9 )
10}
11And,
1const Landing = ( { children }) => {
2 return (
3 <div className={container}>
4 <div className={wrapper}>
5 <ZoneButton zone={'pink'} icon={'child'} />
6 <ZoneButton zone={'blue'} icon={'code'} />
7 </div>
8 </div>
9 )
10}
11const ZoneButton = ({ zone, icon }) => {
12
13 const colourPrimaryDict = {
14 'pink': 'var(--pastel-pink-primary)',
15 'blue': 'var(--pastel-blue-primary)'
16
17 }
18 const colourSecondaryDict = {
19 'pink': 'var(--pastel-pink-secondary)',
20 'blue': 'var(--pastel-blue-secondary)'
21 }
22 const svgDict = {
23 'code': <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="code" className="svg-inline--fa fa-code fa-w-20" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path fill="currentColor" d="M278.9 511.5l-61-17.7c-6.4-1.8-10-8.5-8.2-14.9L346.2 8.7c1.8-6.4 8.5-10 14.9-8.2l61 17.7c6.4 1.8 10 8.5 8.2 14.9L293.8 503.3c-1.9 6.4-8.5 10.1-14.9 8.2zm-114-112.2l43.5-46.4c4.6-4.9 4.3-12.7-.8-17.2L117 256l90.6-79.7c5.1-4.5 5.5-12.3.8-17.2l-43.5-46.4c-4.5-4.8-12.1-5.1-17-.5L3.8 247.2c-5.1 4.7-5.1 12.8 0 17.5l144.1 135.1c4.9 4.6 12.5 4.4 17-.5zm327.2.6l144.1-135.1c5.1-4.7 5.1-12.8 0-17.5L492.1 112.1c-4.8-4.5-12.4-4.3-17 .5L431.6 159c-4.6 4.9-4.3 12.7.8 17.2L523 256l-90.6 79.7c-5.1 4.5-5.5 12.3-.8 17.2l43.5 46.4c4.5 4.9 12.1 5.1 17 .6z"/></svg>,
24 'child': <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="child" className="svg-inline--fa fa-child fa-w-12" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path fill="currentColor" d="M120 72c0-39.765 32.235-72 72-72s72 32.235 72 72c0 39.764-32.235 72-72 72s-72-32.236-72-72zm254.627 1.373c-12.496-12.497-32.758-12.497-45.254 0L242.745 160H141.254L54.627 73.373c-12.496-12.497-32.758-12.497-45.254 0-12.497 12.497-12.497 32.758 0 45.255L104 213.254V480c0 17.673 14.327 32 32 32h16c17.673 0 32-14.327 32-32V368h16v112c0 17.673 14.327 32 32 32h16c17.673 0 32-14.327 32-32V213.254l94.627-94.627c12.497-12.497 12.497-32.757 0-45.254z"/></svg>
25 }
26
27 return (
28 <div className={container} style={{
29 backgroundColor: colourPrimaryDict[zone],
30 color: colourSecondaryDict[zone]
31 }} onClick={ /* What do I put here */ }>
32 {svgDict[icon]}
33 </div>
34 )
35}
36How would I go about being able to click on a ZoneButton and then that changing the backgound colour of the container className in the Landing component.
ANSWER
Answered 2021-Oct-16 at 04:06You can do something like this:
1const Landing = ( { children }) => {
2 return (
3 <div className={container}>
4 <div className={wrapper}>
5 <ZoneButton zone={'pink'} icon={'child'} />
6 <ZoneButton zone={'blue'} icon={'code'} />
7 </div>
8 </div>
9 )
10}
11const ZoneButton = ({ zone, icon }) => {
12
13 const colourPrimaryDict = {
14 'pink': 'var(--pastel-pink-primary)',
15 'blue': 'var(--pastel-blue-primary)'
16
17 }
18 const colourSecondaryDict = {
19 'pink': 'var(--pastel-pink-secondary)',
20 'blue': 'var(--pastel-blue-secondary)'
21 }
22 const svgDict = {
23 'code': <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="code" className="svg-inline--fa fa-code fa-w-20" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path fill="currentColor" d="M278.9 511.5l-61-17.7c-6.4-1.8-10-8.5-8.2-14.9L346.2 8.7c1.8-6.4 8.5-10 14.9-8.2l61 17.7c6.4 1.8 10 8.5 8.2 14.9L293.8 503.3c-1.9 6.4-8.5 10.1-14.9 8.2zm-114-112.2l43.5-46.4c4.6-4.9 4.3-12.7-.8-17.2L117 256l90.6-79.7c5.1-4.5 5.5-12.3.8-17.2l-43.5-46.4c-4.5-4.8-12.1-5.1-17-.5L3.8 247.2c-5.1 4.7-5.1 12.8 0 17.5l144.1 135.1c4.9 4.6 12.5 4.4 17-.5zm327.2.6l144.1-135.1c5.1-4.7 5.1-12.8 0-17.5L492.1 112.1c-4.8-4.5-12.4-4.3-17 .5L431.6 159c-4.6 4.9-4.3 12.7.8 17.2L523 256l-90.6 79.7c-5.1 4.5-5.5 12.3-.8 17.2l43.5 46.4c4.5 4.9 12.1 5.1 17 .6z"/></svg>,
24 'child': <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="child" className="svg-inline--fa fa-child fa-w-12" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path fill="currentColor" d="M120 72c0-39.765 32.235-72 72-72s72 32.235 72 72c0 39.764-32.235 72-72 72s-72-32.236-72-72zm254.627 1.373c-12.496-12.497-32.758-12.497-45.254 0L242.745 160H141.254L54.627 73.373c-12.496-12.497-32.758-12.497-45.254 0-12.497 12.497-12.497 32.758 0 45.255L104 213.254V480c0 17.673 14.327 32 32 32h16c17.673 0 32-14.327 32-32V368h16v112c0 17.673 14.327 32 32 32h16c17.673 0 32-14.327 32-32V213.254l94.627-94.627c12.497-12.497 12.497-32.757 0-45.254z"/></svg>
25 }
26
27 return (
28 <div className={container} style={{
29 backgroundColor: colourPrimaryDict[zone],
30 color: colourSecondaryDict[zone]
31 }} onClick={ /* What do I put here */ }>
32 {svgDict[icon]}
33 </div>
34 )
35}
36const ZoneButton = ({ zone, icon }) => {
37
38 let [colourPrimaryDict, setColourPrimaryDict] = React.useState({
39 'pink': 'var(--pastel-pink-primary)',
40 'blue': 'var(--pastel-blue-primary)'
41 })
42
43 let [colourSecondaryDict, setColourSecondaryDict] = React.useState({
44 'pink': 'var(--pastel-pink-secondary)',
45 'blue': 'var(--pastel-blue-secondary)'
46 })
47 const svgDict = {
48 'code': <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="code" className="svg-inline--fa fa-code fa-w-20" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path fill="currentColor" d="M278.9 511.5l-61-17.7c-6.4-1.8-10-8.5-8.2-14.9L346.2 8.7c1.8-6.4 8.5-10 14.9-8.2l61 17.7c6.4 1.8 10 8.5 8.2 14.9L293.8 503.3c-1.9 6.4-8.5 10.1-14.9 8.2zm-114-112.2l43.5-46.4c4.6-4.9 4.3-12.7-.8-17.2L117 256l90.6-79.7c5.1-4.5 5.5-12.3.8-17.2l-43.5-46.4c-4.5-4.8-12.1-5.1-17-.5L3.8 247.2c-5.1 4.7-5.1 12.8 0 17.5l144.1 135.1c4.9 4.6 12.5 4.4 17-.5zm327.2.6l144.1-135.1c5.1-4.7 5.1-12.8 0-17.5L492.1 112.1c-4.8-4.5-12.4-4.3-17 .5L431.6 159c-4.6 4.9-4.3 12.7.8 17.2L523 256l-90.6 79.7c-5.1 4.5-5.5 12.3-.8 17.2l43.5 46.4c4.5 4.9 12.1 5.1 17 .6z"/></svg>,
49 'child': <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="child" className="svg-inline--fa fa-child fa-w-12" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path fill="currentColor" d="M120 72c0-39.765 32.235-72 72-72s72 32.235 72 72c0 39.764-32.235 72-72 72s-72-32.236-72-72zm254.627 1.373c-12.496-12.497-32.758-12.497-45.254 0L242.745 160H141.254L54.627 73.373c-12.496-12.497-32.758-12.497-45.254 0-12.497 12.497-12.497 32.758 0 45.255L104 213.254V480c0 17.673 14.327 32 32 32h16c17.673 0 32-14.327 32-32V368h16v112c0 17.673 14.327 32 32 32h16c17.673 0 32-14.327 32-32V213.254l94.627-94.627c12.497-12.497 12.497-32.757 0-45.254z"/></svg>
50 }
51
52 let changeColor = () => {
53 //Change your color here
54 setColourPrimaryDict({
55 'pink': 'var(--pastel-pink-primary)',
56 'blue': 'var(--pastel-blue-primary)'
57 })
58 }
59 return (
60 <div className={container} style={{
61 backgroundColor: colourPrimaryDict[zone],
62 color: colourSecondaryDict[zone]
63 }} onClick={ () => changeColor() }>
64 {svgDict[icon]}
65 </div>
66 )
67}
68On click just change the state value.
QUESTION
How to use Gatsbys wrapPageElement with Typescript in a local plugin?
Asked 2021-Oct-13 at 19:34I'm trying to create a new Gatsby plugin. I started with developing it as a local plugin. In this plugin I want to provide a wrapPageElement for server side rendering and during runtime, so I've create the following configuration files:
gatsby-ssr.js:
1export { wrapPageElement } from "./src/wrapPageElement";
2gatsby-browser.js:
1export { wrapPageElement } from "./src/wrapPageElement";
2export { wrapPageElement } from "./src/wrapPageElement";
3src/wrapPageElement.tsx:
1export { wrapPageElement } from "./src/wrapPageElement";
2export { wrapPageElement } from "./src/wrapPageElement";
3import React from "react";
4import { GatsbyBrowser, GatsbySSR } from "gatsby";
5
6type WrapPageElement =
7 | GatsbyBrowser["wrapPageElement"]
8 | GatsbySSR["wrapPageElement"];
9
10export const wrapPageElement: WrapPageElement = ({ element, props }: any) => {
11 return <div {...props}>{element}</div>;
12};
13Now when I run my Gatsby project I get the following runtime error:
1export { wrapPageElement } from "./src/wrapPageElement";
2export { wrapPageElement } from "./src/wrapPageElement";
3import React from "react";
4import { GatsbyBrowser, GatsbySSR } from "gatsby";
5
6type WrapPageElement =
7 | GatsbyBrowser["wrapPageElement"]
8 | GatsbySSR["wrapPageElement"];
9
10export const wrapPageElement: WrapPageElement = ({ element, props }: any) => {
11 return <div {...props}>{element}</div>;
12};
13One unhandled runtime error found in your files. See the list below to fix it:
14
15Unknown Runtime Error
16
17Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. Check the render method of `PageRenderer`.
18:
19
20No codeFrame could be generated
21When I don't try to render {element} within the wrapPageElement, for example a simple string, the wrapPageElement is successfully rendered. The problem seems to be related to element. Does somebody have an idea what is wrong here?
I'm on Gatsby version 3.14.0.
ANSWER
Answered 2021-Sep-28 at 04:29It seems to be unresolved (yet) according to this GitHub thread, where apparently types are not properly exported by Gatsby.
As a hacky workaround you can try:
1export { wrapPageElement } from "./src/wrapPageElement";
2export { wrapPageElement } from "./src/wrapPageElement";
3import React from "react";
4import { GatsbyBrowser, GatsbySSR } from "gatsby";
5
6type WrapPageElement =
7 | GatsbyBrowser["wrapPageElement"]
8 | GatsbySSR["wrapPageElement"];
9
10export const wrapPageElement: WrapPageElement = ({ element, props }: any) => {
11 return <div {...props}>{element}</div>;
12};
13One unhandled runtime error found in your files. See the list below to fix it:
14
15Unknown Runtime Error
16
17Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. Check the render method of `PageRenderer`.
18:
19
20No codeFrame could be generated
21type Fn = (...args: Parameters<WrapPageElement>) => ReturnType<WrapPageElement>
22
23export const wrapPageElement: Fn = ({ element, props }: any) => {
24 return <div {...props}>{element}</div>;
25};
26Note: modified from the source in the GitHub's thread
Community Discussions contain sources that include Stack Exchange Network
Tutorials and Learning Resources in Gatsby
Tutorials and Learning Resources are not available at this moment for Gatsby
Share this Page
Get latest updates on Gatsby