Getting: 'Error: Unable to find plugin "gatbsy-remark-videos". Perhaps you need to install its package?'

[mangosing]

I am trying to implement this plugin to work with my self hosted videos. Currently getting 'Error: Unable to find plugin "gatbsy-remark-videos". Perhaps you need to install its package?' error during plugin loading. My gatsby-config.js looks like so:

module.exports = {
  plugins: [
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    "gatsby-transformer-remark",
    {
      resolve: `gatsby-remark-copy-linked-files`,
      options: {},
    },
    {
      resolve: "gatsby-plugin-mdx",
      options: {
        extensions: [".mdx", ".md"],
        gatsbyRemarkPlugins: [
          {
            resolve: `gatsby-remark-copy-linked-files`,
            options: {},
          },
          {
            resolve: `gatsby-remark-videos`,
            options: {
              pipelines: [
                {
                  name: "vp9",
                  transcode: chain =>
                    chain
                      .videoCodec("libvpx-vp9")
                      .noAudio()
                      .outputOptions(["-crf 20", "-b:v 0"]),
                  maxHeight: 480,
                  maxWidth: 900,
                  fileExtension: "webm",
                },
                {
                  name: "h264",
                  transcode: chain =>
                    chain
                      .videoCodec("libx264")
                      .noAudio()
                      .addOption("-profile:v", "main")
                      .addOption("-pix_fmt", "yuv420p")
                      .outputOptions(["-movflags faststart"])
                      .videoBitrate("1000k"),
                  maxHeight: 480,
                  maxWidth: 900,
                  fileExtension: "mp4",
                },
              ],
            },
          },
          {
            resolve: `gatsby-remark-images`,
            options: {
              maxWidth: 1200,
              linkImagesToOriginal: false,
            },
          },
        ],
        plugins: [`gatsby-remark-images`, `gatsby-remark-videos`],
      },
    },
    `gatsby-transformer-ffmpeg`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `pages`,
        path: `${__dirname}/src/videos/`,
      },
    },
  ],
}

Any and all help in getting this working or what I am doing wrong is much appreciated. Thank you

[Mike-Dax]

Could you please post your package.json?

[mangosing]

{
  "name": "gatsby-starter-default",
  "private": true,
  "description": "A simple starter to get up and developing quickly with Gatsby",
  "version": "0.1.0",
  "author": "Kyle Mathews <mathews.kyle@gmail.com>",
  "dependencies": {
    "@mdx-js/mdx": "^1.5.0",
    "@mdx-js/react": "^1.5.0",
    "cloudinary-react": "^1.2.1",
    "gatsby": "^2.15.28",
    "gatsby-image": "^2.2.23",
    "gatsby-plugin-ffmpeg": "^0.3.1",
    "gatsby-plugin-manifest": "^2.2.20",
    "gatsby-plugin-mdx": "^1.0.46",
    "gatsby-plugin-offline": "^3.0.11",
    "gatsby-plugin-react-helmet": "^3.1.10",
    "gatsby-plugin-sharp": "^2.2.27",
    "gatsby-remark-copy-linked-files": "^2.1.24",
    "gatsby-remark-embed-video": "^2.0.0",
    "gatsby-remark-images": "^3.1.25",
    "gatsby-remark-responsive-iframe": "^2.2.21",
    "gatsby-remark-videos": "^0.3.5",
    "gatsby-source-filesystem": "^2.1.28",
    "gatsby-transformer-ffmpeg": "^0.3.7",
    "gatsby-transformer-remark": "^2.6.27",
    "gatsby-transformer-sharp": "^2.2.19",
    "prop-types": "^15.7.2",
    "react": "^16.9.0",
    "react-dom": "^16.9.0",
    "react-helmet": "^5.2.1"
  },
  "devDependencies": {
    "prettier": "^1.18.2"
  },
  "keywords": [
    "gatsby"
  ],
  "license": "MIT",
  "scripts": {
    "build": "gatsby build",
    "develop": "gatsby develop",
    "format": "prettier --write \"**/*.{js,jsx,json,md}\"",
    "start": "npm run develop",
    "serve": "gatsby serve",
    "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing \""
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/gatsbyjs/gatsby-starter-default"
  },
  "bugs": {
    "url": "https://github.com/gatsbyjs/gatsby/issues"
  }
}

[JimLynchCodes]

I am getting the same error as OP. I think this library may be broken. @Mike-Dax ?

[Mike-Dax]

I've found the issue I think, it's actually a bug in Gatsby's plugin resolution.

I've created an issue and a PR upstream.

https://github.com/gatsbyjs/gatsby/issues/18848 https://github.com/gatsbyjs/gatsby/pull/18849

[Mike-Dax]

The PR has been merged upstream, just awaiting a release then we can test it.

[muuvmuuv]

Try adding plugins: ['gatsby-remark-videos'], to your gatsby-plugin-mdx options.