Skip to content

[code-infra] Remove babel alias from the docs #40792

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

Merged
Janpot merged 2 commits into from
Feb 6, 2024
Merged

[code-infra] Remove babel alias from the docs #40792

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f5f241c
Remove babel alias from the docs
Janpot Jan 26, 2024
dd33142
Update next.config.js
Janpot Jan 26, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 0 additions & 29 deletions docs/babel.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,28 +3,6 @@ const fse = require('fs-extra');

const errorCodesPath = path.resolve(__dirname, './public/static/error-codes.json');

const alias = {
'@mui/material': '../packages/mui-material/src',
'@mui/docs': '../packages/mui-docs/src',
'@mui/icons-material': '../packages/mui-icons-material/lib',
'@mui/lab': '../packages/mui-lab/src',
'@mui/styles': '../packages/mui-styles/src',
'@mui/styled-engine-sc': '../packages/mui-styled-engine-sc/src',
// Swap the comments on the next two lines for using the styled-components as style engine
'@mui/styled-engine': '../packages/mui-styled-engine/src',
// '@mui/styled-engine': '../packages/mui-styled-engine-sc/src',
'@mui/system': '../packages/mui-system/src',
'@mui/private-theming': '../packages/mui-private-theming/src',
'@mui/utils': '../packages/mui-utils/src',
'@mui/base': '../packages/mui-base/src',
'@mui/material-next': '../packages/mui-material-next/src',
'@mui/material-nextjs': '../packages/mui-material-nextjs/src',
'@mui/joy': '../packages/mui-joy/src',
docs: './',
modules: '../modules',
pages: './pages',
};

