---
source_url: https://itmustbecode.com/pcf-controls-tips-tricks-how-to-bundle-and-resolve-static-json-files/
title: PCF Controls Tips & Tricks: How to Bundle and Resolve Static JSON Files
date: 2025-10-19T21:21:41+00:00
categories:
  - blog
tags:
  - json
  - pcf
  - react
word_count: 587
reading_time_minutes: 3
type: posts
---

**JSON files** are one of the most common and convenient ways to store structured data. They’re lightweight, human-readable, and easy to parse in JavaScript. In PCF Control development, they can be used a quick and convenient way to store and access static data.

In this post, I’ll show you how to easily **configure** your PCF control projects to bundle static JSON files and resolve their contents at runtime.

{{< figure src="./image-3.png" alt="" caption="" >}}

## **How it started**

It all started when I began receiving complaints that my open-source [**Country Picker PCF**](https://github.com/drivardxrm/CountryPicker.PCF) control had suddenly stopped working properly. After some investigation, I realized the issue came from its dependency on a free third-party service used to query the country data— **restcountries**.

Unfortunately, the owner recently introduced a [breaking change](https://gitlab.com/restcountries/restcountries/-/issues/265) that completely broke the control.

To make the control more stable and self-contained, I decided to remove the dependency on the external API and instead embed a **static JSON file** containing the list of countries directly into the project. This would ensures the control always loads reliably—no external calls, no surprises.

## **Enable JSON import support**

It is quite straightforward to configure your PCF project to use JSON files. Simply update your `tsconfig.json` file with these 2 parameters :

```
"resolveJsonModule": true,
"allowSyntheticDefaultImports": true
```

`"resolveJsonModule" : true"` allows TypeScript to **import `.json` files as modules**, just like `.ts` or `.tsx` files.

`"allowSyntheticDefaultImports": true` tells TypeScript to allow **default-style imports** even when the module being imported doesn’t actually have a default export.

This is especially useful for **JSON files**, because they aren’t native TypeScript modules and don’t provide explicit export syntax.

With these options enabled, it's now possible to import and consume the content of JSON files like this:

```
import countriesData from './countries_data.json'

export const getAllCountries = ():Country[] => {

    return countriesData as Country[]

}
```

This will :

- Recognize the JSON file as a valid module,
- Automatically infer the correct types from the file content (e.g., arrays, objects),
- Allow you to work with the data just like a regular object.

{{< figure src="./image-1.png" alt="" caption="" >}}

{{< figure src="./image.png" alt="" caption="" >}}


Without these options turned on, you would get a compile-time error when trying to import a JSON file, like:


> `Cannot find module './countries_data.json'. Consider using '--resolveJsonModule' to import module.`

That's all there is! Now, just add the JSON files to your project — unlike CSS or RESX files, there’s no need to reference them in your control manifest. With `resolveJsonModule` enabled, TypeScript will automatically bundle the JSON content with your other project files, making it ready to use at runtime.

## **Take Away**

Using this approach, I was able to overcome the issue with my [**CountryPicker PCF**](https://github.com/drivardxrm/CountryPicker.PCF) and remove the dependency on **restcountries** to make the control more **performant** and **reliable**.


I also recently ported the control to FluentUI V9 ensuring it blends seamlessly with other fields in model-driven app forms. 👉 [Check out the latest release here](https://github.com/drivardxrm/CountryPicker.PCF/releases/latest)


There are several use cases where static JSON data can be particularly useful in PCF projects, such as **storing environment variables**, **reference data**, or **mocking API calls**. Just be careful **not to bloat your project** with unnecessary data, as large JSON files can increase load times

Hope this helps!
{{< linkcard url="https://github.com/drivardxrm/CountryPicker.PCF" title="GitHub - drivardxrm/CountryPicker.PCF: Country Picker PCF" summary="Country Picker PCF. Contribute to drivardxrm/CountryPicker.PCF development by creating an account on GitHub." image="/linkcards/country-picker-pcf-repo.png" domain="github.com" new_tab="true" nofollow="true" >}}
{{< linkcard url="https://restcountries.com/" title="REST Countries - Country data API" summary="REST Countries provides country data through a simple API." domain="restcountries.com" new_tab="true" nofollow="true" >}}
{{< linkcard url="https://gitlab.com/restcountries/restcountries/-/issues/265" title="The \"all\" endpoints will return 400 if no fields are specified (#265) · Issues · restcountries / restcountries · GitLab" summary="The REST Countries issue describing the breaking change to the all endpoints." image="/linkcards/rest-countries-issue.png" domain="gitlab.com" new_tab="true" nofollow="true" >}}
[Photo by RealToughCandy.com](https://www.pexels.com/photo/a-person-holding-a-paper-11035481/)