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');
}

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

2 个答案: