reactjs - '!' 中的意外 'worker-loader!mapbox-gl/dist/mapbox-gl-csp-worker'

嗨，我正在尝试在 React 中使用 mapbox-gl 和 this tutorial .
我收到此错误:
出乎意料的“!”在 '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, lat, zoom } = this.state;
        return (
            <div>
                <div ref={this.mapContainer} className={style} />
            </div>
        );
    }
}

索引.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';

关于reactjs - '!' 中的意外 'worker-loader!mapbox-gl/dist/mapbox-gl-csp-worker'，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/66476925/

reactjs - '!' 中的意外 'worker-loader!mapbox-gl/dist/mapbox-gl-csp-worker'

上一篇：javascript - 仅当 ‘await’ 选项设置为 ‘module’ 时，才允许使用顶级 ‘esnext' 表达式

下一篇：c++ - 在 C++20 中，如果宏是 #undef'd，然后又是 #define'd，那么它是否被认为是 "active"？