В настоящее время в процессе миграции Material-UI с v0 на v3 я сталкиваюсь с множеством проблем, связанных с импортом файлов зависимостей из неправильного места.
В качестве примера возьмем зависимость @babel/runtime.
Ниже приведены выдержки из моих файлов package.json и yarn.lock:
"dependencies": {
"@material-ui/core": "3.0.0",
"@material-ui/icons": "3.0.0",
"react-swipeable-views": "0.12.16",
"react-swipeable-views-utils": "0.12.16",
},
"devDependencies": {
"babel-cli": "6.26.0",
"babel-core": "6.26.3",
"babel-loader": "7.1.5",
"babel-runtime": "6.26.0",
"babel-regenerator-runtime": "6.5.0",
},
"@material-ui/[email protected]":
version "3.0.0"
dependencies:
"@babel/runtime" "7.0.0-rc.1"
"@material-ui/[email protected]":
version "3.0.0"
dependencies:
"@babel/runtime" "7.0.0-rc.1"
react-event-listener@^0.6.0, react-event-listener@^0.6.2:
version "0.6.3"
dependencies:
"@babel/runtime" "7.0.0-rc.1"
react-swipeable-views-core@^0.12.16:
version "0.12.16"
dependencies:
"@babel/runtime" "7.0.0-beta.42"
recompose@^0.28.2:
version "0.28.2"
dependencies:
"@babel/runtime" "7.0.0-beta.56"
@babel/[email protected]":
version "7.0.0-beta.42"
dependencies:
core-js "^2.5.3"
regenerator-runtime "^0.11.1"
"@babel/[email protected]":
version "7.0.0-beta.56"
dependencies:
regenerator-runtime "^0.12.0"
"@babel/[email protected]":
version "7.0.0-rc.1"
dependencies:
regenerator-runtime "^0.12.0"
Также разделяю часть моей конфигурации веб-пакета, так как я подозреваю, что это может быть виновником здесь:
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: "babel-loader",
query: {
presets: [["es2015", {loose: true, modules: false}], "react", "stage-0"],
plugins: ["transform-decorators-legacy"],
cacheDirectory: true,
},
},
],
entry: [
"babel-regenerator-runtime",
path.resolve(__dirname, sourcePath, `${jsFilename}.js`),
],
И мой babelrc:
{
"presets": [
"es2015",
"react",
"stage-0",
"flow"
],
"plugins": [
"transform-decorators-legacy",
["transform-runtime", {
"polyfill": false,
"regenerator": true
}],
["babel-plugin-root-import", {
"rootPathSuffix": "src"
}]
]
}
Все мои ошибки webpack относятся к файлу getPrototypeOf, отсутствующему в каталоге @babel/runtime/helpers:
ERROR in ./node_modules/@material-ui/core/styles/withTheme.js
Module not found: Error: Can't resolve '@babel/runtime/helpers/getPrototypeOf' in '/project/node_modules/@material-ui/core/styles'
@ ./node_modules/@material-ui/core/styles/withTheme.js 20:46-94
@ ./node_modules/@material-ui/core/styles/index.js
@ ./src/components/Root.js
@ ./src/app.js
@ multi babel-regenerator-runtime ./src/app.js
ERROR in ./node_modules/react-event-listener/dist/react-event-listener.cjs.js
Module not found: Error: Can't resolve '@babel/runtime/helpers/getPrototypeOf' in '/project/node_modules/react-event-listener/dist'
@ ./node_modules/react-event-listener/dist/react-event-listener.cjs.js 10:38-86
@ ./node_modules/@material-ui/core/Popover/Popover.js
@ ./node_modules/@material-ui/core/Popover/index.js
@ ./src/components/Header/AnonymousMenu.js
@ ./src/components/Header/index.js
@ ./src/components/ListeningRoute.js
@ ./src/components/Root.js
@ ./src/app.js
@ multi babel-regenerator-runtime ./src/app.js
И если я ищу файл в node_modules, все каталоги, кроме корневого, содержат файл:
$ for dir in $(find node_modules -name 'runtime'); do ls $dir/helpers/getPrototypeOf.js; done
node_modules/recompose/node_modules/@babel/runtime/helpers/getPrototypeOf.js
node_modules/@material-ui/icons/node_modules/@babel/runtime/helpers/getPrototypeOf.js
node_modules/@material-ui/core/node_modules/@babel/runtime/helpers/getPrototypeOf.js
node_modules/react-event-listener/node_modules/@babel/runtime/helpers/getPrototypeOf.js
ls: cannot access 'node_modules/@babel/runtime/helpers/getPrototypeOf.js': No such file or directory
Модули узлов должны рекурсивно искать зависимости, поэтому мы можем использовать несколько версий пакета одновременно, не нарушая работу проекта, но в этом случае они фактически ищут их в корневом каталоге node_modules/.
Другая путаница возникает из-за того, что мы все еще используем babel v6 в нашем проекте, но @babel устанавливается в project/node_modules.
Может ли кто-нибудь объяснить, почему происходит такое поведение, если это проблема, связанная только с пряжей, и как исправить эту проблему? Или это может быть связано с веб-пакетом?
Я хотел иметь параллельные версии Material-ui v0 и v3 в течение некоторого переходного периода, но текущее решение - это жесткий переход на v3 (а также перенос babel с v6 на v7). Это действительно блокирует нас для миграции.
Примечание: cp node_modules/@material-ui/core/node_modules/@babel/runtime/helpers/getPrototypeOf.js node_modules/@babel/runtime/helpers удаляет все ошибки веб-пакетов ...


В webpack есть опция под названием «разрешение». Вам нужно будет установить параметр разрешения, чтобы @ material-ui использовал свой собственный node_modules. В настоящее время @ material-ui импортирует зависимости, используя самый верхний node_modules, который вы установили через npm или yarn.
В конфигурацию вашего веб-пакета включите
module.exports = {
...
resolve : {
modules : ['node_modules']
},
...
}
Таким образом, webpack будет смотреть на node_modules в относительных каталогах.
Нет проблем :) Пробежался по той же проблеме, но нигде не нашел решения.
Действительно, в моей конфигурации веб-пакета было разрешение: {extensions: [".js"], modules: [path.resolve (__ dirname, "./node_modules")],}, которое принудительно разрешало из корневого node_modules. Внесение изменений в ваш код разрешило проблему. Большое спасибо @Wesgur!