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.

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

[DataGrid] Cannot accesas ponyfillGlobal.__MUI_LICENSE_INFO__ on the server. #11322

Closed
jeemyeong opened this issue Dec 6, 2023 · 2 comments
Closed
Labels
component: data grid This is the name of the generic UI component, not the React module!

Comments

@jeemyeong
Copy link

jeemyeong commented Dec 6, 2023

Steps to reproduce

⨯ Error: Cannot access ponyfillGlobal.MUI_LICENSE_INFO on the server. You cannot dot into a client module from a server component. You can only pass the imported name through.

I am using next@14.0.3 and the error occurred in RSC.

'use client';

import { LicenseInfo } from '@mui/x-license-pro';

import { NEXT_PUBLIC_MUI_LICENSE_KEY } from '@/components/env';
import '../initialize';

LicenseInfo.setLicenseKey(NEXT_PUBLIC_MUI_LICENSE_KEY);

export default function ClientInitializer() {
  return null;
}
export default async function RootLayout({
  children,
}: {
  children: ReactNode;
}) {
  return (
    <html lang="en">
      <body>

        <ClientProviders>
        {...}
        </ClientProviders>
        <ClientInitializer />
      </body>
    </html>
  );
}
import { DataGridPro, GridColDef } from '@mui/x-data-grid-pro';

export function Component() {
  const columns: GridColDef[] = [...]
  return (
      <DataGridPro
        rows={...}
        columns={columns}
      />
  );
}

Current behavior

No response

Expected behavior

No response

Context

No response

Your environment

`npx @mui/envinfo`
  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Chrome Version 119.0.6045.199 (Official Build) (arm64)

  System:
    OS: macOS 14.0
  Binaries:
    Node: 18.18.0 - ~/.asdf/installs/nodejs/18.18.0/bin/node
    Yarn: 1.22.19 - ~/.asdf/installs/nodejs/18.18.0/.npm/bin/yarn
    npm: 9.8.1 - ~/.asdf/plugins/nodejs/shims/npm
  Browsers:
    Chrome: 119.0.6045.199
    Edge: 119.0.2151.97
    Safari: 17.0
  npmPackages:
    @emotion/react: 11.11.0 => 11.11.0
    @emotion/styled: 11.11.0 => 11.11.0
    @mui/base:  5.0.0-beta.20
    @mui/core-downloads-tracker:  5.14.14
    @mui/icons-material: 5.14.14 => 5.14.14
    @mui/lab: 5.0.0-alpha.149 => 5.0.0-alpha.149
    @mui/material: 5.14.14 => 5.14.14
    @mui/private-theming:  5.14.14
    @mui/styled-engine:  5.14.14
    @mui/styles: 5.14.14 => 5.14.14
    @mui/system: 5.14.14 => 5.14.14
    @mui/types:  7.2.6
    @mui/utils:  5.14.14
    @mui/x-data-grid: 6.18.3 => 6.18.3
    @mui/x-data-grid-pro: 6.18.3 => 6.18.3
    @mui/x-date-pickers: 6.18.3 => 6.18.3
    @mui/x-date-pickers-pro: 6.18.3 => 6.18.3
    @mui/x-license-pro: 6.10.2 => 6.10.2
    @mui/x-tree-view:  6.0.0-alpha.1
    @types/react: 18.2.31 => 18.2.31
    react: 18.2.0 => 18.2.0
    react-dom: 18.2.0 => 18.2.0
    typescript: 5.1.6 => 5.1.6

Search keywords: nextjs license
Order ID: 69520

@jeemyeong jeemyeong added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Dec 6, 2023
@jeemyeong jeemyeong changed the title [question] Cannot accesas ponyfillGlobal.__MUI_LICENSE_INFO__ on the server. Cannot accesas ponyfillGlobal.__MUI_LICENSE_INFO__ on the server. Dec 6, 2023
@michelengelen
Copy link
Member

michelengelen commented Dec 7, 2023

Hey @jeemyeong
I am not sure what exactly you are trying to do.
The datagrid does not support server side rendering (see this comment for reference), so it should naturally have access to the ponyfillGlobal.__MUI_LICENSE_INFO__.

You should use the 'use client'; directive inside the component implementing your datagrid.

If this does not help you or your issue is something different please feel free to tag me or @cherniavskii directly. Thanks 🙇🏼

@michelengelen michelengelen added component: data grid This is the name of the generic UI component, not the React module! status: waiting for author Issue with insufficient information and removed status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Dec 7, 2023
@michelengelen michelengelen changed the title Cannot accesas ponyfillGlobal.__MUI_LICENSE_INFO__ on the server. [DataGrid] Cannot accesas ponyfillGlobal.__MUI_LICENSE_INFO__ on the server. Dec 7, 2023
@jeemyeong
Copy link
Author

Oh I see, thank you so much

@github-actions github-actions bot added status: waiting for maintainer These issues haven't been looked at yet by a maintainer and removed status: waiting for author Issue with insufficient information labels Dec 7, 2023
@michelengelen michelengelen removed the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Dec 7, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
component: data grid This is the name of the generic UI component, not the React module!
Projects
None yet
Development

No branches or pull requests

2 participants