search

mui / mui-x

MUI X: Build complex and data-rich applications using a growing list of advanced React components, like the Data Grid, Date and Time Pickers, Charts, and more!
https://mui.com/x/
3.92k stars 1.19k forks source link

X-Data-Grid-Pro/Premium Unusable with CDN #13678

Open maramizo opened 6 days ago

maramizo commented 6 days ago

Steps to reproduce

This following snippet is based on the original snippet here.

<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="initial-scale=1, width=device-width"/>
    <link rel="preconnect" href="https://fonts.googleapis.com"/>
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap"/>
    <script type="importmap">
        {
          "imports": {
            "react": "https://esm.sh/react@18.3.0",
            "react/jsx-runtime": "https://esm.sh/react@18.3.0/jsx-runtime"
          }
        }
    </script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <script type="text/babel" data-type="module">
      import * as React from "https://esm.sh/react@18.3.0";
      import { createRoot } from "https://esm.sh/react-dom@18.3.0";
      import { DataGridPro } from 'https://esm.sh/@mui/x-data-grid-pro?external=react';

      const columns = [{"field": "name", "headerName": "Location Name", "flex": 1}];
      const rows = [{name: "Some Name"}]

      window.onload = function () {
        const element = document.getElementById('yes');
        createRoot(element).render(
          <div>
            <DataGridPro
                rows={rows}
                columns={columns}
                getRowId={(row) => row.name}
              />
          </div>
        );
      }
    </script>
</head>

<body>
    <div id="yes">
    </div>
</body>

Current behavior

react-dom.production.min.js:127 Uncaught Error: MUI X: Could not find the data grid context.
It looks like you rendered your component outside of a DataGrid, DataGridPro or DataGridPremium parent component.
This can also happen if you are bundling multiple versions of the data grid.

Expected behavior

For the table to render properly.

Context

Implementing Material UI into the browser directly (can't use NPM etc).

Your environment

Not relevant, tested on all major browsers.

Search keywords: cdn Order ID: 76905

KenanYusuf commented 5 days ago

Hi @maramizo, thank you for raising the issue and providing reproduction steps.

I managed to reproduce the issue, seeing the same console error: https://codepen.io/KenanYusuf/pen/bGyXGwP.

Moving to the project board for discussion and prioritisation with the team.