MichaelDeBoey/gatsby-remark-embedder

youtube embed not working once deployed to netlify

Closed this issue · 12 comments

bradgarropy commented
  • gatsby-remark-embedder version: 1.7.0
  • node version: 8.17.0
  • npm (or yarn) version: 6.13.4

Relevant code or config

// gatsby-config.js

{
    resolve: "gatsby-transformer-remark",
    options: {
        plugins: [
            {
                resolve: "gatsby-remark-images",
                options: {
                    maxWidth: 700,
                },
            },
            {
                resolve: "gatsby-remark-autolink-headers",
                options: {
                    maintainCase: false,
                    removeAccents: true,
                },
            },
            {
                resolve: "gatsby-remark-prismjs",
            },
            {
                resolve: "gatsby-remark-embedder",
            },
        ],
    },
},
// post.md

https://youtu.be/ZL4NA9mXns8

What you did:
Pasted the above YouTube link into a Markdown document to be processed by remark, which should include gatsby-remark-emedder. Everything works great locally running gatsby develop and gatsby build with node v12.13.1. Then I pushed to Netlify where gatsby build ran successfully.

What happened:
The published site does not embed the YouTube video successfully. There are no failed network requests or console errors.

Reproduction repository:
https://github.com/bradgarropy/bradgarropy.com/tree/66ce959721b485949e2d3ac3f87dfbef880a3d9a

Problem description:
YouTube embed not inserted when building on Netlify.

Suggested solution:
???

bradgarropy commented

Ah! Found out that Netlify's default version of Node.js is very old.
Specifying a Node.js version of 12 fixed the issue!

bradgarropy commented

Reopening as @MichaelDeBoey stated that this plugin should work with Node v8.

bradgarropy commented

That was because I had set the NODE_VERSION environment variable to 12 in Netlify.
Here is a link to a specific deploy that did not work as intended. And here is a link to the repository at that point.

MichaelDeBoey commented

I'm going to close this one, since I'll release a major version with updated Node dependency.

  • 👍1
ilyamkin commented

@MichaelDeBoey The issue with Node 8 in the URL object. If you import URL explicitly const URL = require('url').URL;, then the plugin would work.
I understand that you want to update Node with a major release, do you think it still makes sense to fix 1.x.x version as well compatibility wise? I can submit PR.

https://nodejs.org/es/blog/release/v8.0.0/#say-hello-to-the-whatwg-url-parser

MichaelDeBoey commented

@ilyamkin Hmmm that’s weird, ‘cause I think that part is just copied over from @kentcdodds’ website repo.
So that would mean the plugin never worked on Node 8.
But that should be impossible because we had tests for Twitter & YouTube from the start

ilyamkin commented

So I see the initial commit in this repo and it has const { URL } = require('url') which works in Node 8.

gatsby-remark-embedder/src/get-youtube-html.js

Line 1 in 46bc578

const { URL } = require('url');

Then getUrlString moves to the index.js and relies on URL global variable which is introduced in Node 10

MichaelDeBoey commented

@ilyamkin We still have a import { URL } from 'url'; in each transformer file.

But in index.js we indeed rely on the global URL.

gatsby-remark-embedder/src/index.js

Line 9 in 2a16cd2

return new URL(urlString).toString();

I'm happy to accept a PR that fixes this if you want. 🙂

  • 👍1
MichaelDeBoey commented

@all-contributors Please add @bradgarropy for bug

  • 😄1
MichaelDeBoey commented

🎉 This issue has been resolved in version 1.11.1 🎉

The release is available on:

Your semantic-release bot 📦🚀