我们的应用程序是一个使用 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 构建配置中添加一些调整来使它工作。抱歉,这里没有太多信息,我希望有人遇到过这个问题,并且可能有一个简单的解决方法。
最佳答案
实际上,在服务端渲染中,这种场景是很常见的,一些库依赖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
关于mapbox-gl-js - Mapbox-gl.js 和服务器端渲染引用错误 : self is not defined,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42169202/