Fatal编程技术网
  • reactjs/
  • Reactjs React传单在开发期间有效，在构建时失败，注意到缺少构造函数图标

Reactjs React传单在开发期间有效，在构建时失败，注意到缺少构造函数图标

reactjs leaflet gatsby

Reactjs React传单在开发期间有效，在构建时失败，注意到缺少构造函数图标,reactjs,leaflet,gatsby,Reactjs,Leaflet,Gatsby,我用盖茨比和传单来制作地图。唯一的问题是我想使用地图上的多个图标作为标记图标。一切都在开发过程中工作，功能齐全，但当我尝试“盖茨比构建”时，它失败了： 这里是错误 < Marker 25 | position={[`${genome.coordinate_x}`,`${genome.coordinate_y}`]} > 26 | icon =

我用盖茨比和传单来制作地图。唯一的问题是我想使用地图上的多个图标作为标记图标。一切都在开发过程中工作，功能齐全，但当我尝试“盖茨比构建”时，它失败了：

这里是错误

                          < Marker
  25 |                       position={[`${genome.coordinate_x}`,`${genome.coordinate_y}`]}
> 26 |                       icon = {new Icon({
     |                               ^
  27 |                         iconUrl: genome.bee_icon.childImageSharp.fluid.src,
  28 |                         iconSize: [60],
  29 |                         iconAnchor: [20, 40]
  WebpackError: TypeError: leaflet__WEBPACK_IMPORTED_MODULE_3__.Icon is not a constructor

26 |图标={新图标({
|                               ^
27 | iconUrl:genome.bee_icon.childImageSharp.fluid.src，
28 | iconSize:[60]，
29 | iconAnchor:[20,40]
WebPackageError:TypeError:传单\uu网页包\u导入的\u模块\uu 3\uuu。图标不是构造函数
这是页面的代码

import React from "react"
import LayoutNoPadding from "../components/layoutNoPadding"
import { Map, Marker, Popup, TileLayer, Tooltip } from 'react-leaflet'
import {Icon} from 'leaflet'
import {graphql} from 'gatsby'
import Link from 'gatsby-link'
import SEO from '../components/SEO'
import Img from 'gatsby-image'


const IndexPage = ({data}) => {
  const {allStrapiGenomes:{nodes:genomes}} = data

  return (
  <LayoutNoPadding>
    <SEO title="WWB" />
        <Map center={[0, 0]} zoom={2} maxZoom={5} minZoom={2} attributionControl={false} >
                <TileLayer
                url="https://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}{r}.png"
                 />
                {genomes.map((genome)=> {
                  return (
                    <div className="bee-icons">
                    <Marker
                      position={[`${genome.coordinate_x}`,`${genome.coordinate_y}`]}
                      icon = {new Icon({
                        iconUrl: genome.bee_icon.childImageSharp.fluid.src,
                        iconSize: [60],
                        iconAnchor: [20, 40]
                      })}
                    >
                      <Tooltip>{genome.bee_name}</Tooltip>
                      <Popup>
                        <Img fluid={genome.bee_icon.childImageSharp.fluid} alt={genome.bee_name} />
                        <h1 className="text-xl py-2">{genome.bee_name}</h1>
                        <h1 className="text-lg text-gray-500">{genome.bee_genome}</h1>
                        <p className="text-sm text-gray-700 pb-2">{genome.summary}</p>
                        <Link fade to={`/genomes/${genome.slug}`} className="flex bg-gray-200 py-2 px-4 focus:outline-none text-lg cursor-pointer text-white rounded-full justify-center text-white hover:bg-gray-300 transition-all duration-500 ease-in-out">Read More</Link>
                      </Popup>
                    </Marker>
                </div>
                  )
                })}
        </Map>
  </LayoutNoPadding>
  )
}
export default IndexPage

export const query = graphql`
  {
    allStrapiGenomes {
      nodes {
        bee_icon {
          childImageSharp {
            fluid {
              ...GatsbyImageSharpFluid
            }
          }
        }
        bee_genome
        coordinate_x
        coordinate_y
        summary
        strapiId
        bee_photo {
          childImageSharp {
            fluid {
              ...GatsbyImageSharpFluid
            }
          }
        }
        bee_name
        content
        slug
        }
      }
    }
`

从“React”导入React
从“./组件/LayoutNoPadding”导入LayoutNoPadding
从“反应传单”导入{Map，Marker，Popup，tillelayer，Tooltip}
从“传单”导入{Icon}
从“盖茨比”导入{graphql}
从“盖茨比链接”导入链接
从“../components/SEO”导入SEO
从“盖茨比图像”导入Img
常量IndexPage=（{data}）=>{
常量{allStrapiGenomes:{节点：基因组}}=数据
返回(
{基因组.map（（基因组）=>{
返回(
{genome.bee_name}
{genome.bee_name}
{基因组。蜜蜂基因组}

{genome.summary}

阅读更多
)
})}
)
}
导出默认索引扩展
export const query=graphql`
{
全链基因组{
节点{
蜜蜂图标{
childImageSharp{
流质{
…盖茨比磁流体
}
}
}
蜜蜂基因组
坐标
协调
总结
斯特拉皮德
比尤照片{
childImageSharp{
流质{
…盖茨比磁流体
}
}
}
比尤名字
内容
鼻涕虫
}
}
}
`
我确信这与在标记器中宣布图标构造函数有关，是否合法，解决方案是什么？提前感谢。

将其包装在检查
窗口中
条件：

    return (
    {typeof window !== 'undefined' &&
      <LayoutNoPadding>
        <SEO title="WWB" />
            <Map center={[0, 0]} zoom={2} maxZoom={5} minZoom={2} attributionControl={false} >
                    <TileLayer
                    url="https://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}{r}.png"
                     />
                    {genomes.map((genome)=> {
                      return (
                        <div className="bee-icons">
                        <Marker
                          position={[`${genome.coordinate_x}`,`${genome.coordinate_y}`]}
                          icon = {new Icon({
                            iconUrl: genome.bee_icon.childImageSharp.fluid.src,
                            iconSize: [60],
                            iconAnchor: [20, 40]
                          })}
                        >
                          <Tooltip>{genome.bee_name}</Tooltip>
                          <Popup>
                            <Img fluid={genome.bee_icon.childImageSharp.fluid} alt={genome.bee_name} />
                            <h1 className="text-xl py-2">{genome.bee_name}</h1>
                            <h1 className="text-lg text-gray-500">{genome.bee_genome}</h1>
                            <p className="text-sm text-gray-700 pb-2">{genome.summary}</p>
                            <Link fade to={`/genomes/${genome.slug}`} className="flex bg-gray-200 py-2 px-4 focus:outline-none text-lg cursor-pointer text-white rounded-full justify-center text-white hover:bg-gray-300 transition-all duration-500 ease-in-out">Read More</Link>
                          </Popup>
                        </Marker>
                    </div>
                      )
                    })}
            </Map>
      </LayoutNoPadding>
    }      
 )

返回(
{typeof window！==“未定义”&&
{基因组.map（（基因组）=>{
返回(
{genome.bee_name}
{genome.bee_name}
{基因组。蜜蜂基因组}

{genome.summary}

阅读更多
)
})}
}      
)

gatsby develop
发生在浏览器端，因为它创建了一个套接字来实时刷新和重新水合组件以及浏览器。
gatsby build
发生在服务器端，您可能会注意到，在服务器端没有窗口（或任何其他浏览器全局对象，如
文档
）有多种解决方案可以绕过这个问题：从添加
null
加载器，到通过webpack传输时从
node\u modules
产生的整个不良依赖，再到添加一个简单的条件来检查
窗口是否已定义（提供的解决方案）


您可以在中查看更多详细信息。
将其包装在检查
窗口中
条件：


    return (
    {typeof window !== 'undefined' &&
      <LayoutNoPadding>
        <SEO title="WWB" />
            <Map center={[0, 0]} zoom={2} maxZoom={5} minZoom={2} attributionControl={false} >
                    <TileLayer
                    url="https://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}{r}.png"
                     />
                    {genomes.map((genome)=> {
                      return (
                        <div className="bee-icons">
                        <Marker
                          position={[`${genome.coordinate_x}`,`${genome.coordinate_y}`]}
                          icon = {new Icon({
                            iconUrl: genome.bee_icon.childImageSharp.fluid.src,
                            iconSize: [60],
                            iconAnchor: [20, 40]
                          })}
                        >
                          <Tooltip>{genome.bee_name}</Tooltip>
                          <Popup>
                            <Img fluid={genome.bee_icon.childImageSharp.fluid} alt={genome.bee_name} />
                            <h1 className="text-xl py-2">{genome.bee_name}</h1>
                            <h1 className="text-lg text-gray-500">{genome.bee_genome}</h1>
                            <p className="text-sm text-gray-700 pb-2">{genome.summary}</p>
                            <Link fade to={`/genomes/${genome.slug}`} className="flex bg-gray-200 py-2 px-4 focus:outline-none text-lg cursor-pointer text-white rounded-full justify-center text-white hover:bg-gray-300 transition-all duration-500 ease-in-out">Read More</Link>
                          </Popup>
                        </Marker>
                    </div>
                      )
                    })}
            </Map>
      </LayoutNoPadding>
    }      
 )



返回(
{typeof window！==“未定义”&&
{基因组.map（（基因组）=>{
返回(
{genome.bee_name}
{genome.bee_name}
{基因组。蜜蜂基因组}

{genome.summary}

阅读更多
)
})}
}      
)



gatsby develop
发生在浏览器端，因为它创建了一个套接字来实时刷新和重新水合组件以及浏览器。
gatsby build
发生在服务器端，您可能会注意到，在服务器端没有窗口（或任何其他浏览器全局对象，如
文档
）有多种解决方案可以绕过这个问题：从添加
null
加载器，到通过webpack传输时从
node\u modules
产生的整个不良依赖，再到添加一个简单的条件来检查
窗口是否已定义（提供的解决方案）


您可以在中查看更多详细信息。
您是否尝试在没有新关键字的情况下调用
Icon（）
。@ksav否，正如您在代码页上所看到的，我调用新的用于生成构造函数，不知怎的，它在开发期间[在我的计算机上]工作正常，但当我点击[gatsby build]时，它给了我一个错误：再次感谢。@ksav我刚刚做了，它甚至在使用以下代码的开发过程中也失败了：``TypeError:无法读取未定义的24 | 26 | icon={icon（{27 | iconUrl:genome.bee|icon.childImageSharp.flui）的属性'initialize'