Getting Error: Cannot find module 'docusaurus-plugin-openapi' when trying to use as plugin

I’m following the instructions to update to 0.2.2. I installed docusaurus-preset-openapi and uninstalled docusaurus-plugin-openapi as I understood that docusaurus-preset-openapi already includes the plugin.

Just using the preset it works, but when I try to have multiple OpenApi definitions where I need to add a plugin entry I get an Error: Cannot find module 'docusaurus-plugin-openapi'.

My package.json:

{
  "name": "docs",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "backoffice-rest-api": "openapi-comment-parser ../source/server/rt backoffice_rest_api.json",
    "kiosk-rest-api": "openapi-comment-parser ../source/server/rtkiosk kiosk_rest_api.json",
    "docusaurus": "docusaurus",
    "start": "docusaurus start",
    "build": "docusaurus build",
    "swizzle": "docusaurus swizzle",
    "deploy": "docusaurus deploy",
    "clear": "docusaurus clear",
    "serve": "docusaurus serve",
    "write-translations": "docusaurus write-translations",
    "write-heading-ids": "docusaurus write-heading-ids",
    "watch": "nodemon -e yaml,js --exec \"openapi-comment-parser src docs/openapi.json && node src/index.js\"",
    "api": "openapi-comment-parser test openapi.json"
  },
  "dependencies": {
    "@docusaurus/core": "2.0.0-beta.9",
    "@docusaurus/preset-classic": "2.0.0-beta.9",
    "@mdx-js/react": "^1.6.21",
    "@svgr/webpack": "^5.5.0",
    "clsx": "^1.1.1",
    "docusaurus-dmd-plugin": "file:../docusaurus-dmd-plugin",
    "docusaurus-preset-openapi": "^0.2.2",
    "file-loader": "^6.2.0",
    "prism-react-renderer": "^1.2.1",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "url-loader": "^4.1.1"
  },
  "browserslist": {
    "production": [
      ">0.5%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "docusaurus-lunr-search": "^2.1.15",
    "jsdoc-to-markdown": "^7.1.0",
    "mermaid": "^8.13.4",
    "openapi-comment-parser": "^1.0.0",
    "remark-mermaid": "^0.2.0"
  }
}

My docusaurus.config.js

// @ts-check
// Note: type annotations allow type checking and IDEs autocompletion

const remarkMermaid = require("remark-mermaid");
const lunrSearch = require.resolve("docusaurus-lunr-search");

const lightCodeTheme = require('prism-react-renderer/themes/github');
const darkCodeTheme = require('prism-react-renderer/themes/dracula');

