react-map-gl: uncaught ReferenceError: _typeof is not defined
react-map-gl: uncaught ReferenceError: _typeof is not defined
尝试使用 react-map-gl
但无法使最简单的库示例运行。一旦我尝试渲染地图,我就会在控制台中收到这个我无法理解的奇怪错误:
Uncaught ReferenceError: _typeof is not defined
at mr (blob:http://localhos…6-19b5d5c80288:4993)
at blob:http://localhos…6-19b5d5c80288:6740
at new Fn (blob:http://localhos…6-19b5d5c80288:6757)
at new Jn (blob:http://localhos…6-19b5d5c80288:7040)
at blob:http://localhos…6-19b5d5c80288:8992
at blob:http://localhos…-19b5d5c80288:14153
有时会变成这样:
Uncaught ReferenceError: _typeof is not defined
at mr (0bcc60f9-25f2-4a56-8906-ebd57645a06c:4993)
at 0bcc60f9-25f2-4a56-8906-ebd57645a06c:6740
at new Fn (0bcc60f9-25f2-4a56-8906-ebd57645a06c:6757)
at new Jn (0bcc60f9-25f2-4a56-8906-ebd57645a06c:7040)
at 0bcc60f9-25f2-4a56-8906-ebd57645a06c:8992
at 0bcc60f9-25f2-4a56-8906-ebd57645a06c:14153
带有 mapbox 徽标的地图框呈现,但没有其他内容。
我在 Rails 6 上有这些包裹:
"dependencies": {
"@babel/preset-react": "^7.0.0",
"@rails/actioncable": "^6.0.0-alpha",
"@rails/activestorage": "^6.0.0-alpha",
"@rails/ujs": "^6.0.0-alpha",
"@rails/webpacker": "^4.0.7",
"babel-plugin-transform-react-remove-prop-types": "^0.4.24",
"prop-types": "^15.7.2",
"react": "^16.9.0",
"react-dom": "^16.9.0",
"react-map-gl": "^5.0.10"
}
我的代码:
import React, { Component } from 'react';
import ReactMapGL from 'react-map-gl';
import 'mapbox-gl/dist/mapbox-gl.css';
class Map extends Component {
state = {
viewport: {
latitude: 20.827873989993776,
longitude: -73.86145304236818,
zoom: 3,
},
};
render() {
return (
<ReactMapGL
mapboxApiAccessToken={[TOKEN]}
{...this.state.viewport}
onViewportChange={viewport => this.setState({ viewport })}
/>
);
}
}
export default Map;
用 Google 搜索了整个下午的错误,但一无所获。
从@JakeWorth 评论的相关 mapbox-gl
问题中,我能够从其中引用的有据可查的 PR 中找到解决方案:https://github.com/lewagon/rails-templates/pull/81
将以下行添加到 config/webpack/environment.js
可防止 Babel 转译 node_modules
中的包,这就是我的问题的原因。
environment.loaders.delete('nodeModules');
尝试使用 react-map-gl
但无法使最简单的库示例运行。一旦我尝试渲染地图,我就会在控制台中收到这个我无法理解的奇怪错误:
Uncaught ReferenceError: _typeof is not defined
at mr (blob:http://localhos…6-19b5d5c80288:4993)
at blob:http://localhos…6-19b5d5c80288:6740
at new Fn (blob:http://localhos…6-19b5d5c80288:6757)
at new Jn (blob:http://localhos…6-19b5d5c80288:7040)
at blob:http://localhos…6-19b5d5c80288:8992
at blob:http://localhos…-19b5d5c80288:14153
有时会变成这样:
Uncaught ReferenceError: _typeof is not defined
at mr (0bcc60f9-25f2-4a56-8906-ebd57645a06c:4993)
at 0bcc60f9-25f2-4a56-8906-ebd57645a06c:6740
at new Fn (0bcc60f9-25f2-4a56-8906-ebd57645a06c:6757)
at new Jn (0bcc60f9-25f2-4a56-8906-ebd57645a06c:7040)
at 0bcc60f9-25f2-4a56-8906-ebd57645a06c:8992
at 0bcc60f9-25f2-4a56-8906-ebd57645a06c:14153
带有 mapbox 徽标的地图框呈现,但没有其他内容。
我在 Rails 6 上有这些包裹:
"dependencies": {
"@babel/preset-react": "^7.0.0",
"@rails/actioncable": "^6.0.0-alpha",
"@rails/activestorage": "^6.0.0-alpha",
"@rails/ujs": "^6.0.0-alpha",
"@rails/webpacker": "^4.0.7",
"babel-plugin-transform-react-remove-prop-types": "^0.4.24",
"prop-types": "^15.7.2",
"react": "^16.9.0",
"react-dom": "^16.9.0",
"react-map-gl": "^5.0.10"
}
我的代码:
import React, { Component } from 'react';
import ReactMapGL from 'react-map-gl';
import 'mapbox-gl/dist/mapbox-gl.css';
class Map extends Component {
state = {
viewport: {
latitude: 20.827873989993776,
longitude: -73.86145304236818,
zoom: 3,
},
};
render() {
return (
<ReactMapGL
mapboxApiAccessToken={[TOKEN]}
{...this.state.viewport}
onViewportChange={viewport => this.setState({ viewport })}
/>
);
}
}
export default Map;
用 Google 搜索了整个下午的错误,但一无所获。
从@JakeWorth 评论的相关 mapbox-gl
问题中,我能够从其中引用的有据可查的 PR 中找到解决方案:https://github.com/lewagon/rails-templates/pull/81
将以下行添加到 config/webpack/environment.js
可防止 Babel 转译 node_modules
中的包,这就是我的问题的原因。
environment.loaders.delete('nodeModules');