Tips for troubleshooting the error message: "The relative import path "$fresh/dev.ts" is not prefaced with / or ./ or ../"

My editor is showing a TypeScript error for a Deno module I am working on.

The import path "$fresh/dev.ts" should be prefixed with / or ./ or ../

I have an import_map.json file set up with the following content.

{
  "imports": {
    "$fresh/": "https://deno.land/x/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a3c5d1c6d0cbe3928d928d91">[email protected]</a>/",
    "preact": "https://esm.sh/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7a0a081f1b190e3a4b4a544b4b544a">[email protected]</a>",
    "preact/": "https://esm.sh/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d6a6a4b3b7b5a296e7e6f8e7e7f8e6">[email protected]</a>/",
    "preact-render-to-string": "https://esm.sh/*<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="176765727674633a6572797372653a63783a6463657e7970572239253923">[email protected]</a>",
    "@preact/signals": "https://esm.sh/*@preact/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="addec4cac3ccc1deed9c839d839e">[email protected]</a>",
    "@preact/signals-core": "https://esm.sh/*@preact/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="13607a747d727f603e707c617653223d233d22">[email protected]</a>",
    "twind": "https://esm.sh/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f18586...

The VSCode TypeScript language server has crashed a couple times, too. It seems to be related to this issue.

This code was generated by the Deno Fresh project template and hasn't been modified. According to the map, TypeScript should accept these imports.

Unless the map is not being recognized properly. There's a possibility that Deno needs an update to align with recent changes in the specification.

What do you think could be causing this error?

It appears that the GitHub issue "Support import maps and bare import specifiers" is still unresolved for TS.

Should I just ignore this error and avoid making changes to these files?

https://i.stack.imgur.com/ddIyo.png

typescriptdeno

Answer №1

Resolved the issue by adjusting a configuration in my project environment:

  "deno.importMap": "./import_map.json"

Answer №2

When altering the source directory, it's important to consider a few key factors:

  • Make sure the path does not include any spaces or non-ASCII characters (denoland/deploy_feedback issue)
  • The import map must reside in the source directory for the runtime to function correctly, and at the root level for the LSP to work properly (denoland/fresh issue)

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

Repeated calls to Angular's <img [src]="getImg()"> frequently occur

Can someone help me figure out what's going on here? Recently, I set up a new Angular project and in app.component.html, I have the following code: <img [src]="getDemoImg()"> In app.component.ts: getDemoImg(){ console.log('why so m ...

javascriptangulartypescript

When evaluating objects or arrays of objects to determine modifications

How can we detect changes in table data when users add input to cells? For example, if a user clicks on a cell and adds an input, the function should return TRUE to indicate that there are changes. If the user just clicks on the cell without making any ch ...

javascriptarraysangulartypescriptobject

WebStorm is not auto-completing the Emotion Styled Components

While using @emotion/styled in WebStorm, I have noticed that there is no Intellisense for autocomplete within my style object. However, Typescript does seem to be checking to some extent: const StepTimer = styled.button({ borderRadius: 50, height: &ap ...

typescriptwebstormemotion

Develop a PDF generator in ReactJS that allows users to specify the desired file name

Is there a way to customize the file name of a generated PDF using "@react-pdf/renderer": "^2.3.0"? Currently, when I download a PDF using the toolbar, it saves with a UID as the file name (e.g., "f983dad0-eb2c-480b-b3e9-574d71ab1 ...

javascriptreactjstypescriptpdfreact-pdf

Guide to specifying an explicit return type annotation for a recursive closure with JSDoc

In a project that utilizes vanilla JavaScript and type checking with tsc through JSDoc annotations, I have encountered a challenging use case. There is a function that returns another function, which may recursively call itself while also reassigning certa ...

typescriptrecursionclosuresjsdoc

Issue with Angular 18 component not being displayed or identified

Recently, I began building an Angular 18 application and encountered an issue with adding my first component as a standalone. It appears that the app is not recognizing my component properly, as it does not display when added as an HTML tag in my app.compo ...

javascriptangulartypescriptangular-componentsangular18

Steps for importing jQuery typings into TypeScript:1. First, install the jQuery

I've searched for similar questions, but haven't found one that matches my issue. Can someone help me figure out what to do next? In my Visual Studio project, I used package.json to download jquery typings into the node_modules folder: { "ver ...

javascriptjquerytypescripttypescript-typings

In Typescript, inheritance of classes with differing constructor signatures is not permitted

While working on implementing a commandBus, I encountered an issue when trying to register command types with command handlers for mapping incoming commands. My approach was to use register(handler : typeof Handler, command : typeof Command), but it result ...

inheritancestaticcompiler-errorstypescript

In a scenario where a specific element is disabled, how can I link its value to another related element?

Setting: Ionic version: 6.20.1 Angular CLI version: 10.0.8 In the process of developing a mobile expense management application, I am working on implementing a feature that calculates the recommended spending for different categories (e.g., home expense ...

androidangulartypescriptfirebaseionic-framework

Is there a way to seamlessly transfer (optional) parameters from a CloudFormation template to a CDK resource within a CfnInclude without statically defining the list of parameters?

Trying to grasp these syntax rules, unsure if it's possible. We have numerous CloudFormation templates that we want to deploy using CDK by constructing them with CfnInclude. The issue is that CfnInclude always needs an explicit parameters argument if ...

typescriptaws-cloudformationaws-cdk

Is there a way to access the final child element within a mat-accordion component using Material-UI and Angular 8?

I have a mat-accordion element with multiple expansion panels that are generated dynamically. How can I programmatically select and expand the last mat-expansion-panel element? <mat-accordion> <mat-expansion-panel> text 0 </mat-ex ...

typescriptmaterial-uiangular8

How do I retrieve the data returned from the component.ts file in Angular Material's MatTableModule when it is not directly inside the mat-table in the template?

I'm currently working on an Angular 5 project where I have integrated a table to display data using MatTableModule from angular material. This specific inquiry consists of two parts. Within my project, there is a service that sends a GET request to t ...

angulartypescriptangular-material2

Angular 2 and .NET Core 2.0 triggering an endless loop upon page refresh detection

My application, built with dotnet core 2.0 and angular 2, allows me to view member details. The process begins with a list page displaying all the members from a SQL Server database. Each member on the list has a link that leads to an individual details pa ...

angulartypescript.net-core

Error encountered in app.module.ts file of Angular 2 application

My friends and I are working on a big school project, creating a cool web app. Suddenly, I encountered some errors in my app.module.ts file that I haven't seen before. It's strange because they are showing up out of nowhere! The error: Error:( ...

angulartypescript

Before accessing the page, please ensure to make a double request

Encountered a weird issue, While inspecting the network tab in Chrome devtools, I noticed that my Vue app is making double requests to the same endpoint :/ Here's a snippet of my code: In the router section, I have a beforeEach function. When I navig ...

javascripttypescriptvue.jsvuex

Issues with executing code within the react package for Yahoo Finance 2

I am currently in the process of developing a React application using Vite. The purpose of my app is to retrieve stock-related information from Yahoo using the yahoo-finance2 package. Interestingly, when I run the code as a standalone JavaScript file, eve ...

reactjsnode.jstypescriptyahoo-finance

TypeORM does not have the capability to effectively remove a row when there is a ManyToOne or

I'm currently grappling with a problem that has me stumped. I've spent countless hours trying to find a solution, but to no avail. I'm using MS-SQL on Azure. The structure of my entities is as follows: Customer and Visits: OneToMany (Prima ...

sqlsql-servertypescriptormtypeorm

Entering key-value pairs into a dictionary to show correlation

I've been struggling to find a solution for what seems like a simple issue. The problem lies in typing a dictionary with values of different types so that TypeScript can infer the type based on the key. Here is the scenario: type Id = string; inter ...

typescripttypescript-generics

When utilizing the useRef hook in Material-UI, an error may arise stating: "The property 'value' is not found on the type 'never'."

Currently, I am utilizing material UI to construct a login and registration page. In the process, I am leveraging the useRef hook to retrieve a reference instance for a TextFiled, and using xxxRef.current.value to access the input value. Despite being abl ...

reactjstypescriptecmascript-6material-uireact-hooks

The package and package-lock files are out of sync when executing npm ci

Currently facing an issue while attempting to deploy my application on Heroku. The problem arose when trying to run the frontend, specifically with: `npm ci` can only install packages when your package.json and package-lock.json or npm-shrinkwrap.json are ...

node.jstypescriptnpm