Mapbox-gl.js и рендеринг на стороне сервера Ссылка Ошибка: самоопределение не определено

Question

Наше приложение представляет собой приложение React/Node, созданное с помощью Webpack и предоставляющее серверную часть на производстве. В этом производственном сценарии пакет mapbox-gl имеет проблемы с загрузкой на стороне сервера. Я подозреваю, что это связано с тем, как mapbbox-gl.js является уже обозреваемой библиотекой и не очень хорошо работает с этой серверной средой, которая построена с помощью webpack. Ниже приведена соответствующая ошибка, когда я пытаюсь загрузить страницу в первый раз, и мы не получаем ни один из html-компонентов компонента, сгенерированных на стороне сервера (хотя все работает, когда оно загружается в клиенте браузера).

Соответствующая строка кода в mapbox-gl.js, которая генерирует ошибку в верхней части стека, читает «module.exports = self;».

Node app is running on port 5000 
ReferenceError: self is not defined 
    at Object.112 (webpack:///./~/mapbox-gl/dist/mapbox-gl.js?:225:29) 
    at s (webpack:///./~/mapbox-gl/dist/mapbox-gl.js?:1:602) 
    at eval (webpack:///./~/mapbox-gl/dist/mapbox-gl.js?:1:653) 
    at Object.110../window (webpack:///./~/mapbox-gl/dist/mapbox-gl.js?:221:25) 
    at s (webpack:///./~/mapbox-gl/dist/mapbox-gl.js?:1:602) 
    at eval (webpack:///./~/mapbox-gl/dist/mapbox-gl.js?:1:653) 
    at Object.24.../package.json (webpack:///./~/mapbox-gl/dist/mapbox-gl.js?:48:26) 
    at s (webpack:///./~/mapbox-gl/dist/mapbox-gl.js?:1:602) 
    at e (webpack:///./~/mapbox-gl/dist/mapbox-gl.js?:1:773) 
    at eval (webpack:///./~/mapbox-gl/dist/mapbox-gl.js?:1:791) 

Надеюсь, есть некоторые хитрости, которые я могу добавить в нашу конфигурацию сборки webpack, чтобы сделать эту работу. Извините, здесь не так много информации, я надеюсь, что кто-то столкнется с этой проблемой и может быть легко исправить.

Answer 1

На самом деле, когда дело доходит до рендеринга на стороне сервера, такой сценарий очень распространен, что некоторая библиотека полагается на DOM или среду браузера.

Решение:
1. В конфигурации WebPack, определить переменную для указания того, работает ли приложение на стороне сервера.

new webpack.DefinePlugin({ 
    __CLIENT__: true 
    // Other global variables 
}), 

2. Внутри файлов, использующих библиотеку MapBox

let mapboxGl; 
if (__CLIENT__) { 
    mapboxGl = require('mapbox-gl') 
} 

3. стороне сервера ввода кода

global.__CLIENT__ = false; 

4. Для использования Webpack как для клиентской и Сервер- сторона, используя webpack-isomorphic-tools