Error in Astro Build: Markdown integration with Typescript has encountered a problem

Encountering an error while trying to build my Astro Project using npm run build, or when navigating to one of my markdown pages after running: npm run dev. The error message is as follows:

> <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="80e1f3f4f2efade2ecefe7adf4e5edf0ece1f4e5c0b0aeb0aeb1">[email protected]</a> build
> astro build

17:42:55 [build] output target: static   
17:42:55 [build] Collecting build info...
17:42:55 [build] Completed in 47ms.
17:42:55 [build] Building static entrypoints...
[vite:esbuild] failed to resolve "extends":"astro/tsconfigs/strict" in C:\Users\felix\documents\programmieren\hhh\tsconfig.json
file: C:/Users/felix/documents/programmieren/hhh/src/utils/getPostData.ts
 error   failed to resolve "extends":"astro/tsconfigs/strict" in C:\Users\felix\documents\programmieren\hhh\tsconfig.json
  File:
    C:/Users/felix/documents/programmieren/hhh/src/utils/getPostData.ts
  Stacktrace:
    at resolveExtends (file:///C:/Users/felix/Documents/Programmieren/hhh/node_modules/astro/node_modules/vite/dist/node/chunks/dep-5cb728cb.js:13162:9)    
    at parseExtends (file:///C:/Users/felix/Documents/Programmieren/hhh/node_modules/astro/node_modules/vite/dist/node/chunks/dep-5cb728cb.js:13135:34)     
    at parse$g (file:///C:/Users/felix/Documents/Programmieren/hhh/node_modules/astro/node_modules/vite/dist/node/chunks/dep-5cb728cb.js:13086:24)
js:13557:24)
    at async transformWithEsbuild (file:///C:/Users/felix/Documents/Programmieren/hhh/node_modules/astro/node_modules/vite/dist/node/chunks/dep-5cb728cb.js:13280:36)
    at async Object.transform (file:///C:/Users/felix/Documents/Programmieren/hhh/node_modules/astro/node_modules/vite/dist/node/chunks/dep-5cb728cb.js:13379:32)
    at async transform (file:///C:/Users/felix/Documents/Programmieren/hhh/node_modules/rollup/dist/es/shared/rollup.js:21911:16)
    at async ModuleLoader.addModuleSource (file:///C:/Users/felix/Documents/Programmieren/hhh/node_modules/rollup/dist/es/shared/rollup.js:22136:30)

The issue seems to be related to the tsconfig.json file, prompting me to switch it from:

{
  "compilerOptions": {
    // Enable top-level await, and other modern ESM features.
    "target": "ESNext",
    "module": "ESNext",
    // Enable node-style module resolution, for things like npm package imports.
    "moduleResolution": "node",
    // Enable JSON imports.
    "resolveJsonModule": true,
    // Enable stricter transpilation for better output.
    "isolatedModules": true,
    // Astro will directly run your TypeScript code, no transpilation needed.
    "noEmit": true
  },
  "extends": "astro/tsconfigs/strict"
}

To:

{
  "extends": "astro/tsconfigs/strict",
  "include": ["**/*.ts", "**/*.tsx", "**/*.jsx"],
  "exclude": ["node_modules", "studio"],
  "compilerOptions": {
    "types": ["astro/client"],
    "target": "ESNext",
    "module": "ESNext",
    // Enable node-style module resolution, for things like npm package imports.
    "moduleResolution": "node",
    // Enable JSON imports.
    "resolveJsonModule": true,
    // Enable stricter transpilation for better output.
    "isolatedModules": true,
    // Astro will directly run your TypeScript code, no transpilation needed.
    "noEmit": true,
    "baseUrl": "/",
    "paths": {
      "@components/*": ["src/components/*"],
      "@layouts/*": ["src/layouts/*"]
    }
  }
}

After making this change, running npm run dev seemed to partially fix the problem, but the error persisted with npm run build. As I am relatively new to TypeScript, a detailed explanation would be greatly appreciated. The project's source code can be found on GitHub. How can I troubleshoot and resolve this error?

typescriptbuildconfigastrojs

Answer №1

After encountering an issue with the 

"extends": "astro/tsconfigs/strict"
in my code, I realized the resource could not be located. To resolve this, I took matters into my own hands by directly replacing the existing tsconfig.json file with the correct one it was supposed to extend. I manually added any properties that were missing. For more information on how their tsbuild.json files function, you can visit their typescript documentation page. The necessary files were available on their GitHub repository.

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

Ionic 2: Issue with Custom Provider Resulting in "Unable to Resolve All Parameters"

I have created a test provider and I am attempting to inject it into two pages for the purpose of sharing data and methods. However, when I add the provider to the page constructor, an error is thrown, stating "Can't resolve all parameters for Charact ...

angulartypescriptionic2

How can we leverage RxJS combineLatest for observable filtering?

I'm exploring the possibility of utilizing combineLatest in an Angular service to eliminate the need for the activeFiler$ switch block (The service should achieve the same functionality). Currently, this is the structure of the component design (stack ...

angulartypescriptrxjsstackblitz

Error in unit testing: Trying to access property 'pipe' of an undefined variable results in a TypeError

Recently, I've been faced with the challenge of writing a unit test for one of the functions in my component. The specific function in question is called 'setup', which internally calls another function named 'additionalSetup'. In ...

typescriptunit-testingjestjsobservablengrx

Why is TypeScript resorting to using 'any' for specific prop type definitions in React?

Having some trouble with my props typing: export interface ITouchable { isDisabled?: boolean; margin?: Margin; height?: number; bgColor?: string; } The definition of Margin is as follows: type Margin = | { top?: number; bottom?: nu ...

reactjstypescript

Utilizing ngModel with an uninitialized object

What is the most effective way to populate an empty instance of a class with values? For example, I have a User Class and need to create a new user. In my component, I initialize an empty User Object "user: User;". The constructor sets some properties, w ...

angulartypescript

Unable to locate module: Error: Unable to resolve './types/string' in

I have created a reproduction repository at this link: https://github.com/mspoulsen/zod-error. You can find all my settings there. When I try to compile the project using npx webpack, I encounter errors. The desired outcome is to compile without any erro ...

typescriptwebpack

Troubleshooting Vue 2 TypeScript Components Import Issue in VS Code

Has anyone experienced issues with TS pointing errors when importing custom components into a .vue file using the options api and webpack? The import is successful, everything works after bundling, but I'm still encountering annoying errors in the .vu ...

typescriptwebpackvuejs2vue-options-api

Union types can be used to constrain generic type parameters in Typescript

I'm working on a function uniqueIds(first: any[], second: any[]): number[] { let prop = first[0] instanceof Owner ? "OwnerId" : "BankId"; return _.unique( _.map( first, o => ...

typescripttypescript-generics

Looking for a way to dynamically append a child element within another child

Struggling to include a new child within a specific child in Json myObject:any[] = []; this.myObject = { "type": "object", "properties": { "first_name": { "type": "string" }, "last_name": { "type": "string" }, } } addF ...

javascriptangulartypescript

What is the best method for showing the name of the card?

I have developed a game using Angular that displays images of cards, but I am facing an issue in showing their names on the screen. At times, it displays the same name for all the cards or even incorrect names. In my TypeScript class 'Paquet', I ...

htmlangulartypescript

What steps can be taken to establish an array type that is limited to predefined values?

I am currently working on defining a type for an array that requires specific values to be present in a certain order at the beginning of the array. type SpecificArray = ('hello'|'goodbye'|string)[] // Current const myArray: SpecificAr ...

arraystypescripttypes

Angular: Generating components dynamically in HTML is unsuccessful

I possess the capability to dynamically generate components: import { Component, ComponentFactory, ComponentFactoryResolver, ComponentRef, OnInit, ViewChild, ViewContainerRef } from '@angular/core'; import { FilterComponent } from '../filter ...

htmlcssangulartypescript

Clearing the filename in a file type input field using React

When using this input field, only video files are accepted. If any other types of files are uploaded by enabling the "all files" option, an alert will be displayed. While this functionality is working correctly, a problem arises if a non-video file is adde ...

javascriptreactjstypescriptinput

Tips on Configuring the Attributes of a TypeScript Object in Angular 2

A TypeScript class called Atom is defined as follows: export class Atom { public text: String; public image: boolean; public equation: boolean; } To create an object of type Atom class and set its properties, the following steps are used: atom: ...

typescript

Typescript KeyboardEvent bug: incorrect initialization of keys

I'm trying to generate a KeyboardEvent in my Typescript code. const arrowLeft = new KeyboardEvent('keydown', { key: 'ArrowLeft' }); console.log(arrowLeft.keyCode, arrowLeft.key, arrowLeft.code); When I check the value of arrowLef ...

angulartypescriptunit-testingkeycode

Dropdown Pattern with React CTA Modal

While using MaterialUI's ButtonGroup for a dropdown menu, I encountered an issue trying to set up a series of CTAs that are easily interchangeable within it. The goal is to have all components reusable and the choices in the dropdown dynamic. const C ...

javascriptreactjstypescriptmaterial-uianti-patterns

Navigating through Angular using Typescript can sometimes lead to uncertainty when working with return data. This is where the

How do you handle a request with uncertain data and type checking? For instance, if you are making an HTTP call to an API where various data can be returned, but your component requires a specific data structure defined by an interface. Here's a sim ...

angulartypescripttypes

Substitute all properties of a specific type with a predetermined value in Typescript using recursive substitution

If we consider the given type structure: type Person = { name: string age: number experience: { length: number title: string } } Can we create a type like this: type FieldsOfPerson = { name: true age: true experience: { length: t ...

typescript

Modifying the value upon saving in Adonis JS model

Using Adonis js I am facing an issue when trying to convert an ISO string to Datetime while saving data (the opposite of serializing DateTime fields to ISO string). I cannot find a way to do this in the model, like I would with a mutator in Laravel. Whene ...

typescriptadonis.js

The parameter type `SetStateAction<EventDetails[] | undefined>` does not allow for assigning arguments

I am currently facing an issue in a ReactJS project where I am trying to update state that was initially set up like this: const [eventsData, setEventsData] = useState<EventDetails[]>(); Every time I try to update the state using setEventsData(obj), ...

reactjstypescriptnext.jstypes