'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.

[AndyGup]

Hi @JianglinWu,  without a reproducible sample app it's  hard to say what the difference is between Vite and webpack in electron. Maybe take a look at the CSP settings recommended here: https://community.esri.com/t5/arcgis-javascript-maps-sdk-questions/csp-header-setting/m-p/1289472/hi....

You could also ask your Vite-specific question on one of the electron-vite communities: https://github.com/orgs/electron-vite/repositories.

Please see our documentation on creating a minimal reproducible app: https://developers.arcgis.com/javascript/latest/troubleshooting/#minimal-reproducible-application.

[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-support...

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.