3

I am using this Portfolio Starter Kit for my travel blog. The only feature I am missing there is a way to embed youtube videos into the blog post, so that they would play on-the-spot, without opening the video on youtube.com on a new page.

I used ChatGPT-s help, but since I am new to Next.js and Nextra I am unable to spot ChatGPT-s mistakes and debug them. This was it's recommendation:

  1. Install the react-youtube package in your project:

    yarn add react-youtube

  2. Create a custom MDX component to render YouTube videos: Create a new file in your project directory called YouTube.js. In this file, define a new component that uses the YouTube component from the react-youtube library to render YouTube videos. Here is an example of what this file could look like:

    import YouTube from 'react-youtube';

const YouTubeComponent = ({ videoId }) => {
  const opts = {
    height: '360',
    width: '640',
    playerVars: {
      // https://developers.google.com/youtube/player_parameters
      autoplay: 0,
    },
  };

  return <YouTube videoId={videoId} opts={opts} />;
};

export default YouTubeComponent;```

  3. Register the custom MDX component in your Next.js configuration: In your Next.js configuration file (usually next.config.js), you can register the YouTubeComponent as a custom MDX component by adding the following code:

    const withMDX = require('@next/mdx')({
  extension: /\.mdx?$/,
  options: {
    remarkPlugins: [],
    rehypePlugins: [],
    // Register custom components here
    // Here, we're registering a component called 'youtube' that uses our custom YouTubeComponent
    components: {
      youtube: './components/YouTube',
    },
  },
});

module.exports = withMDX();

  4. Use the custom component in your Markdown content: In your Markdown content, you can now use the 'youtube' tag to embed YouTube videos. Here is an example of what this could look like:

    Here is a YouTube video:

<youtube videoId="dQw4w9WgXcQ" />

After adding all this and runnin yarn run build I get this error:

Failed to compile.

./pages/ajaveeb/2023-02-18-youtube-embedding.mdx
TypeError [ERR_INVALID_ARG_TYPE]: The "from" argument must be of type string. Received undefined
    at new NodeError (node:internal/errors:400:5)
    at validateString (node:internal/validators:163:11)
    at Object.relative (node:path:1191:5)
    at loader (file:///Users/kristjan.roosild/repos/what-does-this-button-do/node_modules/nextra/dist/loader.mjs:85:42)

Here is the PR of the changes https://github.com/kristjanr/what-does-this-button-do/pull/1/files

kristjanroosild
  • 69
  • 1
  • 8

1 Answers1

0

for typescript use this import YouTube, { YouTubeProps } from 'react-youtube';

vampirekabir
  • 89
  • 9