gatsby-plugin-mdx | gatsby v1 mdx plugin , for gatsby v2 see https | Plugin library

try adding this line:

Not sure if it will work but, instead of using require from ES modules have you tried something like:

If I understood you correctly, the URL that is generated when clicking the previous and next buttons is "concatenating" the slug of the post to the current URL instead of replacing it, isn't it?

So, instead of creating a URL like localhost:8000/blog/next-article is generating a localhost:8000/blog/current-article/next-article.

This is because of the way you generate the links. You can spot the links route just by hovering the links to see that the URL of the previous/next article is being added at the end of the URL instead of replacing it.

This is because you are not adding the correct relativity to the links. Simply use:

There are a few things weird in your code that shouldn't be working despite your said it does.

In React, all components must be capitalized, otherwise, React will interpret them as HTML elements, and because normally a component name doesn't match an HTML tag, it will break because it won't exist.

In your case, both templates must be renamed to:

There are a few things to comment on here:

The render structure is weird. You should do a loop through your data, as you are doing to display the h1 but at the same time, you can take advantage of the loop to display the image of each employee.

In addition, you are using a Gatsby Image v2 GraphQL query structure (gatsby-image) while the render component (GatsbyImage) is from v3 (gatsby-plugin-image). I'd recommend reading the migration guide.

To summarize, when you query for fluid or fixed images as you do while using the ...GatsbyImageSharpFluid fragment you are querying a v2 structure and the render component should be Img(from gatsby-image), that is accepting a fixed or a fluid image. However, when you use a GatsbyImage component, the passed prop should be a image (no matter if it's fixed or fluid). So, you have conflicting plugins and structures. You should get rid of one of them and use the corresponding structure. To recap:

• fixed or fluid GraphQL query: v2 structure, the render component is Img
• GatsbyImage component: v3 structure. I will base my answer on that assuming that you will migrate to v3 (v2 is deprecated).

The issue rises up because as I said,GatsbyImage is expecting an image prop while you are passing a loop at and a wrong query data at:

this part in the mdx file should be rendered as a link and a bold text right?

It doesn't unless you add an MDX Renderer or a markdown parser (like markdown-to-jsx) to parse the markdown syntax into HTML.

In the end, what you are wrapping inside Notice is a plain text that is rendered using the Notice's component JSX structure, where the children is rendered as-is ({children}).

That said, you can try using the MDXRenderer in your Notice component like:

The 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:

The image under images/office2.jpg is automatically rendered because it's under the body of the markdown. When you do:

It's difficult to spot without seeing the site live but I guess that the underlying issue is the gatsby-plugin-mdx version (^3.3.0). According to the changelog, the release note is linked to Gatsby v4.3, which is not compatible with your current Gatsby since yours is 3.14.6 and it requires a major upgrade (Gatsby 4).

That said, you have two options:

• Upgrade Gatsby and all the related dependencies at least until version 4
• Downgrade gatsby-plugin-mdx to 2.14.0 which apparently is compatible to your current Gatsby version.

In both cases, you'll need to get rid of the package-lock.json (or yarn.lock) and reinstall the package to the needed version.