mapbox-gl-js - Mapbox-gl.js 和服务器端渲染引用错误 : self is not defined

Question

我们的应用程序是一个使用 Webpack 构建的 React/Node 应用程序，并在生产环境中呈现服务器端。在此生产场景中，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