mapbox-gl 이 포함 된 gatsby.js 애플리케이션이 있으며 검색 기능을 추가하기 위해 mapbox-gl-geocoder 패키지를 포함하려고 할 때까지 모두 성공적으로 작동했습니다 .
다음과 같이 npm을 사용하여 설치했습니다.
npm install mapbox/mapbox-gl-geocoder --save
그런 다음 React 구성 요소에 추가했습니다.
import '@mapbox/mapbox-gl-geocoder/lib/mapbox-gl-geocoder.css';
import MapboxGeocoder from '@mapbox/mapbox-gl-geocoder';
useEffect 후크 내부 :
map.addControl(
new MapboxGeocoder({
accessToken: mapboxgl.accessToken,
zoom: 20,
placeholder: 'Enter City',
mapboxgl: mapboxgl
}), 'top-left'
);
로컬에서 실행 gatsby develop하면 정상적으로 작동하지만 Netlify로 배포하면 다음 오류가 발생합니다.
:24:21 PM: error Generating SSR bundle failed
1:24:21 PM: Can't resolve 'electron' in '/opt/build/repo/node_modules/@mapbox/mapbox-sdk/node_modules/got'
1:24:21 PM: If you're trying to use a package make sure that 'electron' is installed. If you're trying to use a local file make sure that the path is correct.
mapbox-gl-geocoder는 @ mapbox / mapbox-sdk에 대한 종속성이 있고 mapbox-sdk에는 어떻게 든 전자가 필요하다는 종속성이 있습니다.
got npm 페이지에서 전자에 대해 읽을 수있는 유일한 것은 다음과 같습니다.
Electron support has been removed
The Electron net module is not consistent with the Node.js http module. See #899 for more info.
어떤 식 으로든 npm을 사용하여 전자를 설치하여 오류가 사라 졌는지 확인하고 창 개체를 사용할 수 없음을 나타내는 새로운 오류로 빌드가 실패하기 시작했습니다.
10:35:45 AM: error "window" is not available during server side rendering.
그 오류를 검색하면 패키지를로드하지 않는 것에 대한 답변을 gatsby-node.js얻었지만 도움이되지 않았습니다.
windowGatsby에서 사용하는 타사 모듈을 다룰 때 nullSSR ( S erver- S ide R endering) 동안 트랜스 파일을 방지하기 위해 자체 웹팩 구성에 로더를 추가해야합니다 . 이는 gatsby develop브라우저에서 gatsby build발생 하는 반면 window다른 전역 개체 가없는 노드 서버에서 발생 하기 때문 입니다.
exports.onCreateWebpackConfig = ({ stage, loaders, actions }) => {
if (stage === "build-html") {
actions.setWebpackConfig({
module: {
rules: [
{
test: /@mapbox/,
use: loaders.null(),
},
],
},
})
}
}
것을 명심 test값이 아래의 폴더와 일치하는 정규 표현식이다 node_modules그래서이되도록 /@mapbox/올바른 이름입니다.
패치 패키지를 사용하면 작동 할 수 있지만 성능에 영향을 줄 수있는 다른 번들 파일 인 다른 패키지를 추가하고 있다는 점을 명심하십시오. 제안 된 스 니펫은 애플리케이션을 빌드 할 때 발생하는 기본 제공 솔루션입니다.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다