web-infra-dev / rspack

The fast Rust-based web bundler with webpack-compatible API 🦀️
https://rspack.dev
MIT License
9.19k stars 534 forks source link

[Bug]: @arcgis/core is not supported. Error message is displayed during compilation: Uncaught SyntaxError: Unexpected token ';' #7397 #7397

Closed BrightX closed 1 month ago

BrightX commented 1 month ago

Version

System:
    OS: Windows 10 10.0.19045
    CPU: (8) x64 Intel(R) Core(TM) i7-6700K CPU @ 4.00GHz
    Memory: 20.38 GB / 31.94 GB
  Browsers:
    Edge: Spartan (44.19041.3570.0), Chromium (125.0.2535.67)
    Internet Explorer: 11.0.19041.3570
  npmPackages:
    @arcgis/core: ^4.30.9 => 4.30.9
    @rsbuild/core: 1.0.1-beta.6 => 1.0.1-beta.6

Details

yarn dev 浏览器控制台报错:Uncaught SyntaxError: Unexpected token ';'

image

yarn build 报错:

image

Reproduce link

https://developers.arcgis.com/javascript/latest/get-started-npm/#api

Reproduce Steps

index.html

<div id="app">
  <div id="viewDiv"></div>
</div>

index.js

import Map from "@arcgis/core/Map";
import MapView from "@arcgis/core/views/MapView";
import "@arcgis/core/assets/esri/themes/dark/main.css";
import "@esri/calcite-components/dist/calcite/calcite.css";

const map = new Map({
  basemap: "topo-vector"
});
const view = new MapView({
  container: "viewDiv", // reference the div id
  map: map,
  zoom: 4,
  center: [15, 65]
});

css

html, body {
  margin: 0;
  padding: 0;
  border: none;
}

#app {
  height: 100vh;
  margin: 0;
  padding: 0;
  border: 0;
}

#viewDiv {
  height: 100vh;
}
SoonIter commented 1 month ago

investigation

I conducted a preliminary investigation. The npm package @arcgis/core releases the minified js product, which causes Rspack/webpack to easily make wrong analysis during scope analysis and variable replace. After I formatted this npm package via npx prettier --write ., it works

LingyuCoder commented 1 month ago

Seems to be a bug of asiSafe of HarmonyImportSpecifierDependency. A minimum repro here. cc @h-a-n-a