[data grid][docs] CSS loader needed for x-data-grid v8.0.0?

[cmdcolin]

Related page

https://mui.com/blog/mui-x-v8/

Kind of issue

Unclear explanations

Issue description

I saw that between v8.0.0-beta.3 and v8.0.0 of x-data-grid maybe there is a new need to use a CSS loader

I didn't see this mentioned in the release notes so just curious if true

the file packages/x-data-grid/src/index.css might be relevant

I opened this as a docs issue as I didn't see a note about a CSS loader being needed in the announcement https://mui.com/blog/mui-x-v8/ or migration guide https://mui.com/x/migration/migration-data-grid-v7/

Also, the announcement refers to a broken link https://mui.com/x/migration/ (this is a 404)

Congrats on the release all around though! looks great !

Context

Testing out using v8.0.0, and a webpack config that we had that did not have a css-loader failed with

ERROR in ../../node_modules/@mui/x-data-grid/esm/index.css 3:0
Module parse failed: Unexpected token (3:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| /* Placeholder file to ensure CSS imports are working */
|
> .MuiDataGrid {
|   display: block;
| }

Search keywords: css

[ddolcimascolo]

Same here with Vitest tests. Production build with Vite alone works fine.

I think it comes from the fact that Vitest does not transform node_modules by default. Adding X packages to server.deps.inline does the trick. It's true that it should be mentioned in the docs.

The root cause of this issue is that MUI packages target browsers where importing CSS modules is supported. This however, does not work in Node and a fair amount of us test using Jest, vitest or other Node-based testing frameworks...

Cheers, David

[ddolcimascolo]

For what it's worth, I'm a paying customer with order ID 78178

[arminmeh]

@cmdcolin @ddolcimascolo

thanks for reporting and the info Issue is caused by https://github.com/mui/mui-x/pull/17214 @romgrk can you add necessary details to the migration guide?

Also, the announcement refers to a broken link mui.com/x/migration (this is a 404)

@joserodolfofreitas we don't have an overview page for the migrations should the link be updated to the first migration guide (data grid)?

[mfenn]

Any idea how to fix this for Next.js v15 with pages router?

[cherniavskii]

Turns out CSS imports from node_modules are only supported in App Router. For Pages router, they never lifted this limitation: https://github.com/vercel/next.js/issues/19936#issuecomment-1352888527

[joserodolfofreitas]

Thanks for flagging the 404. https://github.com/mui/material-ui/pull/45945

[joserodolfofreitas]

Regarding the explanation, we should indeed have communicated better. We decided to leave the section out of the blog for now because the feature is not ready, but we're working toward a design-agnostic data grid (that doesn't bundle Material UI). We'll soon properly communicate the intention with the whole effort.

[cherniavskii]

@mfenn Any idea how to fix this for Next.js v15 with pages router?

For Next.js >=13.0.0 this should do the job:

// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  transpilePackages: [
    '@mui/x-data-grid',
    '@mui/x-data-grid-pro',
    '@mui/x-data-grid-premium',
  ],
};

module.exports = nextConfig;

Here's a demo: https://stackblitz.com/edit/stackblitz-starters-nvcrgdjr?file=next.config.js

[cherniavskii]

@cmdcolin Which bundler do you use?

[cmdcolin]

We actually make a library that uses @mui/material and @mui/x-data-grid, so we try to be somewhat bundler agnostic, but in the example above we had a sample demo that used plain-old-webpack v5. As part of our testing we try to use other bundlers/starterkits too like vite, farm, CRAv5, rspack, etc

[cherniavskii]

@cmdcolin What would be the ultimate solution for a use case like yours? Require importing the CSS file separately? I'm thinking if we can provide an alternative 🤔

[cmdcolin]

It is difficult to say what the ultimate solution is! I do like the dev experience of simply "include x-data-grid, and it works" but perhaps instructing users to import a CSS file, like you mention, is a good solution, and doesn't assume any tooling necessarily (note: ran into another weird case with this where indeed, we have a crazy tool that ends up, through weirdness, importing x-data-grid in node.js and caused an error trying to import the CSS file)

[daiho-sunbytes]

TypeError: Unknown file extension ".css" for /Users/xxx/project/node_modules/@mui/x-data-grid/esm/index.css

---

---

encounter this error after upgrading to "@mui/x-data-grid": "^8.0.0" from 6.19.8

[esskar]

Some here; what needs to be done for web-pack?

[esskar]

Some here; what needs to be done for web-pack?

in webpack.config.ts i added this module rule

rules: [{
    test: /\.css$/i,
    include: path.resolve(
        __dirname,
        'node_modules',
        '@mui',
        'x-data-grid'
    ),
    use: ['css-loader'],
}, ...]

by the way, even though i use mui 7, i had to add conditionNames: ['require', '...'],as pointed out as an requirement for mui 6

[domshyra]

For vitest, I solved this by adding this to my vitest.config.ts