/** @type {import('@docusaurus/types').Config} */
const config = {
  title: 'Docs',
  tagline: 'Enjoy Docs!',
  url: 'https://your-docusaurus-test-site.com',
  baseUrl: '/',
  onBrokenLinks: 'throw',
  onBrokenMarkdownLinks: 'warn',
  favicon: 'img/favicon.ico',
  organizationName: 'Docs', // Usually your GitHub org/user name.
  projectName: 'Docs', // Usually your repo name.

  scripts: [
    "https://cdnjs.cloudflare.com/ajax/libs/mermaid/8.8.4/mermaid.min.js",
    "/init.js"
  ],

  plugins: [
    //[
    //  "docusaurus-plugin-openapi", {
    //    id: "backoffice_rest_api",
    //    routeBasePath: "rest-api-backoffice",
    //    path: "./rest_api_backoffice.json",
    //    proxy: {
    //      "/proxy": {
    //        target: "http://localhost:8090",
    //        pathRewrite: { "^/proxy": "" }
    //      }
    //    }
    //  }
    //],
    ["docusaurus-plugin-openapi", {
       id: "kiosk_rest_api",
       path: "rest-api-kiosk",
       openapiPath: "./rest_api_kiosk.json",
       proxy: {
          "/proxy": {
             target: "http://localhost:8091",
             pathRewrite: { "^/proxy": "" }
          }
       }
    }],
    [
      '@docusaurus/plugin-content-docs',
      {
        id: 'js_docs_backoffice',
        path: 'js_docs_backoffice',
        routeBasePath: 'js-docs-backoffice',
        sidebarPath: require.resolve('./sidebars.js'),
      }, 
    ],
    [
      '@docusaurus/plugin-content-docs',
      {
        id: 'js_docs_kiosk',
        path: 'js_docs_kiosk',
        routeBasePath: 'js-docs-kiosk',
        sidebarPath: require.resolve('./sidebars.js'),
      }, 
    ],
    [
      '@docusaurus/plugin-content-docs',
      {
        id: 'js_docs_student',
        path: 'js_docs_student',
        routeBasePath: 'js-docs-student',
        sidebarPath: require.resolve('./sidebars.js'),
      }, 
    ],
    lunrSearch
  ],

  presets: [
    [
      'docusaurus-preset-openapi',
      /** @type {import('@docusaurus/preset-classic').Options} */
      ({
        docs: {
          sidebarPath: require.resolve('./sidebars.js'),
          // Please change this to your repo.
          remarkPlugins: [[remarkMermaid, { simple: true }]]
        },
        blog: {
          showReadingTime: true,
          // Please change this to your repo.
        },
        theme: {
          customCss: require.resolve('./src/css/custom.css'),
        },
        api: {
          path: './rest_api_backoffice.json',
          routeBasePath: 'rest-api-backoffice',
        },
      }),
    ],
  ],

  themeConfig:
    /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
    ({
      hideableSidebar: true,
      navbar: {
        hideOnScroll: true,
        title : 'Docs',
        logo: {
          alt : 'Logo',
          src : 'img/logo.svg',
        },
        items: [
          {
            type     : 'doc',
            docId    : 'intro',
            position : 'left',
            label    : 'Tutorial',
          },
          {
            type: 'dropdown',
            label: 'JS Docs',
            position: 'left',
            items: [
              {
                type: 'doc',
                label: 'Backoffice',
                docsPluginId: 'js_docs_backoffice',
                docId: 'intro',
              },
              {
                type: 'doc',
                label: 'Kiosk',
                docsPluginId: 'js_docs_kiosk',
                docId: 'intro',
              },
              {
                type: 'doc',
                label: 'Student',
                docsPluginId: 'js_docs_student',
                docId: 'intro',
              },
            ],
          },
          {
            type: 'dropdown',
            label: 'REST APIs',
            position: 'left',
            items: [
              {
                to: 'rest-api-backoffice',
                label: 'Backoffice',
              },
              {
                to: 'rest-api-kiosk',
                label: 'Kiosk',
              },
              {
                to: 'rest-api-student',
                label: 'Student',
              },
            ],
          },
          {
             to       : '/blog',
             label    : 'Blog',
             position : 'left'
          },
          {
            href     : 'https://gitlab.com',
            label    : 'GitLab',
            position : 'right',
          },
        ],
      },
      footer: {
        style: 'dark',
        links: [
          {
            title: 'Docs',
            items: [
              {
                label: 'Tutorial',
                to: '/docs/intro',
              },
            ],
          },
          {
            title: 'Community',
            items: [
              {
                label: 'Stack Overflow',
                href: 'https://stackoverflow.com/questions/tagged/docusaurus',
              },
              {
                label: 'Discord',
                href: 'https://discordapp.com/invite/docusaurus',
              },
              {
                label: 'Twitter',
                href: 'https://twitter.com/docusaurus',
              },
            ],
          },
          {
            title: 'More',
            items: [
              {
                label: 'Blog',
                to: '/blog',
              },
              {
                label: 'GitLab',
                href: 'https://gitlab.com',
              },
            ],
          },
        ],
        copyright: `Copyright © ${new Date().getFullYear()} Company.`,
      },
      prism: {
        theme: lightCodeTheme,
        darkTheme: darkCodeTheme,
      },
    }),
};

module.exports = config;

Also, Is it possible to use just multiple plugins and skip using the docusaurus-preset-openapi preset?

[bourdakos1]

Awesome, thanks!

However, I don’t understand how this proxy option used to work with this plugin. It’s not documented anywhere and I don’t find this in the source code either 🤷‍♂️ maybe this plugin used to spread unknown options to Webpack config? 🤔

I’m just as confused as you are haha

[Josh-Cena]

Oh wow, neither was I aware about config.devServer… In fact I only started contributing at around alpha.73, and only got familiar with Webpack quite recently, so I’d appreciate it if you can send a ticket (either bug report or feature request) so we can keep track of the dev server configuration issue