Uncaught runtime errors React-Redux

[tups]

Describe the bug

Since I updated from version 2 to version 4, I have the following React-Redux error on the API documentation pages

Expected behavior

Let the page generate

Current behavior

Dev page crash and compilation error in build With yarn start and access to the page :

ERROR
could not find react-redux context value; please ensure the component is wrapped in a <Provider>
    at useReduxContext (webpack-internal:///./node_modules/react-redux/es/hooks/useReduxContext.js:31:11)
    at useSelector (webpack-internal:///./node_modules/react-redux/es/hooks/useSelector.js:136:28)
    at MethodEndpoint (webpack-internal:///./node_modules/docusaurus-theme-openapi-docs/lib/theme/ApiExplorer/MethodEndpoint/index.js:6:932)
    at renderWithHooks (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:15487:18)
    at mountIndeterminateComponent (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:20099:13)
    at beginWork (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:21622:16)
    at HTMLUnknownElement.callCallback (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:4165:14)
    at Object.invokeGuardedCallbackDev (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:4214:16)
    at invokeGuardedCallback (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:4278:31)
    at beginWork$1 (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:27486:7)

With yarn build :

 Error: Can't render static file for pathname "/apiculture/devdocs/device/27-ccb-49-b-1-d-6-b-19-eaf-20-b-867992-e-4718-f"
            at generateStaticFile (~/docs/node_modules/@docusaurus/core/lib/ssg.js:119:15)
            at runNextTicks (node:internal/process/task_queues:60:5)
            at process.processImmediate (node:internal/timers:449:9)
            at async ~/docs/node_modules/p-map/index.js:57:22 {
          [cause]: TypeError: Cannot read properties of null (reading 'store')
              at useSelector (server.bundle.js:401269:34)
              at MethodEndpoint (server.bundle.js:69888:776)
              at Uc (server.bundle.js:396785:44)
              at Xc (server.bundle.js:396787:253)
              at Z (server.bundle.js:396793:89)
              at Yc (server.bundle.js:396796:98)
              at $c (server.bundle.js:396795:140)
              at Z (server.bundle.js:396793:345)
              at Xc (server.bundle.js:396788:476)
              at Z (server.bundle.js:396793:89)
        },

Possible solution

Nope

Steps to reproduce

To help, here is the complete configuration:

package.json

user_openapi.yaml

docusaurus.config.js :

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

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

/** @type {import('@docusaurus/types').Config} */
const config = {
  trailingSlash: true,
  title: 'Beekube - Centre d\'aide',
  tagline: 'Tutoriel et aide beekube',
  favicon: 'img/favicon.ico',
  markdown: {
    mermaid: true,
  },
  themes: ["docusaurus-theme-openapi-docs", '@docusaurus/theme-mermaid'],
  // Set the production url of your site here
  url: 'https://www.beekube.com',
  // Set the /<baseUrl>/ pathname under which your site is served
  // For GitHub pages deployment, it is often '/<projectName>/'
  baseUrl: '/apiculture/',

  onBrokenLinks: 'throw',
  onBrokenMarkdownLinks: 'warn',

  // Even if you don't use internalization, you can use this field to set useful
  // metadata like html lang. For example, if your site is Chinese, you may want
  // to replace "en" with "zh-Hans".
  i18n: {
    defaultLocale: 'fr',
    locales: ['fr'],
  },
  plugins: [
    'docusaurus-plugin-sass',
    'docusaurus-plugin-matomo',
    'docusaurus-plugin-image-zoom',
    [
      '@docusaurus/plugin-content-blog',
      {
        id: 'article',
        /**
         * URL route for the blog section of your site.
         * *DO NOT* include a trailing slash.
         */
        routeBasePath: 'article',
        /**
         * Path to data on filesystem relative to site dir.
         */
        path: './article',
        showReadingTime: true,
        blogTitle: "Guides d'apiculture",
        blogDescription: "Guides en lien avec l'apiculture ou l'activité d'apiculteur",
        blogSidebarTitle: 'Les derniers guides',
      },
    ],
    [
      "@docusaurus/plugin-content-docs",
      {
        id: 'devdocs',
        path: "devdocs",
        breadcrumbs: true,
        routeBasePath: "devdocs",
        include: ["**/*.md", "**/*.mdx"],
        sidebarPath: require.resolve('./devdocs/sidebars.js'),

      },
    ],
    [
      "docusaurus-plugin-openapi-docs",
      {
        id: "dev",
        docsPluginId: "devdocs", // e.g. "classic" or the plugin-content-docs id
        config: {
          dev_user: { // "petstore" is considered the <id> that you will reference in the CLI
            specPath: "../../htdocs/docs/user_openapi.yaml", // path or URL to the OpenAPI spec
            outputDir: "devdocs/device", // output directory for generated *.mdx and sidebar.js files
            sidebarOptions: {
              groupPathsBy: "tag",
              categoryLinkSource: "tag",
            },
          }
        }
      }
    ]
  ],
  presets: [
    [
      'classic',
      /** @type {import('@docusaurus/preset-classic').Options} */
      ({
        docs: {
          sidebarPath: require.resolve('./sidebars.js'),
          docItemComponent: '@theme/ApiItem',
        },
        blog: {
          showReadingTime: true,
          blogTitle: 'Actualités',
          blogDescription: 'Actualités sur l\'application apicole Beekube',
          blogSidebarTitle: 'Les derniers articles',
        },
        theme: {
          customCss: require.resolve('./src/css/custom.scss'),
        },
        sitemap: {

        },
        gtag: false,
        googleTagManager: false,
        googleAnalytics: false
      }),
    ],
  ],

  themeConfig:
    /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
    ({
      algolia: {
        // The application ID provided by Algolia
        //... other Algolia params
      },
      image: 'img/share.png',
      navbar: {
        title: 'BEEKUBE',
        logo: {
          href: 'https://www.beekube.com/',
          alt: 'BEEKUBE',
          src: 'img/logo.svg',
        },
        items: [
         // .... Menu
        ],
      },
      footer: {
        // ... Footer
      },
      matomo: {
        // .. Matomo config
      },
      prism: {
        theme: lightCodeTheme,
        darkTheme: darkCodeTheme,
        additionalLanguages: ['bash', 'diff', 'json'],
      },
      zoom: {
        selector: '.markdown :not(em) > img',
        config: {
          background: {
            light: 'rgb(255, 255, 255)',
            dark: 'rgb(50, 50, 50)'
          }
        }
      }
    }),
};

module.exports = config;

Screenshots

Your Environment

• Version used: 4.0.1
• Environment name and version: Node v20.11.1
• Operating System and version (desktop or mobile): macOS Sequoia 15.0
• Link to your project: (old version: v2) https://www.beekube.com/apiculture/devdocs/device/76-be-054-dc-1253-ec-8-d-7-dc-10-abe-3-bd-41-c-3/

[tups]

OK, I found out how to fix my mistake, I had to add docRootComponent and docItemComponent

 [
      "@docusaurus/plugin-content-docs",
      {
        id: 'devdocs',
        path: "devdocs",
        breadcrumbs: true,
        routeBasePath: "devdocs",
        include: ["**/*.md", "**/*.mdx"],
        sidebarPath: require.resolve('./devdocs/sidebars.js'),
        docRootComponent: "@theme/DocRoot", // add @theme/DocRoot
        docItemComponent: "@theme/ApiItem", // add @theme/ApiItem here
      },
    ],
    // ...
]