Skip to content

Commit 0a01436

Browse files
MBilalShaficlaude
andauthored
[DataGrid][docs] Remove Bundling section from quickstart (mui#21177)
Co-authored-by: Claude Haiku 4.5 <[email protected]>
1 parent ce4a44a commit 0a01436

File tree

1 file changed

+0
-98
lines changed

1 file changed

+0
-98
lines changed

docs/data/data-grid/quickstart/quickstart.md

Lines changed: 0 additions & 98 deletions
Original file line numberDiff line numberDiff line change
@@ -127,104 +127,6 @@ const theme = createTheme({
127127
});
128128
```
129129

130-
## Bundling
131-
132-
The Data Grid requires a bundler that can handle CSS imports.
133-
If you're using a setup that doesn't support CSS imports out of the box, follow the instructions below for your specific environment.
134-
135-
### webpack
136-
137-
Update your config to add the `style-loader` and `css-loader`.
138-
139-
```ts title="webpack.config.js"
140-
export default {
141-
// other webpack config
142-
module: {
143-
rules: [
144-
{
145-
test: /\.css$/i,
146-
use: ['style-loader', 'css-loader'],
147-
},
148-
],
149-
},
150-
};
151-
```
152-
153-
### Vite
154-
155-
CSS imports should work with no additional configuration when using Vite.
156-
157-
### Vitest
158-
159-
Add the Data Grid packages to `test.deps.inline`.
160-
161-
```ts title="vitest.config.ts"
162-
export default defineConfig({
163-
test: {
164-
deps: {
165-
inline: [
166-
'@mui/x-data-grid',
167-
'@mui/x-data-grid-pro',
168-
'@mui/x-data-grid-premium',
169-
],
170-
},
171-
},
172-
});
173-
```
174-
175-
### Next.js
176-
177-
If you're using the App Router, CSS imports should work out of the box.
178-
179-
If you're using the Pages Router, you need to add the Data Grid packages to [`transpilePackages`](https://nextjs.org/docs/app/api-reference/config/next-config-js/transpilePackages).
180-
181-
```ts title="next.config.ts"
182-
export default {
183-
transpilePackages: [
184-
'@mui/x-data-grid',
185-
'@mui/x-data-grid-pro',
186-
'@mui/x-data-grid-premium',
187-
],
188-
};
189-
```
190-
191-
### Node.js
192-
193-
If you're importing the packages inside Node.js, you can make CSS imports a no-op like this:
194-
195-
**Using `require()`**:
196-
197-
```js
198-
require.extensions['.css'] = () => null;
199-
```
200-
201-
**Using `import`**:
202-
203-
```js title="node-ignore-css.js"
204-
// node-ignore-css.js
205-
// Needs to be loaded before your code runs:
206-
// node --import ./node-ignore-css.js ./index.js
207-
import { registerHooks } from 'node:module';
208-
registerHooks({
209-
load(url, context, nextLoad) {
210-
if (url.endsWith('.css')) {
211-
return { url, format: 'module', source: '', shortCircuit: true };
212-
}
213-
return nextLoad(url, context);
214-
},
215-
});
216-
```
217-
218-
### Jest
219-
220-
If you're using Jest, add the [`identity-obj-proxy`](https://www.npmjs.com/package/identity-obj-proxy) package to mock CSS imports.
221-
222-
```ts title="jest.config.js"
223-
moduleNameMapper: {
224-
'\\.(css|less|scss|sass)$': 'identity-obj-proxy'',
225-
},
226-
```
227-
228130
## API
229131

230132
- [DataGrid](/x/api/data-grid/data-grid/)

0 commit comments

Comments
 (0)