出乎意料的“！”在 'worker-loader!mapbox-gl/dist/mapbox-gl-csp-worker'

编程问答 2022-05-22

问题描述

嗨，我正在尝试在 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://medium.com/@daveberning/if-anyone-is-running-into-some-linter-errors-regarding-inline-import-statements-add-this-comment-3369e5e6779

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?

mapbox-glreactjsreactjsreactjsreactjssyntax-errorworker-loader