You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/data/material/components/icons/icons.md
+1-1
Original file line number
Diff line number
Diff line change
@@ -120,7 +120,7 @@ This component extends the native `<svg>` element:
120
120
### Component prop
121
121
122
122
You can use the `SvgIcon` wrapper even if your icons are saved in the `.svg` format.
123
-
[svgr](https://github.com/gregberge/svgr) has loaders to import SVG files and use them as React components. For example, with Webpack:
123
+
[svgr](https://github.com/gregberge/svgr) has loaders to import SVG files and use them as React components. For example, with webpack:
Copy file name to clipboardExpand all lines: docs/data/material/getting-started/faq/faq.md
+4-4
Original file line number
Diff line number
Diff line change
@@ -351,7 +351,7 @@ There are several common reasons for this to happen:
351
351
352
352
- You have another `@mui/styles` library somewhere in your dependencies.
353
353
- You have a monorepo structure for your project (for example, lerna or yarn workspaces) and `@mui/styles` module is a dependency in more than one package (this one is more or less the same as the previous one).
354
-
- You have several applications that are using `@mui/styles` running on the same page (for example, several entry points in Webpack are loaded on the same page).
354
+
- You have several applications that are using `@mui/styles` running on the same page (for example, several entry points in webpack are loaded on the same page).
355
355
356
356
### Duplicated module in node_modules
357
357
@@ -365,7 +365,7 @@ If you identified that duplication is the issue that you are encountering there
365
365
If you are using npm you can try running `npm dedupe`.
366
366
This command searches the local dependencies and tries to simplify the structure by moving common dependencies further up the tree.
367
367
368
-
If you are using Webpack, you can change the way it will [resolve](https://webpack.js.org/configuration/resolve/#resolve-modules) the @mui/styles module. You can overwrite the default order in which Webpack will look for your dependencies and make your application node_modules more prioritized than default node module resolution order:
368
+
If you are using webpack, you can change the way it will [resolve](https://webpack.js.org/configuration/resolve/#resolve-modules) the @mui/styles module. You can overwrite the default order in which webpack will look for your dependencies and make your application node_modules more prioritized than default node module resolution order:
369
369
370
370
```diff
371
371
resolve: {
@@ -377,7 +377,7 @@ If you are using Webpack, you can change the way it will [resolve](https://webpa
377
377
378
378
### Running multiple applications on one page
379
379
380
-
If you have several applications running on one page, consider using one @mui/styles module for all of them. If you are using Webpack, you can use [CommonsChunkPlugin](https://webpack.js.org/plugins/commons-chunk-plugin/) to create an explicit [vendor chunk](https://webpack.js.org/plugins/commons-chunk-plugin/#explicit-vendor-chunk), that will contain the @mui/styles module:
380
+
If you have several applications running on one page, consider using one @mui/styles module for all of them. If you are using webpack, you can use [CommonsChunkPlugin](https://webpack.js.org/plugins/commons-chunk-plugin/) to create an explicit [vendor chunk](https://webpack.js.org/plugins/commons-chunk-plugin/#explicit-vendor-chunk), that will contain the @mui/styles module:
381
381
382
382
```diff
383
383
module.exports = {
@@ -409,7 +409,7 @@ You could end up accidentally using two class name generators in a variety of sc
409
409
- You are using a bundler and it is splitting code in a way that causes multiple class name generator instances to be created.
410
410
411
411
:::success
412
-
If you are using Webpack with the [SplitChunksPlugin](https://webpack.js.org/plugins/split-chunks-plugin/), try configuring the [`runtimeChunk` setting under `optimizations`](https://webpack.js.org/configuration/optimization/#optimization-runtimechunk).
412
+
If you are using webpack with the [SplitChunksPlugin](https://webpack.js.org/plugins/split-chunks-plugin/), try configuring the [`runtimeChunk` setting under `optimizations`](https://webpack.js.org/configuration/optimization/#optimization-runtimechunk).
413
413
:::
414
414
415
415
Overall, it's simple to recover from this problem by wrapping each Material UI application with [`StylesProvider`](/system/styles/api/#stylesprovider) components at the top of their component trees **and using a single class name generator shared among them**.
Copy file name to clipboardExpand all lines: docs/data/material/getting-started/supported-platforms/supported-platforms.md
+2-2
Original file line number
Diff line number
Diff line change
@@ -40,6 +40,6 @@ Have a look at the older [versions](https://mui.com/versions/) for backward comp
40
40
Material UI requires a minimum version of TypeScript 4.7.
41
41
This aims to match the policy of [DefinitelyTyped](https://github.com/DefinitelyTyped/DefinitelyTyped), with the support of the versions of TypeScript that are less than two years old.
42
42
43
-
## Webpack
43
+
## webpack
44
44
45
-
The minimium required version of webpack to bundle applications that use Material UI is v5. Webpack <= v4 can't bundle Material UI untranspiled as it uses features such as the [null coalscing operator (`??`)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing) and [optional chaining (`?.`)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining).
45
+
The minimium required version of webpack to bundle applications that use Material UI is v5. webpack <= v4 can't bundle Material UI untranspiled as it uses features such as the [null coalscing operator (`??`)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing) and [optional chaining (`?.`)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining).
Copy file name to clipboardExpand all lines: docs/data/material/guides/minimizing-bundle-size/minimizing-bundle-size.md
+1-1
Original file line number
Diff line number
Diff line change
@@ -230,7 +230,7 @@ You are strongly discouraged to:
230
230
231
231
:::
232
232
233
-
A great way to use these bundles is to configure bundler aliases, for example with [Webpack's `resolve.alias`](https://webpack.js.org/configuration/resolve/#resolvealias):
233
+
A great way to use these bundles is to configure bundler aliases, for example with [webpack's `resolve.alias`](https://webpack.js.org/configuration/resolve/#resolvealias):
Copy file name to clipboardExpand all lines: docs/pages/blog/material-ui-v1-is-out.md
+1-1
Original file line number
Diff line number
Diff line change
@@ -43,7 +43,7 @@ We want Material UI to become whatever is generally useful for application deve
43
43
We know the ease of use is a critical part of user acquisition. The more users we have, the more likely we can make the project sustainable. Improving the ease of use comes in different flavors:
44
44
45
45
-**Onboarding**. We have reduced the onboarding friction as much as possible. We know the onboarding is a critical step for user acquisition. The onboarding friction comes in different flavors:
46
-
We have reduced the number of installation steps needed. It should be as simple as 1. npm install @mui/material and 2. import Button from '@mui/material/Button'; . We don't ask for polyfill, custom Webpack plugin or any specific build tool. The usage of MuiThemeProvider is no longer mandatory.
46
+
We have reduced the number of installation steps needed. It should be as simple as 1. npm install @mui/material and 2. import Button from '@mui/material/Button'; . We don't ask for polyfill, custom webpack plugin or any specific build tool. The usage of MuiThemeProvider is no longer mandatory.
47
47
48
48
-**Examples**. We are hosting [example projects](https://github.com/mui/material-ui/tree/master/examples) with the most popular solutions to start a project: [create-react-app](https://github.com/facebook/create-react-app), [Next.js](https://github.com/vercel/next.js), [Gatsby](https://github.com/gatsbyjs/gatsby), and CDN.
Copy file name to clipboardExpand all lines: docs/pages/blog/mui-x-v7-beta.md
+1-1
Original file line number
Diff line number
Diff line change
@@ -74,7 +74,7 @@ While string values remain compatible for these types, any updates to the `filte
74
74
75
75
### Smaller bundle size
76
76
77
-
The introduction of a separate entry point for locales has significantly reduced the bundle size of the barrel index when tree-shaking isn't operational (for example Webpack in dev mode).
77
+
The introduction of a separate entry point for locales has significantly reduced the bundle size of the barrel index when tree-shaking isn't operational (for example webpack in dev mode).
78
78
79
79
For example with the `@mui/x-data-grid` npm package, this change led to a reduction of approximately 22% – shrinking the bundle size from [114.2kB](https://bundlephobia.com/package/@mui/[email protected]) to [88.5kB](https://bundlephobia.com/package/@mui/[email protected]).
0 commit comments