Quintessa Posts

Quintessa

•Created by Quintessa on 3/24/2024 in #help

Deno Fresh: TypeError: 'import', and 'export' cannot be outside of module

Deno Fresh:

// @deno-types="npm:@arcgis/core/interfaces.d.ts"
import config from "npm:@arcgis/core@4.29/config.js";
import Bookmarks from "npm:@arcgis/core@4.29/widgets/Bookmarks.js";
import Expand from "npm:@arcgis/core@4.29/widgets/Expand.js";
import MapView from "npm:@arcgis/core@4.29/views/MapView.js";
import WebMap from "npm:@arcgis/core@4.29/WebMap.js";

import { useEffect, useRef } from "preact/hooks";

export default function EsriMap() {
  const mapDiv = useRef(null);

  useEffect(() => {
    config.request.useIdentity = false;
    if (mapDiv.current) {
      /**
       * Initialize application
       */
      const webmap = new WebMap({
        portalItem: {
          id: "aa1d3f80270146208328cf66d022e09c",
        },
      });
      // ... the rest of the initialization code
  }, [mapDiv]);

  return <div className="mapDiv" ref={mapDiv}></div>;
}

// @deno-types="npm:@arcgis/core/interfaces.d.ts"
import config from "npm:@arcgis/core@4.29/config.js";
import Bookmarks from "npm:@arcgis/core@4.29/widgets/Bookmarks.js";
import Expand from "npm:@arcgis/core@4.29/widgets/Expand.js";
import MapView from "npm:@arcgis/core@4.29/views/MapView.js";
import WebMap from "npm:@arcgis/core@4.29/WebMap.js";

import { useEffect, useRef } from "preact/hooks";

export default function EsriMap() {
  const mapDiv = useRef(null);

  useEffect(() => {
    config.request.useIdentity = false;
    if (mapDiv.current) {
      /**
       * Initialize application
       */
      const webmap = new WebMap({
        portalItem: {
          id: "aa1d3f80270146208328cf66d022e09c",
        },
      });
      // ... the rest of the initialization code
  }, [mapDiv]);

  return <div className="mapDiv" ref={mapDiv}></div>;
}

I'm trying to use a mapping library ES module @arcgis/core, but it gives the following error. Am i missing a type definition or something else?:

deno fresh with @arcgis/core
error:
Task start deno run -A --watch=static/,routes/ dev.ts
Watcher Process started.
The manifest has been generated for 7 routes and 2 islands.
error: Uncaught (in promise) TypeError: 'import', and 'export' cannot be used outside of module code at file:///home/user/Documents/playground/fresh-deno/node_modules/.deno/@esri+calcite-components@2.6.0/nod
e_modules/@stencil/core/internal/client/index.js:24:1

  import { BUILD, NAMESPACE } from '@stencil/core/internal/app-data';
  ~~~~~~
  const manifest = (await import(toFileUrl(join(dir, "fresh.gen.ts")).href))
                    ^
    at async dev (https://deno.land/x/fresh@1.6.8/src/dev/dev_command.ts:38:21)
    at async file:///home/user/Documents/playground/fresh-deno/dev.ts:8:1
Watcher Process failed. Restarting on file change...

deno fresh with @arcgis/core
error:
Task start deno run -A --watch=static/,routes/ dev.ts
Watcher Process started.
The manifest has been generated for 7 routes and 2 islands.
error: Uncaught (in promise) TypeError: 'import', and 'export' cannot be used outside of module code at file:///home/user/Documents/playground/fresh-deno/node_modules/.deno/@esri+calcite-components@2.6.0/nod
e_modules/@stencil/core/internal/client/index.js:24:1

  import { BUILD, NAMESPACE } from '@stencil/core/internal/app-data';
  ~~~~~~
  const manifest = (await import(toFileUrl(join(dir, "fresh.gen.ts")).href))
                    ^
    at async dev (https://deno.land/x/fresh@1.6.8/src/dev/dev_command.ts:38:21)
    at async file:///home/user/Documents/playground/fresh-deno/dev.ts:8:1
Watcher Process failed. Restarting on file change...

4 replies

DDeno

•Created by Quintessa on 3/24/2024 in #help

Ecosystem: @arcgis/core

https://github.com/Esri/jsapi-resources/tree/main/esm-samples/jsapi-deno I've found an example importing @arcgis/core in their official repo to work with deno, however, I'm not sure whats best way forward in actually displaying the map. Should i use deno fresh or vannila ts without framework with deno or sveltekit, given the fact that @arcgis/core is a ES module written in vanilla js? What would be the best approach? Thanks!

1 replies