'gatsby-remark-audio' inside of 'gatsby-plugin-mdx' returning <undefined>...

[rchrdnsh]

Description

I have added gatsyb-remark-audio to gatsby-plugin-mdx and expect to be able to add an audio tag to an mdx file. Instead, the controls of the audio element say error and the <audio> element is wrapped in an <undefined> container element and does not play.

Steps to reproduce

Add gatsby-remark-audio to gatsby-plugin-mdx and add an audio file to an mdx document.

Here is the config I have used:

{
      resolve: `gatsby-plugin-mdx`,
      options: {
        gatsbyRemarkPlugins: [
          {
            resolve: 'gatsby-remark-audio',
            options: {
              preload: 'auto',
              loop: false,
              controls: true,
              muted: false,
              autoplay: false
            }
          },
        ],
      },
    },

...and have added an audio file as per the docs for the plugin, like so:

`audio: ./renegade.mp3`

...or like so:

`audio: /renegade.mp3`

...or like so:

`audio: renegade.mp3`

...and they all return back the same <undefined> containing div with error in the playback controls.

In the browser:

and in the console:

I have not made a minimal repo yet, but I will try to do so in the next few days.

Expected result

I expect to get back a working <audio> html element with controls.

Actual result

Instead I get <undefined> with the audio tag inside of it, and the word error in the audio player controls, and the audio does not play.

Environment

System:
    OS: macOS Mojave 10.14.6
    CPU: (12) x64 Intel(R) Core(TM) i9-8950HK CPU @ 2.90GHz
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 10.12.0 - /usr/local/bin/node
    Yarn: 1.10.1 - /usr/local/bin/yarn
    npm: 6.13.1 - /usr/local/bin/npm
  Languages:
    Python: 2.7.10 - /usr/bin/python
  Browsers:
    Chrome: 78.0.3904.108
    Firefox: 70.0.1
    Safari: 13.0.2
  npmPackages:
    gatsby: ^2.15.29 => 2.18.1
    gatsby-cli: ^2.7.54 => 2.8.13
    gatsby-image: ^2.2.5 => 2.2.33
    gatsby-plugin-create-client-paths: ^2.1.15 => 2.1.17
    gatsby-plugin-layout: ^1.1.5 => 1.1.15
    gatsby-plugin-manifest: ^2.2.2 => 2.2.29
    gatsby-plugin-mdx: ^1.0.57 => 1.0.57
    gatsby-plugin-offline: ^2.2.2 => 2.2.10
    gatsby-plugin-react-helmet: ^3.1.1 => 3.1.15
    gatsby-plugin-sharp: ^2.3.2 => 2.3.2
    gatsby-plugin-stripe: ^1.2.3 => 1.2.3
    gatsby-plugin-styled-components: ^3.1.12 => 3.1.13
    gatsby-plugin-web-font-loader: ^1.0.4 => 1.0.4
    gatsby-remark-audio: ^1.0.2 => 1.0.2
    gatsby-remark-images: ^3.1.33 => 3.1.33
    gatsby-source-filesystem: ^2.1.4 => 2.1.38
    gatsby-transformer-remark: ^2.6.38 => 2.6.38
    gatsby-transformer-sharp: ^2.2.2 => 2.3.5
    gatsby-transformer-yaml: ^2.2.12 => 2.2.17
  npmGlobalPackages:
    gatsby-cli: 2.8.14

[vancodes]

I am also having an issue with this

[sidharthachatterjee]

@rchrdnsh Can you please post a reproduction?

@vancodes Just cloned your repo and ran gatsby build and I'm able to play sounds just fine. Please open another issue (since your project isn't using remark) as this seems unrelated to what the author is describing here.

[rchrdnsh]

sorry, took me minute, been super busy.

Here is a minimal repo:

https://github.com/rchrdnsh/mdx-remark-audio-issue

My other project is using a custom audio context, but i have been experimenting with also using the remark-audio plugin, but can't get it to work. Hopefully the minimal repo helps :-)

[github-actions]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.
If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!
As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

[github-actions]

Hey again!

It’s been 30 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it.
Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to reopen this issue or create a new one if you need anything else.
As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks again for being part of the Gatsby community! 💪💜