const { version: transformRuntimeVersion } = fse.readJSONSync(
require.resolve('@babel/runtime-corejs2/package.json'),
);
Expand Down Expand Up @@ -56,13 +34,6 @@ module.exports = {
'babel-plugin-optimize-clsx',
// for IE11 support
'@babel/plugin-transform-object-assign',
[
'babel-plugin-module-resolver',
{
alias,
transformFunctions: ['require', 'require.context'],
},
],
],
ignore: [/@babel[\\|/]runtime/], // Fix a Windows issue.
env: {
Expand Down
57 changes: 18 additions & 39 deletions docs/next.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,6 +85,24 @@ module.exports = withDocsInfra({
resolve: {
...config.resolve,
// resolve .tsx first
alias: {
...config.resolve.alias,

// for 3rd party packages with dependencies in this repository
'@mui/material': path.resolve(workspaceRoot, 'packages/mui-material/src'),
'@mui/docs': path.resolve(workspaceRoot, 'packages/mui-docs/src'),
'@mui/icons-material': path.resolve(workspaceRoot, 'packages/mui-icons-material/lib'),
'@mui/lab': path.resolve(workspaceRoot, 'packages/mui-lab/src'),
'@mui/styled-engine': path.resolve(workspaceRoot, 'packages/mui-styled-engine/src'),
'@mui/styles': path.resolve(workspaceRoot, 'packages/mui-styles/src'),
'@mui/system': path.resolve(workspaceRoot, 'packages/mui-system/src'),
'@mui/private-theming': path.resolve(workspaceRoot, 'packages/mui-private-theming/src'),
'@mui/utils': path.resolve(workspaceRoot, 'packages/mui-utils/src'),
'@mui/base': path.resolve(workspaceRoot, 'packages/mui-base/src'),
'@mui/material-next': path.resolve(workspaceRoot, 'packages/mui-material-next/src'),
'@mui/material-nextjs': path.resolve(workspaceRoot, 'packages/mui-material-nextjs/src'),
'@mui/joy': path.resolve(workspaceRoot, 'packages/mui-joy/src'),
},
extensions: [
'.tsx',
// @ts-ignore
Expand Down Expand Up @@ -120,45 +138,6 @@ module.exports = withDocsInfra({
},
],
},
// transpile 3rd party packages with dependencies in this repository
{
test: /\.(js|mjs|jsx)$/,
resourceQuery: { not: [/raw/] },
include:
/node_modules(\/|\\)(notistack|@mui(\/|\\)x-data-grid|@mui(\/|\\)x-data-grid-pro|@mui(\/|\\)x-license-pro|@mui(\/|\\)x-data-grid-generator|@mui(\/|\\)x-date-pickers-pro|@mui(\/|\\)x-date-pickers|@mui(\/|\\)x-charts|@mui(\/|\\)x-tree-view)/,
Comment on lines -127 to -128

@oliviertassinari oliviertassinari Feb 6, 2024 •
edited
Loading

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I believe we need to transpile Data Grid, Date Picker, Tree View because when we make a change in Material UI, that could impact these components, the sooner we know it, the better. We started doing this with #13685.

Does this behavior still happen? Yes, it looks like so 👍 : hasDependencyOnRepoPackages + webpack alias doing the job.

@Janpot Janpot Feb 7, 2024 •
edited
Loading

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, we were aliasing in babel, meaning we had to transpile these packages to apply the aliasing. Babel is the wrong place to do this, because it only operates on a subset of the files. You may end up with half your bundle with aliases applied and half without.

webpack acts as a linker, it connects all the imports together. When we alias a dependency in webpack it applies to every import, regardless of whether it ran through babel. It's a lot less error-prone to do it in this phase, and a lot less wasteful.

If we weren't transpiling these files for any other reason than applying the alias, we can simply stop transpiling them.

Everywhere I can I will remove the aliasing from babel. It simply doesn't belong there. aliasing is a linker concern. babel has no notion of this phase, it operates on individual files only.

@oliviertassinari oliviertassinari Feb 7, 2024

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If we weren't transpiling these files for any other reason than applying the alias, we can simply stop transpiling them.

I don't recall a reason to transpile npm dependencies other than to change the imports.

use: {
loader: 'babel-loader',
options: {
// on the server we use the transpiled commonJS build, on client ES6 modules
// babel needs to figure out in what context to parse the file
sourceType: 'unambiguous',
plugins: [
[
'babel-plugin-module-resolver',
{
alias: {
// all packages in this monorepo
'@mui/material': '../packages/mui-material/src',
'@mui/docs': '../packages/mui-docs/src',
'@mui/icons-material': '../packages/mui-icons-material/lib',
'@mui/lab': '../packages/mui-lab/src',
'@mui/styled-engine': '../packages/mui-styled-engine/src',
'@mui/styles': '../packages/mui-styles/src',
'@mui/system': '../packages/mui-system/src',
'@mui/private-theming': '../packages/mui-private-theming/src',
'@mui/utils': '../packages/mui-utils/src',
'@mui/base': '../packages/mui-base/src',
'@mui/material-next': '../packages/mui-material-next/src',
'@mui/material-nextjs': '../packages/mui-material-nextjs/src',
'@mui/joy': '../packages/mui-joy/src',
},
// transformFunctions: ['require'],
},
],
],
},
},
},
// required to transpile ../packages/
{
test: /\.(js|mjs|tsx|ts)$/,
Expand Down
2 changes: 2 additions & 0 deletions tsconfig.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,8 @@
"@mui/material-nextjs/*": ["./packages/mui-material-nextjs/src/*"],
"@mui/joy": ["./packages/mui-joy/src"],
"@mui/joy/*": ["./packages/mui-joy/src/*"],
"@mui/icons-material": ["./packages/mui-icons-material/lib"],
"@mui/icons-material/*": ["./packages/mui-icons-material/lib/*"],
"@mui/zero-next-plugin": ["./packages/zero-next-plugin/src"],
"@mui/zero-next-plugin/*": ["./packages/zero-next-plugin/src/*"],
"@mui/zero-runtime": ["./packages/zero-runtime/src"],
Expand Down