Bringing in a JSON file into a ReactXP project

I'm encountering a strange issue, possibly a bug, with importing a JSON file as an object into my application. I have the following configurations:

"compilerOptions": {
    "resolveJsonModule": true,
    "esModuleInterop": true,
}

While it appears that the JSON is being imported based on the source and debugger, my application claims that the variable is undefined. Could this be related to a caching problem during the build process? I am importing the JSON file like this:

import  * as eventsDB from './events.json';

For debugging purposes, I export it as follows:

export const jsonDB = eventsDB;

EDIT: After carefully reviewing the entire reducer where I import and export the JSON, I realized that everything was omitted in the build, yet somehow present in the Source-Maps. I am currently investigating possible reasons for this discrepancy.

jsontypescriptreactxp

Answer №1

After some investigating, I have pinpointed the issue and found a solution that may be useful to others facing the same problem. In my reducer named events (file name events.ts), I attempted to import the JSON data:

import * as eventsDB from './events.json';

Some of you may have already noticed the error. Despite including the file extension, there was a conflict in names. Within the events reducer, I mistakenly imported:

import events from '../reducers/events';

This resulted in having the actual JSON data under the variable 'events', leading to confusion when trying to access it. Surprisingly, the debugger still displayed the contents correctly despite this mistake.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How can ReactJS and Python share information with each other?

I am currently developing an application that requires data communication between ReactJS and Python. My primary focus right now is on the React part of the communication. Initially, I thought about using JSON for data exchange but found it challenging t ...

pythonjsonreactjs

Following the npm update, encountering errors with webpack

Upgrading the npm package to version 8.2.0 has caused issues in my React application. Here is a screenshot of the problem: https://i.stack.imgur.com/noQIz.png These are the error messages I see in the console: [HMR] Waiting for update signal from WDS.. ...

node.jsreactjstypescriptnpm

LibGDX File not located

I'm having trouble loading a file using LibGDX's internal file loader with the code snippet below: "Gdx.files.internal();" but unfortunately, I encountered this error message: "GdxRuntimeException: File not Found: data\characters\col ...

javajsonfilefile-iolibgdx

What is the best way to utilize jquery's $.ajax function in conjunction with json and php to upload a file?

Can someone assist me with uploading a file using jQuery's $.ajax function? I am not getting any output and I'm unsure if my script is correct. Here is the code: $.ajax({ url:'newsup.php', data: "", type: 'POST', cont ...

phpjqueryajaxjson

What is the best approach for utilizing Inheritance in Models within Angular2 with TypeScript?

Hey there, I am currently dealing with a Model Class Question and a ModelClass TrueFalseQuestion. Here are the fields: question.model.ts export class Question { answerId: number; questionTitle: string; questionDescription: string; } truefals ...

angulartypescript

Creating number inputs in Ionic 2/3 using alerts

I am currently working with Ionic 3.x on my macOS system. The issue I am facing is as follows: I have an array that contains a number and another array consisting of names. table: { number: number, names: string[] } = { number: 0, names: ['& ...

arraystypescriptinputionic2ionic3

As I attempt to log in, the GitHub API is sending back a message stating that authentication

const fetchUser = async () =>{ let usernameValue : any = (document.getElementById('username') as HTMLInputElement).value; let passwordValue : any = (document.getElementById('password') as HTMLInputElement).value; const ...

reactjstypescriptreduxgithub-api

What could be causing the issue with receiving deserialized data in my WebAPI?

I have a straightforward WebAPI application. Here is an excerpt from my controller: [HttpPost] public ActionResult DoSomeWork(string stringParam, DTOObject dto) { // Some work happens here } My console application is calling this method as follows: ...

c#asp.netjsonserialization

CoursesComponent does not contain a Directive annotation

I have been following a tutorial online at this link: https://www.youtube.com/watch?v=_-CD_5YhJTA Unfortunately, I keep encountering the following error message: EXCEPTION: No Directive annotation found on CoursesComponent Here is an excerpt from my a ...

angulartypescript

Combine two JSON objects into a single string by merging their keys

Let's say I have two different objects: First Object: { "Details": { "name": "John", "age": 34 } } Second Object: { "MoreInfo": { "Title": "Mr" } } My goal is to combine these two objects into a single JSON object structured l ...

iosobjective-cjson

Gather the names of all properties from the filtered objects that meet specific criteria

Here is an example of an array: [ { "id": 82, "name": "fromcreate_date", "displayName": "From Create Date", "uiControl": "DATERANGE", }, { "id": 82, "name": "tocreate_date", "displayName": "To Create Date", "uiControl ...

arraysangulartypescriptobjectfilter

Searching through nested JSON data in an Angular application

I have a dynamic menu generated from a JSON object which looks like this: [ { "name":"Menu Item 1", "id":"8", "children":[ { "name":"Sub Menu 1-1", "id":"1", "children":[ ...

angularjsjson

Ensure that JSON requests do not contain line breaks within the <div> element

Storing data in a database using json/jquery/ajax has been successful for me. When I retrieve the data in a textarea, it displays exactly as expected. However, loading the data into a DIV results in the absence of line breaks. I have tried various CSS styl ...

jqueryajaxjsonline-breaks

What causes the NavBar to show and hide within a specific range?

Recently, I encountered a perplexing issue with my navbar. It functions correctly except for one strange behavior that has left me baffled. Why does the menu appear when I adjust the width to 631px, but disappear at 600px? And vice versa – why does it wo ...

htmlcssangulartypescript

I have to create a duplicate for the clipboard containing a dynamic variable in Angular

CSS Note: The Technical.url variable in the specification is constantly changing, and every time I click the button, I want to copy the URL. <div fxLayout="column" fxLayoutAlign="center start" fxFlex="70" class="" ...

angulartypescript

Decide whether to fulfill or deny a Promise at a later time in

When working on an Angular2/TypeScript project, a dialog is shown and the system returns a Promise object to the caller. This Promise will be resolved after the user closes the dialog. The interface of the Promise class does not include methods like resol ...

javascriptangulartypescriptpromise

Using React Material UI in Typescript to enhance the theme with custom properties

Struggling to customize the default interface of material ui Theme by adding a custom background property to palette. Fortunately, I found the solution thanks to this helpful shared by deewens. declare module '@material-ui/core/styles/createPalette& ...

reactjstypescriptdebuggingmaterial-ui

The most efficient and hygienic method for retrieving a value based on an observable

Looking at the structure of my code, I see that there are numerous Observables and ReplaySubjects. When trying to extract a value from one of these observables in the HTML template, what would be the most effective approach? In certain situations, parame ...

javascriptangulartypescript

A guide on iterating through JSON output in AngularJS using PHP arrays

I am a beginner in AngularJs and currently working on creating a website with Angular.js and PHP. I am facing some challenges when it comes to displaying data from a JSON object. My controller $scope.careprovider = function() { $http.post(&apo ...

phparraysjsonangularjs

Managing Data Types in a React and Express Application

I am working on a project that includes both a React client and a Node-Express backend. Currently, my React app is running with TypeScript and I am looking to switch my backend to TypeScript as well. At the moment, my project structure consists of a clien ...

reactjstypescriptexpress