Mapbox-gl.js和服务器端渲染参考错误：自身未定义

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

Answer 2

我在Nuxt.js上遇到了同样的问题。为了解决此问题，mapbox包应仅在客户端导入。

这里是代码：

let mapboxgl;

// Check if the process is on the client side
if (process.client) {
  mapboxgl = require('mapbox-gl');
}