nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

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!

タグ付けされた投稿をもっと見る

Components

Accepted answers

KittyHurley

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

All comments

albert_ssp

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

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

sccwrp

I see, thank you!

KittyHurley

@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

@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

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

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:

会話に参加する

サインインしたメンバーは投稿、更新のフォローなどができます。初めてですか？無料アカウントを登録してください。

クイックリンク

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.