如何在Next.js中从“传单”导入导入L？

如何解决如何在Next.js中从“传单”导入导入L？

由于我在下一个js中将传单引入我的开发中，它不支持服务器端渲染（ssr），因此我必须像这样导入库并从ssr中退出

Then

好想创建一个图标....

import React,{Component} from "react";
import dynamic from 'next/dynamic';


const L = dynamic(
    () => import("leaflet/"),{ ssr: false }
)


const Map = dynamic(
    () => import("react-leaflet/lib/Map"),{ ssr: false }
)

const Marker = dynamic(
    () => import("react-leaflet/lib/Marker"),{ ssr: false }
)
const TileLayer = dynamic(
    () => import("react-leaflet/lib/TileLayer"),{ ssr: false }
)

const Popup = dynamic(
    () => import("react-leaflet/lib/Popup"),{ ssr: false }
)


var myIcon = L.icon({
  iconUrl: 'https://unpkg.com/leaflet@1.7.1/dist/images/marker-icon-2x.png',iconSize: [38,95],iconAnchor: [22,94],//popupAnchor: [-3,-76],//shadowUrl: 'my-icon-shadow.png',//shadowSize: [68,//shadowAnchor: [22,94]
});

class Benemap extends Component {


    state = {
        lat: 1.3521,lng: 103.8198,zoom: 13,}
    //  var myIcon = L.icon({
    //    iconUrl: 'https://unpkg.com/leaflet@1.7.1/dist/images/marker-icon.png',//    iconSize: [38,//    iconAnchor: [22,//    popupAnchor: [-3,//});


    render () {
        const position = [this.state.lat,this.state.lng]
        return (
            //<h1>Hi!</h1> 
            <Map className="map" center={position} zoom={this.state.zoom}>
            <TileLayer
              attribution='&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
              url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
            />
            <Marker position={position}
            icon = {myIcon}
            >
              <Popup>
                A pretty CSS3 popup. <br /> Easily customizable.
              </Popup>
            </Marker>
          </Map>
        );
    }

}

export default Benemap; 

但是一旦我运行本地开发服务器，Next.js就会向我展示此Issue

我确定其他人也面临与我相同的问题，但是我似乎无法在线找到该问题的其他解决方案，因此，我将其发布在这里是为了一劳永逸地造福于他人....

更新22/11/2020，找到了解决方案，这要归功于Antoni Kepinski

const L = dynamic(
    () => import("leaflet/"),{ ssr: false }
)

var myIcon = L.icon({
  iconUrl: 'https://unpkg.com/leaflet@1.7.1/dist/images/marker-icon-2x.png',94]
});

解决方法

Next.js动态导入仅适用于React Components。因此，我建议使用纯动态导入（而不是来自next/dynamic的动态导入）。