не предоставляет экспорт с именем 'isEqual'

Содержание

Вопрос или проблема
Бандлер
Демо Stackblitz
Ответ или решение
Ошибка импорта isEqual из lodash в Angular
Основные причины ошибки
Другие возможные решения
Заключение

Вопрос или проблема

import { isEqual } from 'lodash';

onSave() {
    const isFormsEqual = isEqual(
      this.loyaltyRewardsFormFacade.currentRewardsState(),
      this.loyaltyRewardsFormFacade.transformFormData()
    );
    this.loyaltyRewardsFacade.onSave(this.loyaltyRewardsFormFacade, isFormsEqual);
  }

Я столкнулся с ошибкой в своем проекте Angular, из-за которой проект не загружается.

Я использую монорепозиторий Nx с родной архитектурой модульной федерации Angular. Проект имеет структуру микро-фронтенда с двумя приложениями: основным приложением Shell и удаленным приложением.

В одном из компонентов удаленного приложения мне нужен был метод isEqual из Lodash. Я установил следующие пакеты: “@types/lodash”: “^4.17.13” и “lodash”: “^4.17.21”. Я импортировал isEqual из Lodash, используя import { isEqual } from ‘lodash’; в компоненте и использовал метод isEqual. Сначала это работало хорошо, но теперь, как вы видите, я получаю ошибку, которая крашит приложение, с сообщением “не предоставляет экспорт с именем ‘isEqual'”, хотя я импортирую его правильно.

У вас есть идеи, что может вызывать эту ошибку? Я сталкивался с подобными ошибками несколько раз, особенно при создании новых файлов эффектов и фасадов. Я использовал их изначально без проблем, но после внесения новых изменений возникала ошибка “не предоставляет экспорт с именем”, несмотря на правильный экспорт и импорт всего.

Пожалуйста, не стесняйтесь делиться своими мыслями.

Спасибо заранее!

ошибка:
ERROR SyntaxError: Запрашиваемый модуль ‘blob:http://localhost:4200/e878b7c3-c148-4467-99c5-31459e1efa4c’ не предоставляет экспорт с именем ‘isEqual’ (на routes-WEHG7TSS.js:1:78930)

Я попытался удалить узлы модулей и запустить npm i

На последних версиях Typescript (для меня это было ~5.5.0).

Вы должны установить свойство moduleResolution в значение bundler, ранее оно было node, для правильного разрешения определенных пакетов, таких как lodash, keycloak-js и т.д.

{
  "compileOnSave": false,
  "compilerOptions": {
    ...
    "experimentalDecorators": true,
    "moduleResolution": "bundler" /* <- изменено здесь! */,
    ...

Бандлер

‘bundler’ для использования с бандлерами. Как и node16 и nodenext, этот режим поддерживает “imports” и “exports” в package.json, но, в отличие от режимов разрешения Node.js, bundler никогда не требует расширения файлов на относительных путях в импортируемых файлах.

Демо Stackblitz

Связанный ответ – keycloak-angular 26 не может найти keycloak-js

Ответ или решение

Ошибка импорта isEqual из lodash в Angular

В вашем проекте Angular, использующем архитектуру модульной федерации с Nx монорепозиторием, возникает ошибка, которая блокирует загрузку приложения. Ошибка гласит: "does not provide an export named ‘isEqual’", что указывает на проблему с импортом функции isEqual из библиотеки lodash.

Основные причины ошибки

Проблемы с версией TypeScript: В последних версиях TypeScript (начиная с ~5.5.0) изменились правила резолюции модулей. Если у вас не установлен нужный уровень разрешения модулей, то при импорте определённых функций, таких как isEqual, могут возникать ошибки. Для корректной работы с такими пакетами, как lodash, рекомендуется установить параметр moduleResolution в значение bundler в файле tsconfig.json.
```
{
 "compilerOptions": {
   "moduleResolution": "bundler",
   ...
 }
}
```
Пояснение: Использование bundler позволяет компилятору TypeScript корректно интерпретировать проекты, которые используют современную архитектуру пакетов с поддержкой "imports" и "exports" в package.json.
Проблемы с кэшем или зависимостями: Если вы недавно обновили пакеты или вносили изменения в зависимости, это могло привести к временным проблемам с кэшем. В таких случаях рекомендуется полностью удалить папку node_modules и переустановить зависимости:
```
rm -rf node_modules
npm install
```
Изменения в библиотеке Lodash: После обновления библиотеки Lodash, изменения в структуре экспорта могут привести к тому, что функция isEqual больше не будет доступна через стандартный импорт. Убедитесь, что вы используете совместимую с вашим кодом версию.

Другие возможные решения

Проверка правильности импорта: Убедитесь, что вы используете правильный синтаксис для импорта функции isEqual:
```
import isEqual from 'lodash/isEqual';
```
Этот метод позволяет импортировать только нужный функционал, что может помочь избежать проблемы.
Проверка конфигурации Webpack: Если ваша сборка зависит от Webpack, проверьте конфигурацию сборщика на наличие правил, которые могут влиять на резолюцию модулей.
Контекст модульной федерации: Убедитесь, что зависимости для удаленных приложений настроены правильно в файле конфигурации модульной федерации. Возможно, импортируемая библиотека не делится корректно между вашим Shell-приложением и удаленным.

Заключение

Ошибка импорта isEqual из Lodash в Angular может возникать из-за различных причин, включая настройки TypeScript, кэш и зависимости. Настройка moduleResolution на bundler часто поможет решить проблемы импорта в современных проектах. Убедитесь, что вы используете правильный синтаксис импорта и проверили совместимость версий библиотек. Оставайтесь на связи с сообществом и обновляйте свои зависимости, чтобы избежать подобных ситуаций в будущем.

не предоставляет экспорт с именем ‘isEqual’ | Angular