Не получается завести проект React + Typescript + Leaflet
Создал проект в VS как Standalone TypeScript React Project + leaflet.
Пытаюсь завести проект в простейшей конфигурации, поднять простейшую карту и потом уже усложнять.
App.tsx
import React from 'react';
import { MyMap } from './myMap';
import './App.css';
import "leaflet/dist/leaflet.css";
export default class App extends React.Component {
displayName: string = App.name;
render() {
return (
<div className="App">
<header className="App-header">
<div> <MyMap /> </div>
</header>
</div>
);
}
}
index.tsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
const root = ReactDOM.createRoot(
document.getElementById('root') as HTMLElement
);
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
myMap
import React, { FC } from 'react';
import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';
import 'leaflet/dist/leaflet.css';
export const MyMap: FC = () => {
return (
<div>
<MapContainer center={[51.505, -0.09]} zoom={13} scrollWheelZoom={false} id="map">
<TileLayer
attribution='© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
<Marker position={[51.505, -0.09]}>
<Popup>
A pretty CSS3 popup. <br /> Easily customizable.
</Popup>
</Marker>
</MapContainer>
</div>
);
};
Два вида ошибок:
В
index.htmlв<head>добавлены два линка<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" ...>и<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" ....>. Версииleaflet@1.9.4соответствуют моему пакету. Ругается на вторую ссылку:- Error parsing 'integrity' attribute (...) The digest must be a valid, base64-encoded value.
- Error parsing 'integrity' attribute ('...'). The hash algorithm must be one of 'sha256', 'sha384', or 'sha512', followed by a '-' character.
На эту тему мало что нашёл, и ни одного случая с leaflet. Пробовал менять версии лифлета - и всего пакета, и соответственно указанной здесь ссылки, не помогло. Удалял всё из npm_modules, тоже ничего. Можно ли вообще обойтись без этой ссылки?
- Ругается на 'хуки, которые определены вне функции'. Но у меня в коде ни одного хука! И соответственно, нечего исправлять.
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:
- You might have mismatching versions of React and the renderer (such as React DOM)
- You might be breaking the Rules of Hooks
- 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. printWarning @ react.development.js:209 react.development.js:1622 Uncaught TypeError: Cannot read properties of null (reading 'useState') at useState (react.development.js:1622:1) at MapContainerComponent (MapContainer.js:19:1) at renderWithHooks (react-dom.development.js:16305:1) at updateForwardRef (react-dom.development.js:19226:1) at beginWork (react-dom.development.js:21636:1) at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1) at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1) at invokeGuardedCallback (react-dom.development.js:4277:1) at beginWork$1 (react-dom.development.js:27451:1) at performUnitOfWork (react-dom.development.js:26557:1)
Версии пакетов ('npm list')
+-- @types/leaflet@1.9.3 +-- @types/react-leaflet@3.0.0 +-- bootstrap@5.3.1 +-- leaflet@1.9.4 +-- react-bootstrap@2.8.0 +-- react-dom@18.2.0 +-- react@18.2.0 `-- reactstrap@9.2.0