只有在生产中使用vercel,我的Mapbox地图不起作用。
这是我得到的错误消息,它链接到mapbox文档:
解析WebWorker包时出错。这很可能是由于巴贝尔的不当转移;请参阅https://docs.mapbox.com/mapbox-gl-js/guides/install/#transpiling。
在正式文件上,它说我们应该选择一组兼容的转换。
0.2%,未死亡,未死亡( 11 ),未镀铬< 51,未狩猎( 10 )
我做了,但这不管用:
package.json
"production": [
">0.2%",
"not dead",
"not ie 11",
"not chrome < 51",
"not safari < 10",
"not op_mini all"
],
我们也可以使用import mapboxgl from '!mapbox-gl';
将GL明确排除在转移溢出之外。这也给了我一条错误信息。
或者,我们可以在webpack.config.js
中集中配置它,这是无法使用react访问的。
由于我不想使用react-scripts eject
,所以我在这个StackOverflow邮政之后安装了react-app-rewired
我的配置如下所示:
module.exports = {
use: {
loader: 'babel-loader',
options: {
ignore: ['./node_modules/mapbox-gl/dist/mapbox-gl.js']
}
}
}
但这也行不通。
有人知道修复mapbox错误的可靠方法吗?还是我已经尝试错了什么?
发布于 2022-04-05 04:22:27
我找到了一个关于GitHub问题的更深层次的答案,这个问题很有效。
扎卡良流于2020年12月23日发表评论
Create的一个解决方法是使用Webpack的内联加载器语法,在这种情况下,绑定程序的配置是不可配置的。 首先,安装工人装载机包(纱线添加工人装载机).然后在应用程序中添加以下代码片段,最好就在导入的下面: // eslint-禁用-下一行导入/无webpack-加载器-语法mapboxgl.workerClass =mapboxgl.workerClass,您可能需要反编译行,所以Create不会出错构建。
因为我不使用纱线,所以我用了
npm install worker-loader --save-dev
然后在我的js文件上
import mapboxgl from 'mapbox-gl';
mapboxgl.workerClass = require('worker-loader!mapbox-gl/dist/mapbox-gl-csp-worker').default; // eslint-disable-line
// eslint-disable-line
注释仅为该行禁用linter规则。
https://stackoverflow.com/questions/71750627
复制相似问题