[license] Issue with MUI Pro License and RichTreeViewPro Error

[seak0503]

Hi,

I recently purchased a new license for MUI Pro and updated the license code in my React source code. However, the MUI alert has not disappeared.

When I use the RichTreeViewPro, the following error appears.

MUI X: Component not included in your license.
The component you are trying to use is not included in the Pro Plan you purchased.
Your license is from an old version of the Pro Plan that is only compatible with the `@mui/x-data-grid-pro` and `@mui/x-date-pickers-pro` commercial packages.
To start using another Pro package, please consider reaching to our sales team to upgrade your license or visit https://mui.com/r/x-get-license to get a new license key.
Could you please advise me on how to resolve this issue?

Could you please advise me on how to resolve this issue?

I will provide my information below.

My order number (support key)

99118

Error View

package.json

package.json

source code

index.js

import React from "react";
import { createRoot } from "react-dom/client";
import { Provider } from "react-redux";
import { ConnectedRouter } from "connected-react-router";
import { Auth0Provider } from "@auth0/auth0-react";
import { LicenseInfo } from "@mui/x-license";

import { PersistGate } from "redux-persist/integration/react";
import { persistStore } from "redux-persist";

import "react-perfect-scrollbar/dist/css/styles.css";

import "nprogress/nprogress.css";

import "react-quill/dist/quill.snow.css";

import App from "./App";
import reportWebVitals from "./reportWebVitals";
import store, { history } from "src/store";
import { SettingsProvider } from "src/contexts/SettingsContext";
import { UserProvider } from "src/contexts/UserContext";
import { basename, auth0Config, muiConfig } from "src/config";

//import 'src/__mocks__';

LicenseInfo.setLicenseKey(muiConfig.license);

const container = document.getElementById("root");
const root = createRoot(container);

const onRedirectCallback = (appState) => {
  history.push(
    appState && appState.returnTo
      ? appState.returnTo.replace(basename, "")
      : window.location.origin
  );
};

const persistor = persistStore(store);

root.render(
  <Provider store={store}>
    <PersistGate loading={null} persistor={persistor}>
      <SettingsProvider>
        <ConnectedRouter history={history} basename={history.basename}>
          <Auth0Provider
            {...auth0Config}
            redirectUri={`${window.location.origin}${basename}/`}
            onRedirectCallback={onRedirectCallback}
          >
            <UserProvider>
              <App />
            </UserProvider>
          </Auth0Provider>
        </ConnectedRouter>
      </SettingsProvider>
    </PersistGate>
  </Provider>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

viewSample.js

import React from "react";
import Box from "@mui/material/Box";
import { RichTreeViewPro } from "@mui/x-tree-view-pro/RichTreeViewPro";

const ITEMS = [
  {
    id: "grid",
    label: "Data Grid",
    children: [
      { id: "grid-community", label: "@mui/x-data-grid" },
      { id: "grid-pro", label: "@mui/x-data-grid-pro" },
      { id: "grid-premium", label: "@mui/x-data-grid-premium" },
    ],
  },
  {
    id: "pickers",
    label: "Date and Time Pickers",
    children: [
      { id: "pickers-community", label: "@mui/x-date-pickers" },
      { id: "pickers-pro", label: "@mui/x-date-pickers-pro" },
    ],
  },
  {
    id: "charts",
    label: "Charts",
    children: [{ id: "charts-community", label: "@mui/x-charts" }],
  },
  {
    id: "tree-view",
    label: "Tree View",
    children: [{ id: "tree-view-community", label: "@mui/x-tree-view" }],
  },
];

const ViewSample = () => {
  return (
    <Box sx={{ minHeight: 352, minWidth: 300 }}>
      <RichTreeViewPro
        items={ITEMS}
        itemsReordering
        defaultExpandedItems={["grid", "pickers"]}
        experimentalFeatures={{
          indentationAtItemLevel: true,
          itemsReordering: true,
        }}
      />
    </Box>
  );
};

export default ViewSample;

Search keywords:

[michelengelen]

Hey @seak0503 ... this means you are using a license that has been issued before we released the TreeViewPro package. There is a section in the docs explaining what your options are: 5. Component not included in your license

If this does not help please feel free to open a ticket for our customer support here.