ES Modules not working with React Declarative Routing

443
2
Jump to solution
01-21-2021 07:08 AM
supegui
New Contributor

Hi, I hope you're doing great.

I feel this is a bug using the ES Module for React, please take a look and confirm.
 
I'm trying to use the new ES Module on a React app (@Anonymous User/core), I followed the documentation doing this:
1. npm install @Anonymous User/core
2. inside the package.json, I added the script for coping the assets to the public folder generated by webpack (I'm using create-react-app) --> "copy": "ncp ./node_modules/@arcgis/core/assets ./public/assets"
 
 
This is the issue, inside the React app I'm using declarative routing (react-router-dom) and when placing the map component inside of a root path http://myapp.com/map, it works pretty well, and no error to load the map.
but when placing the map inside of a subpath http://myapp.com/main/map the map is not able to load and it breaks showing the error:
 
Spoiler
Refused to execute script from 'http://localhost:3003/main/assets/esri/core/workers/RemoteClient.js' because its MIME type ('text/html') is not executable.
 
if you check the error and the URL the error is throwing, the Arcgis Map (@Anonymous User/core) is trying to get the copied assets from the folder /public/main/assets and not for the /public/assets where it should always find them. And that's because the map was located inside the route /main/map.
 
 
I really appreciate your support,
 
0 Kudos
1 Solution

Accepted Solutions
ReneRubalcava
Frequent Contributor

You need to configure the assetsPath of the API, so it can properly locate them in this situation.

Something like this.

config.assetsPath = "/assets"; // look at the root of the domain.

 

The angular demo does this for its routing feature.

 

View solution in original post

2 Replies
ReneRubalcava
Frequent Contributor

You need to configure the assetsPath of the API, so it can properly locate them in this situation.

Something like this.

config.assetsPath = "/assets"; // look at the root of the domain.

 

The angular demo does this for its routing feature.

 

View solution in original post

supegui
New Contributor

@ReneRubalcava Thank you so much, I really appreciate your support, It works now!  🙌

0 Kudos