反应传单：未能加载sourcemap

Question

我的传单地图没有显示，尽管我显然设置了所有的留档。我在控制台得到的唯一消息是：

• DevTools未能加载SourceMap:无法加载chrome的内容-extension://fmkadmapgofadopljbjfkapdkoienihi/build/injectGlobalHook.js.map:HTTP错误：状态代码404，net:：ERR\u未知\u URL\u方案

我的组件符合文档要求：

import React from 'react';
import { Grid } from '@material-ui/core';
import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';

const MapContent = props => {
  return (
    <Grid component="section" className="tkr-map__content leaflet-container" height="100vh" width="100%" item={true} sm={12} md={10}>
      <MapContainer center={[51.505, -0.09]} zoom={13} scrollWheelZoom={false}>
        <TileLayer
          attribution='&copy; <a href="http://osm.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>
    </Grid>
  );
};

export default MapContent;

我不确定是否在这一点上，它可以从我的本地服务器，材料用户界面，网页或其他我目前忽略。

如有任何建议，将不胜感激。

Answer 1

这似乎是“反应开发工具”Chrome扩展的问题——请参阅此答案。

Answer 2

应遵循以下步骤
安装yarn add传单react-传单将css file添加到index.js如下
导入"传单/dist/leaflet.css"；并添加高度很重要。高度："400px"
示例代码

import React from "react";
import { MapContainer, Marker, Popup, TileLayer } from "react-leaflet";

export default function App() {
  return (
    <div>
      <MapContainer
        style={{ height: "400px" }}
        center={[51.505, -0.09]}
        zoom={13}
        scrollWheelZoom={false}
      >
        <TileLayer
          attribution='&copy; <a href="http://osm.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>
  );
}

工作演示