如何解决出乎意料的“!”在 'worker-loader!mapbox-gl/dist/mapbox-gl-csp-worker'
嗨,我正在尝试在 React 中使用带有 this tutorial 的 mapBox-gl。 我收到此错误: 意外的“!”在'worker-loader!mapBox-gl/dist/mapBox-gl-csp-worker' 导入“worker-loader!mapBox-gl/dist/mapBox-gl-csp-worker”
这是我的重要代码:
Map.js
import React from 'react'
import mapBoxgl from 'mapBox-gl/dist/mapBox-gl-csp';
import MapBoxWorker from 'worker-loader!mapBox-gl/dist/mapBox-gl-csp-worker';
mapBoxgl.workerClass = MapBoxWorker;
mapBoxgl.accesstoken = " the token ";
export default class Map extends React.Component {
constructor(props) {
super(props);
this.state = {
lng: -70.9,lat: 42.35,zoom: 9
};
this.mapContainer = React.createRef();
}
componentDidMount() {
const { lng,lat,zoom } = this.state;
const map = new mapBoxgl.Map({
container: this.mapContainer.current,style: 'mapBox://styles/mapBox/streets-v11',center: [lng,lat],zoom: zoom
});
}
render() {
const style = {
"position": "absolute","top": "0","right": "0","left": "0","bottom": "0"
}
const { lng,zoom } = this.state;
return (
<div>
<div ref={this.mapContainer} className={style} />
</div>
);
}
}
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import reportWebVitals from './reportWebVitals';
import Map from "./Map";
ReactDOM.render(
<Map/>,document.getElementById('root')
);
reportWebVitals();
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<Meta name="viewport" content="width=device-width,initial-scale=1" />
<Meta name="theme-color" content="#000000" />
<Meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<link href='https://api.mapBox.com/mapBox-gl-js/v2.1.1/mapBox-gl.css' rel='stylesheet' />
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
package.json
{
"name": "mapBoxtest","version": "0.1.0","private": true,"dependencies": {
"@testing-library/jest-dom": "^5.11.9","@testing-library/react": "^11.2.5","@testing-library/user-event": "^12.8.1","mapBox-gl": "^2.1.1","react": "^17.0.1","react-dom": "^17.0.1","react-scripts": "4.0.3","web-vitals": "^1.1.0","worker-loader": "^3.0.7"
},"scripts": {
"start": "react-scripts start","build": "react-scripts build","test": "react-scripts test","eject": "react-scripts eject"
},"eslintConfig": {
"extends": [
"react-app","react-app/jest"
]
},"browserslist": {
"production": [
">0.2%","not dead","not op_mini all"
],"development": [
"last 1 chrome version","last 1 firefox version","last 1 safari version"
]
}
}
谁能帮我解决这个问题?
解决方法
这样做:
// eslint-disable-next-line import/no-webpack-loader-syntax
import MapboxWorker from 'worker-loader!mapbox-gl/dist/mapbox-gl-csp-worker';
欲知更多详情:
https://stackoverflow.com/a/45447398/10102695
https://lifesaver.codes/answer/es-lint-rule-import-no-webpack-loader-syntax-please-deactivate
对于 TS 项目:How to import a file into a react app that uses create react app as raw text?
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。