Mapbox-gl.js和服务器端呈现参考错误:未定义self

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