Using typescript, encountering an issue with dynamic import and json file integration

Question

Using typescript, encountering an issue with dynamic import and json file integration

When creating a function to retrieve test data for multiple environments, I encountered an issue:

export class DataHelper {
  public static async getTestData(fileName: string): Promise<any> {
    return await import(`../${fileName}`);
  }
}

Running this code resulted in the following error: Error: Cannot find module '../test-data.json'

await DataHelper.getTestData('test-data.json')

However, the following calls were successful:

await DataHelper.getTestData('TestScript')

And also:

await import('../test-data.json')

This is the content of my tsconfig.json file:

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "declaration": true,
    "sourceMap": true,
    "outDir": "./lib",
    "moduleResolution": "node",
    "baseUrl": ".",
    "esModuleInterop": true,
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "resolveJsonModule": true
  },
  "include": ["src", "example/**/*"],
  "exclude": ["node_modules", "**/__tests__/*"]
}

I am seeking clarification on what is causing this issue and what corrective actions should be taken. Any insights would be greatly appreciated.

typescript

Answer 1

Answer №1

To dynamically import JSON files in TypeScript, you need to utilize import assertions as TypeScript does not natively support importing json files like JavaScript. This can be confusing for many users due to the difference between TypeScript and JavaScript specifications. Here is an example of how import assertions are used, although they are currently not supported on Node.js:

// static import
import data from "./foo.json" assert { type: "json" };

// dynamic import
const { default: data } = await import("./foo.json", { assert: { type: "json" } });

In summary, imports must be asserted because relying solely on file extensions to determine file types poses security risks.

For now, a reliable method to asynchronously retrieve JSON data in Node.js is by reading the text using fs and then utilizing JSON.parse. It may take some time before Node.js supports import assertions on stable versions.

Here's an illustration of this process:

import { readFile } from "fs/promises";

async function readJsonFile(path) {
  const file = await readFile(path, "utf8");
  return JSON.parse(file);
}

readJsonFile("./package.json").then((data) => {
  console.log(data);
});

Answer 2

To dynamically import JSON files in TypeScript, you need to utilize import assertions as TypeScript does not natively support importing json files like JavaScript. This can be confusing for many users due to the difference between TypeScript and JavaScript specifications. Here is an example of how import assertions are used, although they are currently not supported on Node.js:

// static import
import data from "./foo.json" assert { type: "json" };

// dynamic import
const { default: data } = await import("./foo.json", { assert: { type: "json" } });

In summary, imports must be asserted because relying solely on file extensions to determine file types poses security risks.

For now, a reliable method to asynchronously retrieve JSON data in Node.js is by reading the text using fs and then utilizing JSON.parse. It may take some time before Node.js supports import assertions on stable versions.

Here's an illustration of this process:

import { readFile } from "fs/promises";

async function readJsonFile(path) {
  const file = await readFile(path, "utf8");
  return JSON.parse(file);
}

readJsonFile("./package.json").then((data) => {
  console.log(data);
});

Answer 3

Answer №2

The Typescript thread discusses the discontinuation of support for importAttributes "assert" due to a regression from stage 3 to stage 2.

There have been talks about replacing it with "why" for several months now.

Answer 4

The Typescript thread discusses the discontinuation of support for importAttributes "assert" due to a regression from stage 3 to stage 2.

There have been talks about replacing it with "why" for several months now.

Using typescript, encountering an issue with dynamic import and json file integration

Answer №1

Answer №2

Similar questions

Ways to simulate an initialized class within a function without using dependency injection

Defining a property of an object within a Vue Class

When the async keyword is added, the return type in Typescript can vary

When you use array[index] in a Reduce function, the error message "Property 'value' is not defined in type 'A| B| C|D'" might be displayed

What steps can be taken to address the InvalidPipeArgument error when working with dates?

Currently honing my skills in Angular 2, but encountering an error stating "Bindings cannot contain assignments."

TypeORM - Establishing dual Foreign Keys within a single table that point to the identical Primary Key

How to dynamically assign a value in a React datepicker component in a React application

The image map library functions seamlessly with React but encounters issues when integrated with Next.js

What steps can be taken for TypeScript to identify unsafe destructuring situations?

Utilizing *ngIf for Showing Elements Once Data is Completely Loaded

React Component not displaying properly when used inside a map iteration

Troubleshooting the ReferenceError: Blob is not defined problem with the heic2any library in a Next.js application

Which is more efficient: Storing the database as a private member variable in Ionic 3 SQLite or creating a new database for every query

Developing in TypeScript with styled-components allows for seamless integration between

A collection of objects in TypeScript with a reference and the ability to add new objects using the

Tips for ensuring all files are recognized as modules during the transition of an established NodeJS project to TypeScript

How come the useEffect hook is causing re-rendering on every page instead of just the desired endpoint?

What is the reason behind the slight difference between TypeScript's IterableIterator<> and Generator<> generics?

What is the best way to customize a button component's className when importing it into another component?