[gatsby-plugin-mdx][gatsby-remark-images] Unique key prop error when using an inline image

[samjulien]

Description

I've been following the recent docs on MDX to create a simple project. I've successfully generated pages programmatically. When I added gatsby-remark-imges using these instructions, adding an inline image (such as ![thing](./my-image.jpg)) results in:

Warning: Each child in a list should have a unique "key" prop.

Check the render method of `MDXContent`.

The blurred image then appears above the proper image.

This happens on both my programmatically created pages (which uses a layout with MDXRenderer) and my pages pages (which uses a simple layout passing in {children}.

Steps to reproduce

Follow MDX instructions in docs: Add gatsby-remark-images and gatsby-transformer-sharp to plugins, add basic config, try to add an inline image to the page.

Here's my plugin config:

plugins: [
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `events`,
        path: `${__dirname}/content/events/`,
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `${__dirname}/src/images`,
      },
    },
    {
      resolve: `gatsby-plugin-mdx`,
      options: {
        extensions: [`.mdx`, `.md`],
        defaultLayouts: {
          default: require.resolve("./src/pages/markdownpage-template.js"),
        },
        gatsbyRemarkPlugins: [
          {
            resolve: `gatsby-remark-images`,
            options: {
              maxWidth: 600,
            },
          },
        ],
      },
    },
    `gatsby-plugin-styled-components`,
  ],

Expected result

Adding an inline image using markdown should result in successfully rendering an image.

Actual result

An error appears in the console about MDXContent needing each child in a list to have a "key" prop, and the blurred image appears on top of the plain image.

Environment

System:
OS: macOS 10.14.6
CPU: (6) x64 Intel(R) Core(TM) i5-8500B CPU @ 3.00GHz
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 10.15.3 - ~/.nvm/versions/node/v10.15.3/bin/node
Yarn: 1.14.0 - ~/.nvm/versions/node/v10.15.3/bin/yarn
npm: 6.4.1 - ~/.nvm/versions/node/v10.15.3/bin/npm
Languages:
Python: 2.7.10 - /usr/bin/python
Browsers:
Chrome: 76.0.3809.100
Firefox: 67.0.4
Safari: 12.1.2
npmPackages:
gatsby: ^2.8.2 => 2.8.2
gatsby-plugin-mdx: ^1.0.23 => 1.0.23
gatsby-plugin-sharp: ^2.2.12 => 2.2.12
gatsby-plugin-styled-components: ^3.1.2 => 3.1.2
gatsby-remark-images: ^3.1.12 => 3.1.12
gatsby-source-filesystem: ^2.1.9 => 2.1.9
npmGlobalPackages:
gatsby-cli: 2.6.4

[samjulien]

Dupe of #15486 and others.