Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[data grid] x-data-drid-pro/premium unusable with CDN #13678

Closed
maramizo opened this issue Jun 30, 2024 · 3 comments
Closed

[data grid] x-data-drid-pro/premium unusable with CDN #13678

maramizo opened this issue Jun 30, 2024 · 3 comments
Labels
component: data grid This is the name of the generic UI component, not the React module! status: waiting for author Issue with insufficient information support: pro standard Support request from a Pro standard plan user. https://mui.com/legal/technical-support-sla/

Comments

@maramizo
Copy link

maramizo commented Jun 30, 2024 •
edited
Loading

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
@maramizo maramizo added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Jun 30, 2024
@KenanYusuf KenanYusuf added the component: data grid This is the name of the generic UI component, not the React module! label Jul 1, 2024
@github-project-automation github-project-automation bot moved this to 🆕 Needs refinement in MUI X Data Grid Jul 1, 2024
@KenanYusuf
Copy link
Contributor

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.

@KenanYusuf KenanYusuf added status: waiting for maintainer These issues haven't been looked at yet by a maintainer and removed status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Jul 1, 2024
@cherniavskii
Copy link
Member

This looks like an esm.sh-specific issue. I'm not familiar with the tool.
Do you intend to use data grid packages via esm.sh?

@cherniavskii cherniavskii added the status: waiting for author Issue with insufficient information label Jul 11, 2024
@michelengelen michelengelen changed the title X-Data-Grid-Pro/Premium Unusable with CDN [data grid] x-data-drid-pro/premium unusable with CDN Jul 15, 2024
@michelengelen michelengelen added the support: pro standard Support request from a Pro standard plan user. https://mui.com/legal/technical-support-sla/ label Jul 15, 2024
@github-actions GitHub Actions
Copy link

The issue has been inactive for 7 days and has been automatically closed.

@cherniavskii cherniavskii moved this from 🆕 Needs refinement to ✅ Done in MUI X Data Grid Jul 30, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
component: data grid This is the name of the generic UI component, not the React module! status: waiting for author Issue with insufficient information support: pro standard Support request from a Pro standard plan user. https://mui.com/legal/technical-support-sla/
Projects
MUI X Data Grid
Status: ✅ Done
Milestone
No milestone
Development

No branches or pull requests
4 participants
@maramizo @KenanYusuf @cherniavskii @michelengelen