What's the deal with TypeScript tsconfig allowing .json imports, but not allowing them in built .js files?

By including the line "resolveJsonModule": true in my project's .tsconfig file, I have successfully implemented direct importing of data from .json files. The project functions properly, even when using nodemon.

However, upon building the project and compiling all files into a "dist" folder, running node dist/index.js results in failure when it encounters the json import. It seems that the actual build command used is:

babel src --out-dir dist --extensions .js,.ts --source-maps

This project is for server-side development and does not involve webpack.

Here is the tsconfig file as requested:

{
  "compilerOptions": {
    "baseUrl": ".",
    "typeRoots": ["./types"],
    "target": "es6",
    "module": "es6",
    "declaration": true,
    "outDir": "dist",
    "strict": true ,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "moduleResolution": "node", 
    "allowSyntheticDefaultImports": true, 
    "esModuleInterop": true,
    "resolveJsonModule": true 
  }
}

Answer №1

Could it be possible that json files are getting compiled as well? You may want to consider excluding them from the compilation process.

{
  "compilerOptions": {...},
  "exclude": [
    "directorywithjsonfiles/*.json"
  ]
}

Answer №2

After importing a config.json file located outside of the src folder along with *.ts files, it's important to ensure that the dist folder structure remains unchanged. I encountered a similar issue and was able to resolve it by moving the .json files into the src folder.

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

Can I create a unique Generic for every Mapped Type in Typescript?

I've got a function that accepts multiple reducers and applies them all to a data structure. For instance, it can normalize the data of two individuals person1 and person2 using this function: normalizeData([person1, person2], { byId: { init ...

Creating a distinct Output type in Typescript to avoid any confusion between Output arguments and Input arguments

Inspired by C#, I am looking to define the following: type FunctionOutput<T> = T; // This is a basic implementation that needs improvement type Result = {result: number}; function myFun(a: number, b: number, c: FunctionOutput<Result>) { c.r ...

Is there a way to convert this JSON object into HTML table code?

I've been working on tweaking a code snippet I came across, but I'm struggling to get it to function the way I desire. Here is the current Javascript code: function JsonUtil() { /** * Given an object, * return its type as a string. ...

What is the process for compressing and storing a schema or processed nested JSON file in S3 using AWS Glue?

What is the best method to obtain a compressed (gzip) nested JSON file with schema, stored in S3 using AWS Glue? I am looking for a way to retrieve the schema of a nested JSON file that is compressed (gzip) and stored in S3 using AWS Glue or any other sim ...

Best practices for applying the Repository pattern within a NestJS application

After reviewing the NestJS documentation and examining their sample source codes, it appears challenging to implement a Repository pattern between the service layer and the database layer (e.g. MongoDB). In NestJS, database operations are executed directl ...

Ways to verify if the current date exists within a TypeScript date array

I am trying to find a way in typescript to check if the current date is included in a given array of dates. However, even after using the code below, it still returns false even when the current date should be present within the array. Can anyone please pr ...

The spread operator seems to be malfunctioning whenever I incorporate tailwindcss into my code

Hi there! I hope you're doing well! I've come across a strange issue in Tailwindcss. When I close the scope of a component and try to use props like ...rest, the className doesn't function as expected. Here's an example: import { Butto ...

The attempt to combine an array of elements with another array using FieldValue.arrayUnion() in Firestore was unsuccessful

My cloud function is triggered when a specific event occurs. Within the function, I receive an array of strings like this example: let h:string[] = ["foo","bar","baz"]. When I attempt to update an array field within my document using names: admin.firestor ...

Identify when the user ceases typing in Angular 2

I am currently working on implementing a feature that detects whether the user is typing or not. I need to determine when the user has stopped typing for at least 3 seconds in order to perform certain actions. I have successfully detected when the user sta ...

Verifying currency in mat-input field

I need help implementing validation for inputting prices on a form. For example, if a user types in $20.0000, I want a validation message to appear marking the input as invalid. Would this type of validation require regex, and if so, how would I go about ...

Having issues with Mysql JSON_EXTRACT when using double quotes in the path

I have defined the following table structure: `CREATE TABLE `TestInfo` ( `Info` json DEFAULT NULL ) ; ` I am inserting two rows with JSON values. INSERT INTO `TestInfo` (`Info`) VALUES ('{ "statusCode": 200, "result": { "summary": { ...

One method for deducing types by analyzing the function's return value within a react prop

There is a component definition that accepts two generics: function AsyncFlatList<ApiResponse, Item>({}: { url: string; transformResponse: (response: ApiResponse) => Item[]; keyExtractor: (item: Item) => string; }) { // the implementati ...

Tips for activating AG Grid Column Auto Sizing on your website

The Issue I am experiencing difficulty in getting columns to expand to the size of their content upon grid rendering. Despite following the guidance provided in the official documentation example, and consulting sources such as Stack Overflow, I have att ...

Automatic JSON update for android using PHP

I am in need of assistance. I am looking to automatically refresh my JSON PHP result every second to an Android app without requiring any buttons or swipe gestures. Below is the code snippet: /** * Created by no name on 12/24/2015. */ public class MainA ...

Implementing TypeScript with styled components using the 'as' prop

I am in the process of developing a design system, and I have created a Button component using React and styled-components. To ensure consistency, I want all my Link components to match the style and receive the same props as the Button. I am leveraging t ...

What is the best way to save data in Elasticsearch without performing any indexing on it?

I have a scenario where I need to store documents in elastic search with 2 columns: id | data --- ----- (int) json string How can I define the mapping in elastic search to only store the json string without any additional processing? It is cr ...

JSON and the Jackson Library

I am struggling with telling Jackson to ignore the JSON name. Here is my question: In my POJO class, I have a field defined as follows: class MyPojo { private String ABCName; } When I try to parse JSON data with "ABCName" : "foo", Jackson throws an e ...

Anticipating a value to be present at line 1, character 0 - Python

Here is the code I'm using to test Jasmine for sending SMS. Whenever I try to send a message through Jasmine, I encounter an error. ...

I'm encountering an issue with my array in JavaScript while using // @ts-check in VS Code. Why am I receiving an error stating that property 'find' does not exist on my array? (typescript 2.7

** update console.log(Array.isArray(primaryNumberFemales)); // true and I export it with: export { primaryNumberFemales, }; ** end update I possess an array (which is indeed a type of object) that is structured in the following manner: const primar ...

What is the best way to organize an Angular library for multiple import paths similar to @angular/material, and what advantages does this approach offer?

When importing different modules from @angular/material, each module is imported from a unique package path, following the format of @organization/library/<module>. For example: import { MatSidenavModule } from '@angular/material/sidenav'; ...