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

Error message: Unable to access property 'post' from undefined - Angular 2

Here is the snippet of code in my component file: import { Component, Injectable, Inject, OnInit, OnDestroy, EventEmitter, Output } from '@angular/core'; import { Http, Response, Headers, RequestOptions } from '@angular/http'; import & ...

javascriptangulartypescriptangular-http

The absence of typings.json in Typescript is creating an issue

As of now, I am encountering the following error during compilation: typings.json is missing In my existing packages.json, I have included the following dependency: "devDependencies": { "typescript": "^2.6.1", ... } Do you have any suggestion ...

typescriptnpmtypescript-typings

Having trouble installing npm package in Angular project

After cloning my project from GitLab, I encountered an issue while trying to install the NPM packages. When I ran npm install, an error popped up: https://i.stack.imgur.com/WNT5s.png Upon checking the log file, I found the following error message: 3060 ...

javascriptangulartypescriptnpmnpm-install

Error found in Nuxt3 application when using locomotive scroll functionality

I'm working on a Nuxt3 project with Locomotive Scroll and GSAP (repository link: https://github.com/cyprianwaclaw/Skandynawia-Przystan). I'm facing an issue where, when I change the page from index to test and then revert back, the page doesn&apo ...

javascripttypescriptvue.jsnuxt.jslocomotive-scroll

The switch statement and corresponding if-else loop consistently produce incorrect results

I'm currently facing an issue where I need to display different icons next to documents based on their file types using Angular framework. However, no matter what file type I set as the fileExtension variable (e.g., txt or jpg), it always defaults to ...

angulartypescriptif-statementswitch-statement

The 'subscribe' property is not available on the type '() => Observable<any>'

File for providing service: import { Observable } from 'rxjs/Rx'; import { Http, Response} from '@angular/http'; import { Injectable } from '@angular/core'; import 'rxjs/add/operator/Map'; @Injectable() export clas ...

angulartypescriptrxjsobservableangular2-services

Searching for a way to access the HTTP request header using ReactJS?

Can anyone assist me in retrieving the request header's cookie? I have searched extensively but haven't found a satisfactory document. Please share with me a reliable solution. ...

reactjstypescriptaxios

What strategies can be employed to improve generic inference skills?

Looking at the scenario provided below, how can we enhance code reusability in a manner similar to foobarA? interface F<T, U extends string> { t: T, f: (u: U) => void } declare const foo: <T, U extends string>(type: U) => F<T, U>; ...

typescript

Accessing an Excel file in TypeScript using the .xlsx format

After extensive research, I managed to find a solution for reading the .xlsx file in a TypeScript environment. Once implemented, I documented the solution along with a question and answer. The file "demo.xlsx" contains UserIds and Code, displayed in the i ...

node.jsexceltypescriptfilexlsx

Mocha has difficulty compiling Typescript code on Windows operating system

In developing my nodejs module, I created several unit tests using Mocha and Chai. While these tests run smoothly on macOS, they encounter compilation issues on Windows, resulting in the following error: D:\projects\antlr4-graps>npm test > ...

node.jstypescriptmocha.js

Repeatedly view the identical file on HTML

I'm currently working with the following HTML code: <input type="file" style="display: none" #file(change)="processImage($event)" /> <button type="button" class="btn" (click)="file.click()" Browse </button> When I select image1 fr ...

htmlangulartypescript

Is there a way to adjust the starting and ending points of a bezier curve in D3 by utilizing the link generator?

I'm currently working on developing a horizontal hierarchical tree Power BI custom visual using TypeScript and D3. I am utilizing d3's treeLayout for this purpose, and my task is to create a link generator that can plot bezier, step, and diagonal ...

typescriptd3.jspowerbi-custom-visuals

Divide a given number of elements within an array of arrays

Presented below is an array: [ { "id": "34285952", "labs": [ { "id": "13399-17", "location": "Gambia", "edge": ["5062-4058-8562-294 ...

javascriptarraystypescript

Converting <reference path/> directive to ESM import: A step-by-step guide

As I embark on developing a TypeScript application, I've reached the realization that I am not a fan of using the <reference path /> triple-slash directive. Instead, I prefer utilizing import 'something'. However, every time I attempt ...

typescriptimportes6-modules

Cannot assign an array of Typescript type Never[] to an array of objects

Creating an object array can sometimes lead to errors, let's take a look at an example: objectExample[a].push({ id: john, detail: true }); objectExample[a].push({ id: james, detail: false}); const objectExample = { a = [ { id: john, detail: true} ...

typescript

I am having trouble locating my source code within the Typescript module

My issue lies with a file called Server.js, which holds the code for export class Program and includes <reference path='mscorlib.ts'/>. However, when I compile it using the command: tsc -t ES5 Server.ts --module commonjs --out Server.js T ...

node.jstypescript

What is the method to retrieve the data type of the initial element within an array?

Within my array, there are different types of items: const x = ['y', 2, true]; I am trying to determine the type of the first element (which is a string in this case because 'y' is a string). I experimented with 3 approaches: I rec ...

typescript

Why is passing data:{} to a route essential for achieving the desired outcome?

Check out the Angular Material Documentation Site passing {} to the Homepage route: {path: '', component: HomePage, pathMatch: 'full', data: {}} I'm interested in knowing the significance of data: {}. Recent Discovery Closer ex ...

javascriptangulartypescriptangular-material

A TypeScript interface or class

Just had a lively discussion with a coworker and wanted to get some clarification. When shaping an object in TS, should we use a class or an interface? If I need to ensure that a function returns an object of a specific type, which one is the best choice? ...

classtypescriptinterface

Having trouble reloading a seekbar (input range) in Angular 7 with a function?

I am currently in the process of developing a music player using Angular 7, and below is the HTML code for my component: <div class="track-controller"> <small>{{musicPlayerService.getCurrentTime()}}</small> <div class="progress- ...

htmlangulartypescript