'mapview-invalid-resource' images on map in electron

JianglinWu

import svgIcon from 'pathToSvgIocn.svg';

export const iconRenderer = {
    type: 'unique-value', 
    field: 'iconName',
    defaultSymbol: {
        type: 'simple-marker',
        style: 'square',
        color: '#c0c0c0',
        size: '32px',
    },
    uniqueValueInfos: [
      {
        value: 'Assigned, Inactive',
        symbol: {
            type: 'picture-marker',
            url: svgIcon,
            width: '32px',
            height: '32px',
        },
      },
    ],
    authoringInfo: undefined,
};

const eventFeatureLayer = new FeatureLayerConstructor({
        title: 'Events',
        source: [], 
        renderer: iconRenderer,
        objectIdField: 'objectId', 
        fields: [
            {
                name: 'iconName',
                alias: 'iconName',
                type: 'string',
            },
        ],
        outFields: ['*'],
        geometryType: 'point',
        labelingInfo: iconLabels,
        spatialReference,
        layerId: 999,
        id: '_events',
    });

    return eventFeatureLayer;
};

 

there are other .svg, .png and .gif in 'uniqueValueInfos'

this code works fine on web, I'm able to see all icons on map correctly. 

however, when run the app in electron (tried with latest electron v31 and old electron v22), Im getting 

i also tried inline svg and external svg path when build with vite.  If i build svg as inline data:image/svg+xml, above error shown.  if use external svg, the svg file is hosted on the same sub-domain. e.g. `demo.example.com/images/icon.svg`, then i will get the same error, saying could not fetch requested resource at `/images/icon.svg`

 

for pngs/gifs, i get something similar 

 

this only happens in electron with vite in production mode.

i have another window in the same version electron + same arcgis/core (tried both 4.28 and 4.30), but use webpack, that app works perfectly fine.

same electron version in dev mode also works. So i think there are something related to electron csp block the request, but it doesn't explain why it works fine with webpack bundler. 

current csp I used related to arcgis

default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval' : https://*.arcgis.com https://*.arcgisonline.com; 
img-src 'self' about: data: blob: https://*.arcgis.com https://*.arcgisonline.com;
style-src 'self' 'unsafe-inline' blob: https://*.arcgis.com https://*.arcgisonline.com;

 

thanks in advance for any help.

JianglinWu

Thanks Andy, 

we found the issue is not related to vite or CSP. it's the similar issue like this one https://community.esri.com/t5/arcgis-javascript-maps-sdk-questions/responsetype-image-is-not-supported-in-web-workers/m-p/1018036

 

basically we get the error when `nodeIntegration = true`, turn it off solved the problem. our webpack app works is because we did something like 

if (process.env.ELECTRON_ENV && globalThis?.process?.versions?.v8) {
    const process = globalThis.process;
    const versions = process.versions;
    globalThis.process = ({
        ...process,
        versions: {
            ...versions,
            v8: undefined,
        },
        on: process.on,
        emit: process.emit,
    };
}

so the host-hode check will return false.