topic Re: Using calcite with React: "could not fetch component message bundle" in Calcite Design System Questions

Using calcite with React: "could not fetch component message bundle"

sccwrp — Tue, 18 Apr 2023 21:46:33 GMT

Hi there,

I'm running into trouble using a lot of the components with React. Imports all work fine, but when I try to use some components (for instance, CalciteButton) in my app, I receive an error message that says:

Error: could not fetch component message bundle

I've cloned the example React repo from GitHub and all components work fine, but I can't figure out what I'm doing wrong.

Thanks!

Re: Using calcite with React: "could not fetch component message bundle"

LefterisKoumis — Tue, 18 Apr 2023 22:03:42 GMT

Without seeing your code, I don't know what you already have.

Is your import like this?

import "@esri/calcite-components/dist/components/calcite-button"; import "@esri/calcite-components/dist/calcite/calcite.css";

and your file structure like this:

Re: Using calcite with React: "could not fetch component message bundle"

KittyHurley — Tue, 18 Apr 2023 21:57:21 GMT

@sccwrp Would you be able to put together an example with CodeSandbox?

There are a few gotchas related to React, documented on the Framework integration page, if its a helpful resource for getting started with Calcite and React.

Re: Using calcite with React: "could not fetch component message bundle"

sccwrp — Wed, 19 Apr 2023 21:21:36 GMT

@KittyHurley @LefterisKoumis

Here is a CodeSandbox of a barebones react-redux app attempting to use calcite components

It's getting that same "could not fetch component message bundle" error

Re: Using calcite with React: "could not fetch component message bundle"

KittyHurley — Fri, 21 Apr 2023 15:57:01 GMT

@sccwrp It looks like the index.js's setAssetPath isn't set for the distribution build.

An updated CodeSandbox and example set on CDN, but local hosted assets could also be used:

setAssetPath("https://js.arcgis.com/calcite-components/1.2.0/assets");

Re: Using calcite with React: "could not fetch component message bundle"

sccwrp — Mon, 24 Apr 2023 20:34:29 GMT

I see, thank you!

Re: Using calcite with React: "could not fetch component message bundle"

DavidWilton — Fri, 04 Aug 2023 02:24:39 GMT

I was getting this issue with angular. Just in case anyone else gets it I will post my solution as this is the first google hit. The cause is if you are using routing you need to set the path without the route

import { setAssetPath } from '@esri/calcite-components/dist/components';

setAssetPath(window.location.origin);

Re: Using calcite with React: "could not fetch component message bundle"

albert_ssp — Wed, 21 Feb 2024 19:34:00 GMT

Where are you placing these lines? In the router module?