Управляйте зависимостями в подпроекте, чтобы избежать дублирования версий React
Я пытаюсь создать шаблон библиотеки React. У меня есть основной проект, который экспортирует некоторые базовые перехватчики React, а затем заключенный в него проект example, который импортирует библиотеку через "@local/lib": "file:.." в файл package.json.
Оба проекта зависят от React 18.3.1, поэтому в настоящее время они оба имеют зависимости "react": "^18.3.1" и "react-dom": "^18.3.1". Однако это вызывает проблему, при которой использование перехватчиков приводит к появлению следующего сообщения:
index.js:163 Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
Глядя на эту страницу, кажется, что наиболее вероятной причиной являются дублирующиеся версии React, поэтому я обновил зависимости React проекта example для чтения "react": "file:../node_modules/react" и "react-dom": "file:../node_modules/react-dom", удалил папку node_modules и запустил еще одну установку. Ожидается, что это позволит моему внутреннему example проекту использовать ту же версию React, что и внешний проект, исправляя ошибку, с которой я столкнулся.
Если я запускаю npm ls react, похоже, что это так, в зависимости от того, как я интерпретирую вывод:
[email protected] /home/ptolemy/webpages/npm/react-mount-effects/example
├─┬ @ptolemy2002/[email protected] -> ./..
│ ├─┬ [email protected]
│ │ └── [email protected] deduped
│ └── [email protected]
├─┬ [email protected] -> ./../node_modules/react-dom
│ └── [email protected] deduped
├─┬ [email protected]
│ └── [email protected] deduped -> ./../node_modules/react
├─┬ [email protected]
│ └── [email protected] deduped -> ./../node_modules/react
├─┬ [email protected]
│ ├─┬ [email protected]
│ │ └── [email protected] deduped -> ./../node_modules/react
│ └── [email protected] deduped -> ./../node_modules/react
├─┬ [email protected]
│ └── [email protected] deduped -> ./../node_modules/react
└── [email protected] -> ./../node_modules/react
Однако никаких изменений в поведении нет. Ошибка по-прежнему отображается, а это означает, что, если я правильно понимаю, должны быть дубликаты версий React.
Полный код библиотеки, которую я разрабатываю для тестирования шаблона, можно найти по адресу https://github.com/Ptolemy2002/react-mount-effects.
@Андрей, я не использую машинописный текст, но я все равно только что добавил эти пакеты, и, похоже, никаких изменений не произошло. Библиотеку, которую я разрабатываю для тестирования, можно найти по адресу github.com/Ptolemy2002/react-mount-effects.
Ответы 1
Проблема в вашем package.json. Даже если вы не используете машинописный текст, наличие файла jsconfig.json сообщает вашей IDE и другим инструментам о необходимости проверки типа с помощью jsdoc. Кроме того, в вашем package.json файле есть ошибки.
Убедитесь, что эти версии совпадают:
"peerDependencies": {
"react": ">=18.0.0",
"react-dom": ">=18.0.0",
"@types/react": ">=18.0.0",
"@types/react-dom": ">=18.0.0"
},
"devDependencies": {
"react": "^18.3.1",
"react-dom": "^18.3.1",
"@types/react": "^18.3.3",
"@types/react-dom": "^18.3.0"
}
А затем удалите эти ссылки на ваши локальные файлы. Если они уже есть в вашей папке node_modules, нет смысла это делать.
"react": "file:../node_modules/"
react-dom": "file:../node_modules/react-dom",
"@types/react": "file:../node_modules/@types/react",
"@types/react-dom": "file:../node_modules/@types/react-dom",V
Редактировать
После локальной проверки пакета (12:30 по центральному стандартному времени, 20 июля) вы по-прежнему устанавливаете пакет несовпадающих типов. Это результат pnpm why..., но это почти наверняка справедливо для любого менеджера пакетов:
devDependencies:
react 18.3.1
react-dom 18.3.1
└── react 18.3.1 peer
react-mount-effects λ p why react-dom
Legend: production dependency, optional only, dev only
@ptolemy2002/[email protected] /Users/bigsexy/Desktop/react-mount-effects
devDependencies:
react-dom 18.3.1
react-mount-effects λ p why @types/react
Legend: production dependency, optional only, dev only
@ptolemy2002/[email protected] /Users/bigsexy/Desktop/react-mount-effects
devDependencies:
@types/react 18.3.3
@types/react-dom 18.3.0
└── @types/react 18.3.3
Если вы собираетесь привязать пакет типов к конкретной версии, обязательно сделайте то же самое с самими реакциями и реакциями. Это хорошая практика, особенно с монорепозиториями, которые могут вырасти до множества зависимостей, но вам определенно нужно применять ее повсеместно.
Я удалил «jsconfig.json», а также сделал предложенные вами обновления пакета. Я все еще получаю ту же ошибку React «правила перехватчиков», но теперь я также получаю «Uncaught TypeError: невозможно прочитать свойства null (чтение 'useEffect')». Знаете, что еще может быть не так?
После этого вы установили все заново с помощью pnpm или npm install? Попробуйте внести эти изменения в свой package.json, затем удалите всю папку node_modules и любой файл блокировки, созданный вашим менеджером пакетов, а затем установите все с нуля.
Да, я удалил файлы node_modules и package-lock.json в корневом проекте и проекте-примере и перезагрузил их с помощью npm. Кажется, что изменений в поведении нет.
Это странная ошибка, возникающая по этой причине, но единственное, что я могу вам сказать, это попытаться настроить это как монорепо с одним из существующих инструментов монорепо, таких как турборепо или lerna.
Похоже, что версии реакции и реакции-дома совпадают. Вы уверены, что с @types/react или @types/react-dom нет проблем?