Upgrade to Docusarus v3

[karl-cardenas-coding]

We need to upgrade Docusaurs to the newest version of the framework.

PR #1914 will track this work.

[karl-cardenas-coding]

Hey @nagesh161007 , we could use your input. The OpenAPI plugin project is currently working on releasing support for Docusarus v3. We are using the latest beta module.

However, when we do make start we get an error related to import scope.

npm run start

> spectro-cloud-docs@4.0.0 start
> docusaurus start --host 0.0.0.0 --port 9000

[INFO] Starting the development server...
/Users/karlcardenas/projects/spectro-cloud/librarium/docs/api-content/api-docs/v1/sidebar.ts:1
import {SidebarConfig} from "@docusaurus/plugin-content-docs/src/sidebars/types";
^^^^^^

SyntaxError: Cannot use import statement outside a module

We're unsure how to go about this, as they are mixing typescript and vanilla JS in the upgrade. We figured you might have an idea on how to proceed 😄

[nagesh161007]

Sure @karl-cardenas-coding . Will check this today and let you know.

[karl-cardenas-coding]

@nagesh161007 I told the team I'm putting up the Bat sign, tagging you 😀

[nagesh161007]

Hi @karl-cardenas-coding,

Before

module.exports = {
  apiSidebar: [
    {
      type: "doc",
      id: "introduction",
      label: "Introduction",
    },
    {
      type: "doc",
      id: "samples",
      label: "Example Usage",
    },
    {
      type: "doc",
      id: "postman-collection",
      label: "Postman collection",
    },
    {
      type: "category",
      label: "Palette API V1",
      link: {
        type: "generated-index",
        title: "Palette API V1",
      },
      items: (() => {
        try {
          return require("./docs/api-content/api-docs/v1/sidebar.ts");
        } catch (error) {
          console.log(error);
          return [];
        }
      })(),
    },
  ],
};

After

module.exports = {
  apiSidebar: [
    {
      type: "doc",
      id: "introduction",
      label: "Introduction",
    },
    {
      type: "doc",
      id: "samples",
      label: "Example Usage",
    },
    {
      type: "doc",
      id: "postman-collection",
      label: "Postman collection",
    },
    {
      type: "category",
      label: "Palette API V1",
      link: {
        type: "generated-index",
        title: "Palette API V1",
      },
      items: require("./docs/api-content/api-docs/v1/sidebar.ts"),
    },
  ],
};

In apisidebar.js file removing the error checks for importing solved the issue. Can you please check and let me know if you face the import issue now.

[karl-cardenas-coding]

@nagesh161007 in typical fashion, you elegantly solve the issue. Thank you so much ❤️
Question, was the import namespace conflict caused by the async function we used to pull in the sidebar items?

[nagesh161007]

@karl-cardenas-coding . I think the way of importing inside the function was causing the module resolution errors for typescript files. Need to investigate further for the exact reason for the issue

[karl-cardenas-coding]

It's certainly a new scenario that I haven't seen before. Again, thank you @nagesh161007, for all your help. Happy holidays to you and your family 🎄 🎁

[nagesh161007]

@karl-cardenas-coding Happy Holidays Karl 🎄 🎁

[nagesh161007]

@karl-cardenas-coding . If our team need any help regarding migration for Docusaurus V3 please let me know. I am happy to help

[karl-cardenas-coding]

Thank you @nagesh161007. It should be smooth sailing now that you unlocked us. Thanks again but we'll make sure to turn on the bat signal if help is needed ☺️

[nagesh161007]