Module parse failed: Unexpected character '�' (1:0) nextjs 引入地图报错了。可以帮忙看下嘛？

[xionglongxiang]

错误信息： error - ./node_modules/@uiw/react-baidu-map/lib/esm/Marker/markers.png 1:0 Module parse failed: Unexpected character '�' (1:0) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders (Source code omitted for this binary file)

代码地址和对应分支： https://github.com/xionglongxiang/test-next.git branch: test-map

[haiifeng]

@xionglongxiang 参考这个，先本地开发吧，等确定一个比较好的方案再合并到master https://github.com/uiwjs/react-baidu-map/pull/131

[jaywcjlove]

图片的问题，使用 next-images 插件解决。而不是使用一个存放在 GitHub 中的图片。

@xionglongxiang @haiifeng

Upgrade + @uiw/react-baidu-map@1.18.9

[jaywcjlove]

https://codesandbox.io/s/react-baidu-map-for-nextjs-qsy5t?file=/pages/index.js

@xionglongxiang

import Link from "next/link";
import { Map, APILoader } from '@uiw/react-baidu-map'
import { useEffect, useState } from "react";

export default function IndexPage() {
  const [maps, setMaps] = useState()
  useEffect(() => {
    setMaps(
      <APILoader akay="GTrnXa5hwXGwgQnTBG28SHBubErMKm3f">
        <Map />
      </APILoader>
    )
  }, [])
  return (
    <div>
      Hello World.{" "}
      <Link href="/about">
        <a>About</a>
      </Link>
      <div style={{ width: '100%', height: '300px' }}>
        {maps}
      </div>
    </div>
  );
}