export default defineConfig({
  test: {
    	server: {
		deps: {
			inline: ["@mui/x-data-grid"],
		},
	},
  }
})

Update : (5/28/2) instead of just test > deps > inline. Added server since there was a deprecated message for the other way. code has been updated to reflect the current standards.

Here is some more about that method

[samausir]

For Vite (Remix), I've resolved this by adding the following to vite.config.ts:

  ssr: {
    noExternal: ['@mui/x-data-grid'],
  },

[keller-mark]

Hi, importing a CSS file is not valid JavaScript or ESM, so this behavior is unexpected when importing JS from an NPM package. Such CSS imports should be stripped out / transformed prior to distributing via NPM. The solution should not be for every user to modify their bundler config (or need to use a bundler at all) to workaround the invalid syntax

[matomesc]

Any fix for Next.js v15 pages router?

[blynx]

We ran into the same problem with next.js 14.
I second @keller-mark remarks. Also, the CSS file currently doesn't do anything really for consumers, couldn't this be removed without harm?

# .../esm/index.css imported from .../esm/DataGrid/index.js

/* Placeholder file to ensure CSS imports are working */

.MuiDataGrid {
  display: block;
}

I also couldn't find any other styles imported anywhere else where ensuring CSS imports are working would be necessary!?

In case styles would need to be applied or bundled from the package, what about manually import like so:

import that-style.css from "@mui/x-data-grid"

for possibly required styles for the data grid?

[resihoehne]

Same issue with nextjs 15.4.4. using pages router and x-data-grid 8.9.1. As mentioned by @blynx the issue disappeares without any side-effects by removing the index.css (import) in my local x-data-grid installation.

[PioterAndrzejewski]

Had the same issue with [email protected] using pages router. Made it work by adding the package to transpiled packages in next.config.ts

{
...
transpilePackages: [ '@mui/x-data-grid']
}

[romgrk]

For context, the placeholder CSS was added because we wanted to have the possibility of adding CSS stylesheets during v8 without having it be a breaking change. Other issues have delayed our switch away from Emotion in the datagrid, which is why it's the only stylesheet in use at the moment.

The docs PR covering this aspect was also delayed but it should cover the various use cases reported above. Let us know if some use-cases are not covered.

[Jul13nT]

Is anyone having a working setup with Playwright ? I can't find how to resolve the Unexpected token '.' error.

[romgrk]

Could you share more about your setup? Playwright seems to have added support for CSS imports (https://github.com/microsoft/playwright/issues/24580, https://github.com/microsoft/playwright/pull/26626).

[Jul13nT]

I will try to make an example but it may be because I'm using CommonJS for Playwright and not ESM ? https://github.com/microsoft/playwright/issues/28719

Migrating to ESM is not easy for me, I have multiple errors like this one

Error: Qualified path resolution failed: we looked for the following paths, but none could be accessed.

Source path: /home/julien/projects/wos/.yarn/cache/autosuggest-highlight-npm-3.3.4-4c3066be68-8cdbb3ecfd.zip/node_modules/autosuggest-highlight/match
Not found: /home/julien/projects/wos/.yarn/cache/autosuggest-highlight-npm-3.3.4-4c3066be68-8cdbb3ecfd.zip/node_modules/autosuggest-highlight/match


   at ../../../.pnp.cjs:25457

  25455 |     enumerable: false
  25456 |   };
> 25457 |   return Object.defineProperties(new Error(message), {
        |                                  ^
  25458 |     code: {
  25459 |       ...propertySpec,
  25460 |       value: code
    at makeError (/home/julien/projects/wos/.pnp.cjs:25457:34)
    at resolveUnqualified (/home/julien/projects/wos/.pnp.cjs:27191:13)
    at resolveRequest (/home/julien/projects/wos/.pnp.cjs:27231:14)
    at Object.resolveRequest (/home/julien/projects/wos/.pnp.cjs:27287:26)
    at resolve$1 (/home/julien/projects/wos/.pnp.loader.mjs:2043:21)
    at process.emit (/home/julien/projects/wos/.pnp.cjs:25726:25)

[romgrk]

Have you tried configuring require.extensions?

[Jul13nT]

Yes, without require.extensions, tests fail immediately. With the configuration, tests fail but I see this log Running 1 test using 1 worker. So I guess this is better and goes a little further, but I'm still missing something. The error is the same in both cases.

[romgrk]

You're seeing the Unexpected token error, right? If your test runner is running in a worker, then the require.extensions patch should also be applied inside the worker. I don't have more information on your test setup so I can't comment on how to apply it.

[Jul13nT]

I don't know what you mean by applying the patch inside the worker. I reproduced the problem here: https://codesandbox.io/p/sandbox/mui-x-8-9-1-playwright-spq84m

You need to execute:

• yarn install
• yarn playwright install-deps
• yarn test

The problem is caused by an import of the data grid in the test.