having trouble bringing in JSON data into TypeScript

I have a JSON file structured like this 

{
    "type": "service_account",
    "project_id": "blele",
    "private_key_id": "9c0a8fe58c6a35a1640677b7dbf5b",
    "private_key": "-----BEGIN PRIVATE KEY-----\nMIIEvQIBADANBgkqhkiG9w0BAQEFAASCBKcwggSjAgEAAoIBAQCQAsmXWkbeNsLn\nktPmTGONatPlZevmvSDO0IIMymUuRHPOuTQRm6k6WkYB1BB5gulGOsOc10hGrscK\nJtxj/G+eZguTvybosKdwVbm5sZ1jCUlS/TdmAVtJVWGf1YT/nxS1RuT+d7obFGN3\nNhMzQ2sm6JwmPIfF7kcfcU9Cjgjj5mDMa7OO2PQ4/gkKi+8/HhMge/4Wde\nd+/htb6ZA6BdHFSoevHHgTkkygJF47oDeirSN5VDDc1FYqSSZnCZ45uRik3RsAcw\ndInRhknSKdcbqyug9FQgM6l9T8a0sMpwgVcAjq3WaJaUgO1Wd9nfMhoItZvc6cIc\nbbBl3FxRAgMBAAECggEACK2gNQBGsRBfR0hdE/Y0oWnlJg8tSdM\nWDx6WgZIkhrfBZyvGndsUb5YS9MASLwfA+pYFRFg84lgMLjP4i1FBcSwsrM0kgN8\n/uqB5Fx4EQj7X0uZXmMKdysMwRXbaebWYJhqW0g4hIl3YW6urIGRoPb3q+n/Muy1\nhmZhaTTi34cDJLZSbywiMxSBSqlHstlLeK7jQTIU3y0lmC4snTiMjjXjDxGHD0em\nLKlMAouZbr/kj9M+iSj+9SQoH7ZR9FD7saoncJuOUZdH7Mwz+TvqS7bbm70P7zRR\nVwpDAeqc6XP8Hv6f2hhD62x5kmopSB0CP0MhZ/JjUQKBgQDCPDdP0MnlCnRf5xV8\n6ZJSWK5QOr894GKhQwbiddVTaNPPKlqqN+HM/r69SAwNYoZ+pAH9Us01vbWaoZIE\n0afNWqRcKAQucF6kU5C3zVpMFlW2bX9wxKZA3WdIyKnND7WiHr6zO+bqNoUckY0N\nUi6pS3m4ZnPSdfVb3ULHgt8eiQKBgQC9zgrwnotEUsyD85IaEDBXEPf3XfjmKN/n\n3WppgzDgC95qQVcgkb6LZcNsKXQqBcmeNP8UDIbhVmylMw18MBM9UjNBK8BztI3Q\n9ESsrYVOFnnxQfUqDSPCraHI4qD4/sKQi/8l/CKx4Al9exnvj1awJssAfQSAJraJ\nEjzGCiOdiQKBgQC/+5bMPFmiGsBGHnk9uvwWinLY+AgY19WFAWQnqEJPrDhW9s0g\nnBWCcnUDT9ghzrWTLPaOdi5BJR8AFRznyHZsYmA8eo0PfZ/+Gl7bXY0X0aespfQl\n+Sk+ydgRt80l05Y7BNqG+/lUnMjbIP5jIUzfpqtL2XA3oMIAp+UeoDt6yQKBgE6f\nKcLwOYoMrjC+VTe8mvmFyuFJqM9WASGfgvO/5x/3aqMi+78+/+noNmH4bej2SsTg\n+QRKKqMNCLQnNmn3UYNLm6LXoc9t2gdIphBMLxL2L3zx+3IIvXl4\ntDD81zZNMkErG9wyyNrgxtgl8RZQcu4mggyrRu/CMh\nAU4EdEzxmT3jtAg28bGUys1ZINw0OY2Tlr4wZzW/iaIIK34VvtsByrNJ1G4nKlnS\n6xIYt5gv7buhMI/E8MBcf5EOThegr0kS/GYTd2H5u/Oj+gE33+V5C9qdk84v2Hn6\n1dUqBNjWjtlbRXjxFv4UAQ4=\n-----END PRIVATE KEY-----\n",
    "client_email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="36505f4453545745531b57525b5f5845525d1b0650555255765453185f575b1851455344405f5553575555594358421855595b">[email protected]</a>",
    "client_id": "10713329946488",
    "auth_uri": "https://accounts.google.com/o/oauth2/auth",
    "token_uri": "https://oauth2.googleapis.com/token",
    "auth_provider_x509_cert_url": "https://www.googleapis.com/oauth2/v1/certs",
    "client_x509_cert_url": "https://www.googleapis.com/robot/v1/metadata/x509/firebase-adminsdk-0fc.gserviceaccount.com"
}

