Quintessa
Quintessa4mo ago

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...
3 Replies
marvinh.
marvinh.4mo ago
That looks like a bug in Deno's node compatibility layer. I've filed an issue for that https://github.com/denoland/deno/issues/23059
GitHub
Bug: ESM module incorrectly detected as CJS · Issue #23059 · denola...
Steps to reproduce: Run this snippet: import Bookmarks from "npm:@arcgis/core@4.29/widgets/Bookmarks.js"; console.log(Bookmarks); Error: error: 'import', and 'export' cann...
marvinh.
marvinh.4mo ago
Ok turns out that this is not a bug in Deno, but a broken npm package. They say that the package is written in commonjs but ship ESM instead.
Quintessa
Quintessa4mo ago
Oh I see. Thanks for the investigation!