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

[sccwrp]

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!

[LefterisKoumis]

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:

[KittyHurley]

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

[sccwrp]

@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

[KittyHurley · Accepted solution]

@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");

[sccwrp]

I see, thank you!

[DavidWilton]

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);

[albert_ssp]

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