如何从 "leaflet" 导入到 Next.js 中的导入 L？

Question

因为我在 next js 中将 leaflet 引入到我的开发中，它不支持服务器端渲染 (ssr)，因此我必须像这样导入库并关闭 ssr

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, 95],
  //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, 95],
    //    iconAnchor: [22, 94],
    //    popupAnchor: [-3, -76],
    //});


    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;

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


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',
  iconSize: [38, 95],
  iconAnchor: [22, 94],
  //popupAnchor: [-3, -76],
  //shadowUrl: 'my-icon-shadow.png',
  //shadowSize: [68, 95],
  //shadowAnchor: [22, 94]
});

但是 Next.js 向我展示了这个 Issue，一旦我运行本地开发服务器

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

更新 22/11/2020，找到解决方案，感谢 Antoni Kepinski

....
import dynamic from 'next/dynamic';
....

#I dynamic imported the components instead (That require client side rendering), ssr as false, this way I can work with the client components and import the dependencies as usual, not like the initial code where I have to dynamically import the dependencies one by one. 

Only downside to this is that the client side components will render slower than the server side components.

const Benemap = dynamic(() => import('../components/analytics/Benemap'), {
    loading: () => 'Loading...',
    ssr: false,
});

// use back with auth
export default withAuth(function Home({ initialState, secondinitialState }) {
    console.log('one');
    const isAuthenticated = useIsAuthenticated();
    const name = getName();
    const role = getRole();
    console.log(name);
    
    //console.log(initialState);
    //console.log(secondinitialState);
    return (
        <div className='flex flex-col h-screen'>
            <Header />
            <SubHeader name={name} role={role} />
            <div className='antialiased bg-gray-200 flex-grow'>
                <Graph1 data={initialState} />
                <Benemap name={name} />
                <Graph2 anotherdata={secondinitialState} />
            </div>

            <Footer />
        </div>
    );
});

Answer 1

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

如何从 "leaflet" 导入到 Next.js 中的导入 L？

How do I import to import L from "leaflet" in Next.js?

javascript

leaflet

reactjs

react-leaflet

next.js