Sveltekit:导入 ESM 包会产生与 vite 一起使用的错误

Question

我正在尝试获取 Esri ArcGis's NPM package与 SvelteKit 一起工作。

根据链接文档，@arcgis/core 应该是 ESM。但是，当我尝试将其导入 SvelteKit 时 as shown here我收到关于 CommonJS 的错误。在新的 SvelteKit 应用程序中，将 index.svelte 更改为

<script>
 import Map from "@arcgis/core/Map";
 import MapView from "@arcgis/core/views/MapView";

 const map = new Map({
   basemap: "arcgis-topographic" // Basemap layer service
 });
</script>

会产生错误

Named export 'setAssetPath' not found. The requested module '@esri/calcite-components/dist/components/index.js' is a CommonJS module, which may not support all module.exports as named exports. CommonJS modules can always be imported via the default export, for example using:

import pkg from '@esri/calcite-components/dist/components/index.js';
const {setAssetPath: o} = pkg;

Sandbox demonstrating error here .

首先，我认为这个问题与 Vite 有关。所以我在 vite 中将 @arcgis/core 导入为 this tutorial显示。它工作正常。

如果我去查看 @esri/calcite-components/package.json，@arcgis/core 导入，我会看到 @esri/calcite-components/package.json 没有设置 "type": "module"。 @arcgis/core 似乎正在导入 CommonJS 模块。

当我尝试进一步调试时，我意识到 calcite-components 是一个包含 ESM 的 Stencil 项目，尽管错误声称该包是 CommonJS。无论哪种方式，错误本身都有建议的修复方法。当我进入问题文件并应用修复时:

node_modules/@arcgis/core/widgets/support/componentsUtils.js

// import{setAssetPath as o}from"@esri/calcite-components/dist/components/index.js" Old import statement
import pkg from '@esri/calcite-components/dist/components/index.js';
const {setAssetPath: o} = pkg;

它解决了这个问题。然后在文件 node_modules/@arcgis/core/widgets/support/chartUtils.js 中创建一个我认为不同的新文件:

该文件的第一行是:

import{chartColorSets as t}from"@esri/calcite-colors";

有错误

The requested module '@esri/calcite-colors' does not provide an export named 'chartColorSets'.

这对我来说很奇怪，因为 calcite-colors 是 ESM 并且确实有命名导出。如果我从 @arcgis/core 中删除所有导入，然后将 import{chartColorSets as t}from"@esri/calcite-colors" 复制/粘贴到我的 index.svelte 它工作正常。

为什么 Vite 项目工作得很好，为什么 SvelteKit 报告 calcite-colors 只有在通过 @arcgis/core 导入时才没有命名导出，并且不是通过我的 index.svelte 吗？

其他人有had this issue on the esri forums

Answer 1

在 onMount block 中使用动态导入

<script lang="ts">
    import { onMount } from 'svelte';

    onMount(async () => {
        const Map = (await import('@arcgis/core/Map')).default;
        const MapView = (await import('@arcgis/core/views/MapView')).default;

        const map = new Map({
            basemap: 'gray-vector'
        });

        const view = new MapView({
            container: 'viewDiv',
            map: map
        });

        view.when(() => {
            console.debug('Map loaded');
        });
    });
</script>

<div id="viewDiv" />

<style>
    @import '@arcgis/core/assets/esri/themes/light/main.css';
    
    #viewDiv {
        min-height: 500px;
    }
</style>