[core] Only define aliases once for TypeScript and once for Webpack + Babel #35197
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -4,6 +4,7 @@ const pkg = require('../package.json'); | |
| const withDocsInfra = require('./nextConfigDocsInfra'); | ||
| const { findPages } = require('./src/modules/utils/find'); | ||
| const { LANGUAGES, LANGUAGES_SSR, LANGUAGES_IGNORE_PAGES } = require('./src/modules/constants'); | ||
| const getMuiAliases = require('../scripts/muiAliases'); | ||
|
|
||
| const workspaceRoot = path.join(__dirname, '../'); | ||
|
|
||
|
|
@@ -95,7 +96,7 @@ module.exports = withDocsInfra({ | |
| }, | ||
| ], | ||
| }, | ||
| // Transpile dependencies outside this repository with dependencies in this repository | ||
| { | ||
| test: /\.(js|mjs|jsx)$/, | ||
| resourceQuery: { not: [/raw/] }, | ||
|
|
@@ -111,22 +112,7 @@ module.exports = withDocsInfra({ | |
| [ | ||
| 'babel-plugin-module-resolver', | ||
| { | ||
| alias: getMuiAliases('src'), | ||
|
There was a problem hiding this comment.
There was a problem hiding this comment. Yes it seems. In Toolpad we don't use typescript paths, but do aliasing directly in webpack. I believe then it gets picked up under There was a problem hiding this comment. For the core these aliases are needed to make sure that when we use X components on the marketing werbsite, the But if we have a way to say to Next to also resolve some node modules with the TS aliases, that would be great There was a problem hiding this comment.
Not with TS aliases I believe. But with webpack aliases it seems to work that way There was a problem hiding this comment. But we don't have any webpack alias defined no ? There was a problem hiding this comment. We probably won't be able to get rid of the typescript paths soon as it will be necessary for vscode. But I'd already consider it a win if we can remove them from The real solution is to update our build process in a way that we can rely on yarn workspace linking to resolve local packages. That way we can get rid of all aliasing. There's other obstacles though that currently block us from going there (mainly the build folders that contain the published packages with their subpath exports). There was a problem hiding this comment. I struggle to apply the webpack aliases on the node_modules, if you have an idea on how to do it (to be able to drop babel which is necessary for notistack and the X deps) There was a problem hiding this comment. I updated #33199 and it still seems to work. Check out the changes to next.config.js without whitespace: https://github.com/mui/material-ui/pull/33199/files?diff=split&w=1#diff-97081d4c5e67d7fb92c87085affbac02322e2b4c53c01c5e65f500fc3b67a402 and babel.config.js: https://github.com/mui/material-ui/pull/33199/files?diff=split&w=1#diff-2ed4f5b03d34a87ef641e9e36af4a98a1c0ddaf74d07ce93665957be69b7b09a Will give a quick try if I can replace There was a problem hiding this comment. OK but I guess it will only works with the doc, we will still have to keep babel for the testing. There was a problem hiding this comment. Yes, sorry for the confusion, I'm only talking about the docs here. It's the only thing we have to deal with from Toolpad's perspective |
||
| }, | ||
| ], | ||
| ], | ||
|
|
||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,4 @@ | ||
| import { Requireable } from 'prop-types'; | ||
|
|
||
| declare const integerPropType: Requireable<number>; | ||
|
There was a problem hiding this comment. TS was complaining that |
||
| export default integerPropType; | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,43 @@ | ||
| const path = require('path'); | ||
|
|
||
| /** | ||
| * @param {'build' | 'src'} type Define if the target should be the built version or the source. | ||
| * @param {boolean} isRelative If `true` the path will be relative to the repository root. | ||
| */ | ||
| function getMuiAliases(type, isRelative = false) { | ||
flaviendelangle marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| const workspaceRoot = path.join(__dirname, '..'); | ||
|
|
||
| const resolveAliasPath = (aliasPath) => { | ||
| const fullPath = path.join(workspaceRoot, aliasPath); | ||
|
|
||
| if (!isRelative) { | ||
| return fullPath; | ||
| } | ||
|
|
||
| const resolvedPath = path.relative(process.cwd(), fullPath); | ||
| return `./${resolvedPath.replace('\\', '/')}`; | ||
| }; | ||
|
|
||
| return { | ||
| '@mui/base': resolveAliasPath(`packages/mui-base/${type}`), | ||
| '@mui/docs': resolveAliasPath(`packages/mui-docs/${type}`), | ||
| '@mui/icons-material': resolveAliasPath( | ||
| `packages/mui-icons-material/${type === 'src' ? 'lib' : 'build'}`, | ||
| ), | ||
| '@mui/joy': resolveAliasPath(`packages/mui-joy/${type}`), | ||
| '@mui/lab': resolveAliasPath(`packages/mui-lab/${type}`), | ||
| '@mui/material': resolveAliasPath(`packages/mui-material/${type}`), | ||
| '@mui/material-next': resolveAliasPath(`packages/mui-material-next/${type}`), | ||
| '@mui/private-theming': resolveAliasPath(`packages/mui-private-theming/${type}`), | ||
| '@mui/styled-engine': resolveAliasPath(`packages/mui-styled-engine/${type}`), | ||
| '@mui/styled-engine-sc': resolveAliasPath(`packages/mui-styled-engine-sc/${type}`), | ||
| '@mui/styles': resolveAliasPath(`packages/mui-styles/${type}`), | ||
| '@mui/system': resolveAliasPath(`packages/mui-system/${type}`), | ||
| '@mui/utils': resolveAliasPath(`packages/mui-utils/${type}`), | ||
| docs: resolveAliasPath('docs'), | ||
| modules: resolveAliasPath('modules'), | ||
| 'typescript-to-proptypes': resolveAliasPath('packages/typescript-to-proptypes/src'), | ||
| }; | ||
| } | ||
|
|
||
| module.exports = getMuiAliases; | ||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
It now uses the TypeScript aliases
https://nextjs.org/docs/advanced-features/module-path-aliases