Проблема при подключении Yandex Maps API к React приложени: ymaps3: already defined?

Question

Ошибка возникает при подключении ymaps3 к react приложению. App.js:

import React from "react";

import {
    YMap,
    YMapComponentsProvider,
    YMapDefaultSchemeLayer,
    YMapDefaultFeaturesLayer,
    YMapListener,
    YMapFeature,
    YMapCollection,
    YMapControls,
    YMapGeolocationControl,
    YMapZoomControl,
    YMapHint,
    YMapDefaultMarker,
    YMapContainer,
    YMapControlButton,
} from "ymap3-components";

function Map() {
    return (
        <YMapComponentsProvider apiKey={'myKey'}>
            <YMap location={{center: [37.95, 55.65], zoom: 10}}>
                <YMapDefaultSchemeLayer />
                <YMapDefaultFeaturesLayer />
                <YMapDefaultMarker
                    coordinates={[37.95, 55.65]}
                />
            </YMap>
        </YMapComponentsProvider>
    );
}

export default Map;

При загрузке страницы появляется ошибка "ymaps3: already defined". Вообще не понимаю, что не так(

package.json

{
  "name": "ball",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4",
    "ymap3-components": "^1.1.3"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Answer 1

После воспроизведения у себя данной проблемы и исследовав ее, я понял что причина в React — как известно в developer mode он рендерит компоненты дважды. Это проявляется в том что в инспекторе dev-tools можно увидеть 2 одинаковых скрипта Яндекс Карт, но причина не только в скриптах, а глубже (в коде API который к тому же находится на их серверах). При билде проекта в production mode эта ошибка никак не проявляется.

В информации о модуле ymap3-components есть ссылка на их песочницу Я в новом проекте использовал именно их код, так как он как минимум выводит карту, но ошибка все равно всплывает поверх и ее приходится закрывать.

Есть способ убедить React не делать рендер дважды, но я бы использовал его временно — это удалить строгий режим (React.StrictMode) из рендера:

root.render(
   ̶<̶R̶e̶a̶c̶t̶.̶S̶t̶r̶i̶c̶t̶M̶o̶d̶e̶>̶
    <App />
   ̶<̶/̶R̶e̶a̶c̶t̶.̶S̶t̶r̶i̶c̶t̶M̶o̶d̶e̶>̶
);

Тут можно почитать о плюсах и минусах такого решения.

БЛОГ НА HUSL

Проблема при подключении Yandex Maps API к React приложени: ymaps3: already defined?

Ответы (1 шт):