stored in ./.keys/admin.keys.json

I would like to import this file into my index.ts.

When I try the following code

import firebaseKeys from './.keys/admin.keys.json'

I encounter an error (red underline in vscode) saying

Module '"/Users/aia/Desktop/ble-typescript/functions/src/.keys/admin.keys"' can only be default-imported using the 'esModuleInterop' flagts(1259) admin.keys.json(1, 1): This module is declared with using 'export =', and can only be used with a default import when using the 'esModuleInterop' flag.

This is how my tsconfig file is configured: 

{
  "compilerOptions": {
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "module": "commonjs",
    "noImplicitReturns": true,
    "noUnusedLocals": true,
    "outDir": "lib",
    "sourceMap": true,
    "strict": true,
    "target": "es2017",
    "resolveJsonModule": true
  },
  "compileOnSave": true,
  "include": [
    "src"
  ],
  "exclude": ["node_modules"]
}

Since this is my first project, I am seeking guidance on how to effectively use a .json file in TypeScript.

jsontypescript

Answer №1

To enable "esModuleInterop": true, simply insert it under the "compilerOptions" section in your tsconfig.json:

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

For a comprehensive guide on compiler options, visit the official compiler options documentation.

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

Unable to transform JSON array into a string

I am encountering an issue where the server is not responding with the expected data. Instead, I am receiving a token error '<', despite trying various solutions. $(document).ready(function() { $.ajax({ url:"url", dataTyp ...

jqueryajaxjsonarrays

Utilizing the JSON File in Your HTML Webpage: A Comprehensive Guide

I'm currently trying to integrate the following JSON file into my HTML page. <html> <head> <title> testing get</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> ...

javascripthtmljsonajax

How can I configure a mocked dependency in Jest to return a specific value in a function?

I am currently working on simulating a mongoose model to facilitate unit testing for an express controller. To keep things simple, I've removed all unnecessary code and provided below the specific scenario I'm dealing with. Here's the snippe ...

typescriptunit-testingjestjsmocking

Encountering a 500 (Internal Server Error) while attempting to fetch a single document from MongoDB without utilizing the

I am currently developing my first project using the MEAN stack, and I'm facing a challenge with retrieving a single element from MongoDB. The specific page I'm working on is meant to allow users to edit an item from a list displayed on the main ...

node.jstypescriptmongoosemean-stack

Creating a TypeScript type or interface that represents an object with one of many keys or simply a string

I am tasked with creating an interface that can either be a string or an object with one of three specific keys. The function I have takes care of different errors and returns the appropriate message: export const determineError = (error: ServerAlerts): ...

typescripttypestypescript-typings

When using QML, functions like Object.keys, Object.values, and JSON.stringify may return unexpected empty results

I have written a code that exposes a C++ object to QML, and I want to verify the declared properties of the object using native JS methods. However, they are not working as expected. I created a method called FizzBuzzDerived.properties, which functions cor ...

javascriptjsonqtqml

After logging out, Next-auth redirects me straight back to the dashboard

In my NextJS application, I've implemented a credential-based authentication flow along with a dashboard page. To handle cases where an unauthorized user lands on the dashboard route, I've created a custom AccessDenied component. In the getServer ...

javascriptreactjstypescriptnext.jsnext-auth

Testing Angular Components - Creating Mocks for AngularFireStore Collection Fetching

Update I made some progress today, but I've encountered a new error in the same process. Updated question below. I'm here with another query regarding how to simulate a complex call from AngularFireStore. I'm facing an issue while running ...

angulartypescriptunit-testingjasmine

"Update your Chart.js to version 3.7.1 to eliminate the vertical scale displaying values on the left

https://i.sstatic.net/7CzRg.png Is there a way to disable the scale with additional marks from 0 to 45000 as shown in the screenshot? I've attempted various solutions, including updating chartjs to the latest version, but I'm specifically intere ...

javascripttypescriptchart.jsreact-chartjs-2

What is the best method for implementing Datepicker translations in Angular?

I am looking to incorporate the DatePicker component in Angular, enabling users to select a date that can be translated based on their browser's settings. Any suggestions on how to achieve this? <mat-form-field appearance="fill"> ...

javascriptangulartypescript

Chart of commitments and potential outcomes

I am in the early stages of learning about promises and I am struggling to understand how to write code correctly. Here is an overview of what the program should do: Retrieve a list of item types (obtained through a promise) Loop through each item type to ...

typescriptdictionarypromise

Creating object-oriented designs in TypeScript: leveraging subclassing to account for differences in constructors

Working with ES6 classes and TypeScript to create a user interface, I have a base class named Control. I am looking for a way to create a Button, which is essentially an instance of Control with predefined properties. To achieve this, I have used Button as ...

typescriptecmascript-6

Transferring large amounts of data to Parse.com in bulk

I am facing a challenge with importing approximately 10GB of data into Parse. The data is currently in JSON format, which makes it suitable for using the Parse importer tool. The issue I am encountering is that these objects do not have unique identifiers ...

jsonimportparse-platformdataset

Tips for applying custom gradient colors and styles to React Native's LinearGradient component

"react-native-linear-gradient" - tips on passing colors and styles as props interface Props { // gradientColors:string[] gradientColors:Array<string> } const BaseButton: React.FC<Props> = ({ gradientStyle ,gradientColors} ...

javascriptreactjstypescriptreact-nativetypeerror

What are efficient techniques for filtering and iterating over an array in PHP?

Is there a way for me to extract the network plans along with their prices from this specific GET API? Can someone provide assistance? I am looking to specifically extract the AIRTEL DATA PLAN [dataPlan, duration,type, status, and Price for basic_user] in ...

phparraysjsonloops

Getting access to UBER's authorize API is a straightforward process that involves following a few steps to retrieve

I have been attempting to retrieve the code from JSON using a specific URL in Postman, unfortunately, I have not been successful in obtaining the code in JSON format. Click here for Uber login Furthermore, when I access this URL in my browser, I am redir ...

jsonrestapioauth-2.0uber-api

Executing a function in the view/template with Angular 2+

Whenever a function is called in the view of an Angular component, it seems to be executed repeatedly. A typical example of this scenario can be seen below: nightclub.component.ts import { Component } from '@angular/core'; @Component({ selec ...

javascriptangulartypescriptangular-components

Tips on how to properly handle Promises in a constructor function

My Angular Service is currently making http requests, but I am looking to retrieve headers for these requests from a Promise. The current setup involves converting the promise to an Observable: export class SomeService { constructor(private http: HttpCl ...

javascriptangulartypescript

Enhancing a component with injected props by including type definitions in a higher-order component

Implementing a "higher order component" without types can be achieved as shown below: const Themeable = (mapThemeToProps) => { return (WrappedComponent) => { const themedComponent = (props, { theme: appTheme }) => { return <Wrapped ...

javascriptreactjstypescript

Convert a Java library to JavaScript using JSweet and integrate it into an Angular project

Just recently, I embarked on my journey to learn TypeScript. To challenge my newfound knowledge, I was tasked with transpiling a Java library using JSweet in order to integrate it into an Angular project. This specific Java library is self-contained, consi ...

angulartypescriptjsweet