Trying to switch to ES from AMD - Uncaught TypeError: Failed to resolve module specifier "@esri/arcgis-html-sanitizer".

1822
3
Jump to solution
10-20-2021 06:25 AM
LukeCalladine
New Contributor III

Hey all,

I hoped I wouldn't have to post this - but my thinking is coming up with zero and Google only produces a single result (Github of "@esri/arcgis-html-sanitizer").

I'm trying to modernize my current AMD code to ES modules however I can't get past the initial import X from "X" stage.

It seems that certain imports cause the following error to occur: "Uncaught TypeError: Failed to resolve module specifier "@esri/arcgis-html-sanitizer"." 

So far I've found the following imports: MapView and IdentityManager trigger the error so far.

The only result on Google points me to: https://github.com/Esri/arcgis-html-sanitizer

So I install "@esri/arcgis-html-sanitizer" and attempt to import the above, above my MapView/IdentityManager imports using the following:

import { Sanitizer } from "/node_modules/@esri/arcgis-html-sanitizer/dist/umd/arcgis-html-sanitizer.min.js";
In my understanding it should be pointing to a .js file, like the other imports but there isn't one in the main directory and I've tried pointing it to every single version available in the dist subfolders.
 
Obviously it gives me a 404 error when I try and point to the "@esri/arcgis-html-sanitizer directory itself and all other iterations give me the following: 
"Uncaught TypeError: Failed to resolve module specifier "@esri/arcgis-html-sanitizer". Relative references must start with either "/", "./", or "../"." - I know this means I'm not pointing to it correctly, but I can't work out what I'm supposed to be pointing to.
 
Can someone put me out of my misery?
0 Kudos
2 Solutions

Accepted Solutions
AndyGup
Esri Regular Contributor

Hi @LukeCalladine this sounds like a configuration issue with your module bundler. Do you have a github repo with a simple app that reproduces the issue? Or you can try to reproduce it with one of our sample apps: https://github.com/Esri/jsapi-resources/tree/master/esm-samples. Maybe comparing against our samples will provide some hints.

 

View solution in original post

LukeCalladine
New Contributor III

Turns out I may not need to learn too much about module bundlers!

I was able to get ViteJS to do it all for me first time, after watching @ReneRubalcava's video on ViteJS on Youtube: https://www.youtube.com/watch?v=sV1Tcie2SR8.

View solution in original post

3 Replies
AndyGup
Esri Regular Contributor

Hi @LukeCalladine this sounds like a configuration issue with your module bundler. Do you have a github repo with a simple app that reproduces the issue? Or you can try to reproduce it with one of our sample apps: https://github.com/Esri/jsapi-resources/tree/master/esm-samples. Maybe comparing against our samples will provide some hints.

 

LukeCalladine
New Contributor III

Hey @AndyGup,

Many thanks for your reply - I can only imagine the fact I don't know what a module bundler is, is probably the root of my current problem and likely the majority of my future ones!

I've just cloned the jsapi-node ESM sample and was able to import MapView somewhat successfully - while I get a HTMLElement error which I have no idea to fix yet, it does seem to have gotten past the initial Import error I was getting in my initial post. I'll take a look through the files and see if I can get my head around what's happening.

And to think I thought I was getting the hang of this yesterday...

0 Kudos
LukeCalladine
New Contributor III

Turns out I may not need to learn too much about module bundlers!

I was able to get ViteJS to do it all for me first time, after watching @ReneRubalcava's video on ViteJS on Youtube: https://www.youtube.com/watch?v=sV1Tcie2SR8.