Terminé de escribir una pequeña aplicación de blog usando Gatsby y React . Todo funciona bien cuando lo pruebo localmente. Así que procedo con la gatsby build de Gatsby e implemento la carpeta de compilación en Netlify . Sin embargo, después de la implementación, el contenido de algunas de las páginas no se muestra a pesar de que localmente todo funciona bien.

Descripción del problema : tengo una barra de navegación con "Inicio", "Cuidado de la salud", "Tecnología", "Robótica", "Publicaciones", "Boletín", y cada vez que un usuario hace clic en, por ejemplo, "Robótica", una serie de publicaciones de esa categoría se muestra. Ahora, localmente, todo funciona bien, pero tan pronto como implemento, solo puedo ver la página "Publicaciones" que contiene todas las publicaciones. Las otras opciones de la barra de navegación no muestran las otras categorías de publicaciones.

Debajo del error que recibo de la terminal:

warn Non-deterministic routing danger: Attempting to create page: "/healthcare/", but page "/healthcare" already exists This could lead to non-deterministic routing behavior

warn Non-deterministic routing danger: Attempting to create page: "/robotics/", but page "/robotics" already exists This could lead to non-deterministic routing behavior

warn Non-deterministic routing danger: Attempting to create page: "/technology/", but page "/technology" already exists This could lead to non-deterministic routing behavior

Esto me lleva a pensar que algunas páginas no se procesan en el momento adecuado, sin embargo, esto no explica la diferencia entre el funcionamiento perfecto de localhost y la versión implementada que no funciona correctamente.

Debajo de mi gatsby-node.js

 const path = require('path') // create pages dynamically exports.createPages = async ({ graphql, actions }) => { // from actions we can destructure createPage const { createPage } = actions // below we will be running two queries at the same time // instead of one query only const result = await graphql(` { allMdx { nodes { frontmatter { slug } } } category: allMdx { distinct(field: frontmatter___category) } } `) result.data.allMdx.nodes.forEach(({ frontmatter: { slug } }) => { createPage({ path: `/posts/${slug}`, component: path.resolve(`src/templates/post-template.js`), context: { slug, }, }) }) result.data.category.distinct.forEach(category => { createPage({ path: `/${category}`, component: path.resolve(`src/templates/category-template.js`), context: { category, }, }) }) }

A continuación también se encuentra el archivo post-template.js

 const PostTemplate = ({data}) => { const { mdx: { frontmatter: {title, category, image, date}, body,}, } = data; return ( <Layout> <Hero/> <Wrapper> {/* post info */} <article> <Image fluid={image.childImageSharp.fluid} /> <div className="post-info"> <span>{category}</span> <h2>{title}</h2> <p>{date}</p> <div className="underline"></div> </div> <MDXRenderer>{body}</MDXRenderer> </article> {/* banner */} <article> <Banner/> </article> </Wrapper> </Layout> ) } export const query = graphql` query GetSinglePost($slug: String) { mdx(frontmatter: {slug: {eq: $slug}}) { frontmatter { title category date(formatString: "MMMM Do, YYYY") image { childImageSharp { fluid { ...GatsbyImageSharpFluid } } } } body } } ` const Wrapper = styled.section` // style goes here ... ` export default PostTemplate

y el archivo category-template.js

 const CategoryTemplate = props => { console.log(props); const { pageContext: { category }, } = props; const { data: { categories: {nodes:posts} } } = props; return ( <Layout> <Hero/> <Posts posts={posts} title={`category / ${category}`}/> </Layout> ) } export const query = graphql` query GetCategories($category: String) { categories: allMdx(sort: {fields: frontmatter___date, order: DESC}, filter: {frontmatter: {category: {eq: $category}}}) { nodes { excerpt frontmatter { title author category date(formatString: "MMMM, Do, YYYY") slug readTime image { childImageSharp { fluid { ...GatsbyImageSharpFluid } } } } id } } } ` export default CategoryTemplate

Debajo de la estructura del componente de la página de robotics (todos los demás componentes de la página de healthcare y technology tienen exactamente la misma estructura, por lo que solo incluyo uno)

robótica.js

 const robotics = () => { return ( <Layout> <SEO title="Robotics"/> <Hero /> <h2>robotics page</h2> </Layout> ) } export default robotics

Para resolver este problema, investigué mucho, pero antes me gustaría señalar que ya limpié y volví a implementar la misma aplicación un par de veces antes. Entonces, lo que intenté hasta ahora:

1. sudo gatsby clean && sudo gatsby develop después de que estaba funcionando Hice sudo gatsby build

Después de implementar la carpeta de compilación, algunas páginas no se mostraban correctamente, así que:

2. sudo m -rf node_modules sudo rm -rf public/ y sudo rm -rf package-lock.json y procedió con:
3. sudo npm install (si es necesario, debe hacer sudo nom install --unsafe-perm ) y
4. sudo gatsby develop && sudo gatsby build

Pero desafortunadamente, el mismo resultado exacto: localhost todo funciona bien y en Netlify algunas páginas no se mostraban en absoluto.

Así que investigué más y estudié esta publicación que representa exactamente el mismo problema que tengo. Lamentablemente no se aceptó ninguna respuesta. Pero traté de aplicar la sugerencia y, de hecho, en mi gatsby-node.js tenía:

 exports.createPages = async ({ graphql, actions, reporter }) => { const yourQuery= await graphql( ` { parameters here } ` if (yourQuery.errors) { reporter.panicOnBuild(`Error while running GraphQL query.`); return; }

Pero nada pasó.

Estudié esto y esto también . Esta publicación dice que "las páginas MDX no pueden estar actualmente en el mismo directorio que las páginas JSX", pero no estoy seguro de que esto sea exacto y no lo vi en la documentación oficial, un ejemplo que muestra que no se debe hacer eso.

Por favor, guíame a una posible solución en este punto.