Every time you try to import a config.json file in Typescript, it never fails

I have the most recent version of Visual Studio Code installed. Visual Studio Code is currently utilizing TypeScript v3.3.3. I've successfully installed the following packages via npm, both locally (save-dev) and globally:

  1. TestCafe v1.1.0
  2. Core-JS v3.0.
  3. TypeScript v3.4.1

In addition to this, I've set up a tsconfig.json file with the property - "resolveJsonModule: true"

A config.json file has been created as well, which gets picked up correctly in my .ts file after adding the resolveJsonModule property above - 

Import config from './config.json';

However, every time I run my script, I encounter the following error message:

    Error: TypeScript compilation failed.
    /Users/test/Documents/Dev_Node/TestCafe/UK/homepage-fixture.ts (2, 20): 
    Cannot find module './config.json'. Consider using '--resolveJsonModule' 
    to import module with '.json' extension at Function._reportErrors (/Users/test/Documents/Dev_Node/TestCafe/node_modules/testcafe/src/compiler/te st-file/formats/typescript/compiler.js:45:15) at TypeScriptTestFileCompiler._reportErrors [as _precompileCode (/Users/test/Documents/Dev_Node/TestCafe/node_modules/testcafe/src/compiler/test-file/formats/typescript/compiler.js ...

I have already attempted the solutions suggested here: Typescript compiler error when importing json file

Unfortunately, none of those solutions seem to work for me.

typescripttestingautomated-testse2e-testingtestcafe

Answer №1

There has been an ongoing issue discussed here: https://github.com/DevExpress/testcafe/issues/1845 regarding TestCafe's usage of its own TypeScript configuration, rather than honoring any tsconfig.json file you may have.

To address this issue, it appears that you have a few options:

  • You can manually compile the TypeScript code using your own tsconfig.json file that includes the flag resolveJsonModule, and ensure that TestCafe only interacts with the resulting JavaScript code. Utilizing TypeScript's outDir flag could assist in placing the files correctly.
  • Alternatively, you can create an interface (such as MyConfig) to define the structure of your configuration, and import the JSON file using 
    let json: MyConfig = require('./config.json');
    . While not ideal compared to TypeScript handling things automatically, this workaround should help bypass TestCafe's limitations.

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

What are some ways to incorporate advanced/nested type variables when using arrow functions?

Is there a way to use "advanced/nested" type variables, similar to how T is utilized in this function declaration, when working with arrow functions? function wrapInObject<T>(key: string) { return (x: T) => ({ [key]: x }); } I attempted to ach ...

typescript

Asynchronous execution of Angular 2 services

Currently, I am working on a project that utilizes Angular and RxJS. My approach involves creating an injectable class responsible for fetching data from a JSON source as shown below: import {Injectable, Inject} from '@angular/core'; import {Ht ...

typescriptangularrxjs

Ensure Jest returns the accurate file paths for images in a TypeScript and React environment

I'm currently developing a React application and I have come across an issue with importing images. My usual method of importing images is as follows: import image1Src from 'assets/img1.png"; For testing purposes, I need to be able to make ...

reactjstypescriptimageimportjestjs

Changing dates in JavaScript / TypeScript can result in inaccurate dates being displayed after adding days

Recently, I encountered an issue with a simple code snippet that seems to produce inconsistent results. Take a look at the function below: addDays(date: Date, days: number): Date { console.log('adding ' + days + ' days'); con ...

javascriptdatedatetimetimetypescript

Exploring alternative methods for accessing object values in TypeScript using a string object path without relying on the eval function

If we have an object in JS/typescript structured like this: var obj = { a: { b:{ c:1 } } } And a string "b.c" is given, how can we evaluate this using only the variables provided and retrieve the value 1 from the object without rel ...

javascripttypescript

What sets apart Object.assign {} from Object.assign []?

While reviewing code done by a previous developer who is no longer with us, I observed that they sometimes used Object.assign({}, xyz) and other times they used Object.assign([], abc); Could there be a distinction between the two methods? ...

javascripttypescript

A simple way to automatically fill an input field with a mask when clicking in Angular 2

When a user clicks on this span, the following action is triggered: <span data-content="15" #Fast15 (click)="enterFastTime(Fast15)" class="quick-time">15mins</span> Users can also manually input a date in the following input field. If they ...

angulartypescriptmask

On the subsequent iteration of the function, transfer a variable from the end of the function to the beginning within the same

Can a variable that is set at the end of a function be sent back to the same function in order to be used at the beginning of the next run? Function function1 { If(val1.id == 5){ Console.log(val1.id val1.name) } else{} Val1.id = 5 Val1.name = 'nam ...

typescript

The function ValueChange remains uninvoked

Query: The issue is that valueChanges is only triggered for the entire form and not for specific controllers. Although this approach works, it returns the complete object. public ngOnInit(): void { this.form.createWagonBodyForm(); ...

angulartypescriptvaluechangelistener

Whenever I try to import a function, I encounter the error message "no exported member."

I am facing an issue with my node/typescript application where I am attempting to import a function from another file. In order to export it, I utilized exports.coolFunc = coolFunc, and for importing, I used import {coolFunc} from '../controller/coolS ...

javascriptnode.jstypescriptexport

Issue with Parcel / React 18 App.js failing to refresh cache

Currently, I am developing a React application for my school project. However, I have encountered an issue where certain components are not rendering in my App.js file. Strangely, when I place these components as child components of App.js, they do render ...

reactjstypescriptparcel

Declarations of Typescript React for Props for Specific Element

I am trying to specify types for certain elements like <button> or <input>, but I am unable to differentiate between specific element types. Here is an example: interface Props{ component: React.ComponentProps<"button"> | nev ...

reactjstypescripttypes

Displaying nested objects within an object using React

Behold this interesting item: const [object, setObject] = useState ({ item1: "Greetings, World!", item2: "Salutations!", }); I aim to retrieve all the children from it. I have a snippet of code here, but for some reason, i ...

javascriptreactjstypescriptnext.js

Function parameter constrained to a specific property of a generic type T

In my codebase, I have a custom function called uniqBy, which filters out duplicate items based on a specified key: export function uniqBy<T>(array: T[], key: any): T[] { const seen = {}; return array.filter(function (item) { if (item ...

typescriptgeneric-function

Using Rxjs to dynamically map values from an array with forkJoin

Greetings! I have a collection of Boolean observables and would like to apply a logical AND operation. Currently, I am passing static values 'a' and 'b', but I am unsure of the number of elements in the totalKeys array. import { forkJoi ...

javascriptangulartypescriptrxjsjavascript-objects

Create the correct structure for an AWS S3 bucket

My list consists of paths or locations that mirror the contents found in an AWS S3 bucket: const keysS3 = [ 'platform-tests/', 'platform-tests/datasets/', 'platform-tests/datasets/ra ...

javascriptnode.jsjsontypescript

Leveraging the power of Framer Motion in combination with Typescript

While utilizing Framer Motion with TypeScript, I found myself pondering if there is a method to ensure that variants are typesafe for improved autocomplete and reduced mistakes. Additionally, I was exploring the custom prop for handling custom data and des ...

javascriptreactjstypescriptcss-animationsframer-motion

Typescript Angular filters stop functioning properly post minification

I developed an angular filter using TypeScript that was functioning properly until I decided to minify the source code. Below is the original filter: module App.Test { export interface IGroupingFilter extends ng.IFilterService { (name:"group ...

javascriptangularjstypescriptminifyangularjs-filter

Creating dynamic key objects in TypeScript with index signatures: A beginner's guide

How can the code be optimized to automatically initialize a new product type without adding extra lines of code? Failure to initialize the variable results in a syntax error. enum ProductType { PC = 'pc', LAPTOP = 'laptop', TV ...

typescripttypescript-typings

Navigating through a JSON dictionary in Svelte: A step-by-step guide

When working with Svelte, the #each construct allows for easy iteration over array-like objects. But what if you have a JSON dictionary object instead? Is there a way in Svelte to iterate over this type of object in order to populate a dropdown menu? The ...

javascripttypescript