The specified module './package.json' could not be located. You may want to try using the '--resolveJsonModule' flag to import a module with a 'json' extension

I'm currently utilizing Vite for my project.

Within my vite.config.ts file, the following code is present:

import { resolve } from "node:path"

import react from "@vitejs/plugin-react"
import { defineConfig } from "vite"
import dts from "vite-plugin-dts"
import tsConfigPaths from "vite-tsconfig-paths"

import pkg from "./package.json"

// Remaining configuration below

The issue arises specifically at

import pkg from "./package.json"

The complete error message reads:

TS2732: Cannot locate module './package.json'. Consider using '--resolveJsonModule' to import module with '.json' extension.

It should be noted that package.json unquestionably exists as a file, and its path is undeniably correct.

Both tsconfig.json and tsconfig.vite.json are configured with these settings:

"resolveJsonModule": true,
"esModuleInterop": true,

This issue persists regardless of restarting the TypeScript service or IDE.

Any suggestions on how to address this?

Answer №1

There isn't a one-size-fits-all solution, but I managed to resolve this issue by employing the vite-plugin-externalize-deps library rather than attempting to directly import package.json. Alternatively, you could consider reading package.json as a file instead of importing it.

Answer №2

Encountered a similar issue with my vite project and was able to solve it by taking the following steps:

  1. Ensured that
    "esModuleInterop": true
    was added to both tsconfig files, just like you did.
  2. Included the problematic .ts files in the tsconfig 'include' setting, as vite projects typically pull files from ./src by default.

Remember to always reload vscode after making changes to the tsconfig file by going to Ctrl+Shift+P -> Reload Window.

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 is the best way to implement promise function in a JavaScript functional method such as forEach or reduce?

I have implemented a promise function in the following way: // WORK let res = {approveList: [], rejectList: [], errorId: rv.errorId, errorDesc: rv.errorDesc}; for (let i = 0; i < rv.copyDetailList.length; i ++) { const item = rv.copyDetailList[i]; ...

Utilizing React Redux and TypeScript to link a component with OwnProps in the ReactRedux template project of .NET Core 2.0

You can find the source code here. After some troubleshooting, I managed to get my code 99% working. However, despite everything running smoothly after compilation, I encountered a warning about the count property being missing when using it in a parent c ...

Improving a lengthy TypeScript function through refactoring

Currently, I have this function that I am refactoring with the goal of making it more concise. For instance, by using a generic function. setSelectedSearchOptions(optionLabel: string) { //this.filterSection.reset(); this.selectedOption = optionLa ...

Converting an array of objects into a unified object and restructuring data types in TypeScript

A few days back, I posted a question regarding the transformation of an array of objects into a single object while preserving their types. Unfortunately, the simplified scenario I provided did not resolve my issue. In my situation, there are two classes: ...

The functionality of SystemJS core_1.provide is not valid

I am attempting to set up ASP.NET MVC 5 (not Core) with Angular 2.0.0 using JSPM, SystemJS, and TS Loader. It seems like there might be an issue with the TS loader in my opinion. Any recommendations? When I try to run the app, I encounter this error: Er ...

The program was expecting an array to start, but instead encountered an object. Any suggestions on how to convert

{ "workingHours": [ { "date":"2023-02-01", "amount":3, "freigegeben":false } ] } Whenever I include this in my re ...

The complete guide on updating your database with Angular Material's reactive form and RESTful API

Allow me to use a well-known book example to illustrate my query. I have created an Angular Material reactive form based on the Book Model in my BookService.ts. However, when I modify certain fields in this form and attempt to submit it to update the corre ...

Issues may arise when attempting to navigate within a lazy module using Angular Nativescript

Recently, I utilized a template called Nativescript-Tabs-Template from this GitHub repository. While attempting to navigate to a sibling component (both within the same lazy module), I encountered the following issue: showItem() { this.routerExtensi ...

Tips for refreshing the modified toggle in angular2

I currently have a newsletter subscription that is initially set based on the newsletter I receive when the user logs in. However, when I toggle the newsletter option, I receive a "successfully updated" message but the newsletter remains set to false even ...

Angular: Navigating to a distinct page based on an API response

In order to determine which page to go to, based on the response from an API endpoint, I need to implement a logic. The current API response includes an integer (id) and a string (name). Example Response: int: id name: string After making the API call, I ...

My React project is unable to locate a file after I modified its extension from .js to .tsx

After using npx create-react-app my-app to start my React project and adding Typescript, I encountered an issue after converting one of my components to a .tsx file. The error message I received was: Module not found: Error: Can't resolve './cont ...

The resolution of Ionic 2 / Angular 2 providers is causing difficulty

Having issues with providers and injections in Ionic 2 since version 2.0.0. Encountering the following error (with various providers, not just this one): Uncaught Error: Can't resolve all parameters for LoginRedirectService: (App, ?, AlertContro ...

Having trouble troubleshooting the node.js "stop" event and process "exit" event

I'm currently troubleshooting the exit and stop events on my Node.js server by referring to various threads online: Close event and Process events I attempted to integrate both solutions, but I am unable to hit a breakpoint when clicking the "Stop ...

I am encountering an issue where my application is not recognizing the angular material/dialog module. What steps can I take to resolve this issue and ensure that it functions properly?

For my Angular application, I am trying to incorporate two Material UI components - MatDialog and MatDialogConfig. However, it seems like there might be an issue with the placement of these modules as all other modules are functioning correctly except fo ...

What is the best way to specify a finite set with precisely 5 elements in TypeScript?

I'm currently working on creating a custom type in TypeScript that represents a finite set using various other types, such as exactly 5 values (note: it's not an enum). For instance: Colors = {RED, BLUE, GREEN, YELLOW, ORANGE} ...

AWS Ionic Error

Struggling to establish a connection between my Ionic mobile app and AWS backend, only to encounter the recurring error message: Cannot find module "../aws-exports" A thorough inspection of the node-modules folder reveals its absence. Uncertain about th ...

Starting value within angular's toSignal()

Experiencing frustration with setting initialValue to true for a signal, encountering the error message (TS2769: No overload matches this call). The Observable does return an Observable. A workaround was found by omitting the "initialValue" option and ad ...

Create two distinct classes featuring varied decorator choices

I need to split a single class definition into two separate classes: one with nullable true, and the other with nullable false. Specifically, I'm trying to create different versions of PlanInput. const createExample = (nullable) => { @InputType ...

Encountering an issue: The type '{ children: Element; }' does not share any properties with type 'IntrinsicAttributes & CookieConsentProviderProps'

I recently updated my packages and now I'm encountering this error. Is there a way to resolve it without reverting back to the previous versions of the packages? I've come across similar errors reported by others, but none of the suggested solut ...

Sparks of brilliance illuminate the syntax of Typescript

I've been experimenting with using Spark in conjunction with TypeScript, and I've run into an issue. When I include multiple lines of code like this: Spark.get("/facture", (req, res) => { chalk.red('Hello test'); chalk.gree ...