reactjs - 出乎意料的'!在 'worker-loader!mapbox-gl/dist/mapbox-gl-csp-worker'
问题描述
嗨,我正在尝试在 React 中使用 mapbox-gl 和本教程。我收到了这个错误: 意外的'!' 在 'worker-loader!mapbox-gl/dist/mapbox-gl-csp-worker' 中同时导入 "worker-loader!mapbox-gl/dist/mapbox-gl-csp-worker"
这是我的重要代码:
地图.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, lat, 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();
索引.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>
包.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 项目:如何将文件导入使用创建反应应用程序作为原始文本的反应应用程序?
推荐阅读
- java - Java:此方法必须返回 double 类型的结果类型
- docker - docker代理路径中的nginx到子域
- python - 使用 xpath 获取图像
- python - 我不确定如何将这段代码正确地[使用 PyInstaller] 执行到 .exe 文件中
- c++ - 重载运算符?
- python - Psycopg2 将数据保存到哪里?
- java - 如何在if语句中使用异步任务结果
- google-apps-script - 使用 nextPageToken 获得 100 多个 Google Drive 评论
- pdf - Pandoc XeLatex 引擎生成的 PDF 中没有图像
- windows - 更新作为 Windows 服务运行的 exe 的最佳程序