VS Code: "Not prefixed with... and not in import map from ..."

[saeho]

Version: Deno 1.14.3

Hello,

I have a VS code issue where import-map configured NPM packages are showing as errors. I saw a few threads like this but none of the threads I read solved my problem (even though the issues were very similar.

Here's an example:

On the Server Deno repo
This will show as an error in VS Code ("not prefixed with / and not in import map from..."):

import { ApolloServer } from '@apollo/server';

This is my deno.json:

"imports": {
    "@apollo/server": "npm:@apollo/server@^4.10.4",
    "graphql": "npm:graphql@^16.8.1"
  }

However, this exact imports map works in my Fresh Deno app repo and VS Code does not complain.

[Luca Casonato]

Is the deno.json at the root of your repo? Do you have a repo I can take a look at?

[saeho]

Yes, deno.json is at the root, and deno.json file works properly as it should. All the imports does the job properly, it's just VS Code that fails.

You can take a look at the repo but it's private. Can I give you private access?

[Luca Casonato]

Sure, can you invite @nayeemrmn and @nathanwhit?

[Nayeem Rahman]

If you're using deno.enablePaths ensure it contains the deno.json.

[Nayeem Rahman]

Also, try running deno upgrade.

[saeho]

Invited both Nathanwhit and Nayeermrmn.

Also tried deno upgrade, it didn't change anything for me.

[Nayeem Rahman]

@saeho I don't see anything wrong with it, it should work. What does the output panel say when you start the language server? Open it by clicking on the Deno part of the status bar at the bottom right.

[saeho]

@saeho I don't see anything wrong with it, it should work. What does the output panel say when you start the language server? Open it by clicking on the Deno part of the status bar at the bottom right.

It says:

Refreshing configuration tree...
  Resolved Deno configuration file: "file:///Users/saeho/Documents/apps/app-server/deno.json"
  Resolved lockfile: "file:///Users/saeho/Documents/apps/app-server/deno.lock"
  Resolved import map from configuration file
  Resolved Deno configuration file: "file:///Users/saeho/Documents/apps/app-web/deno.json"
  Resolved import map from configuration file
Server ready.
Error caching: Relative import path "preact/jsx-runtime" not prefixed with / or ./ or ../ and not in import map from "data:application/typescript;base64,aW1wb3J0ICdwcmVhY3QvanN4LXJ1bnRpbWUnOw=="
    at data:application/typescript;base64,aW1wb3J0ICdwcmVhY3QvanN4LXJ1bnRpbWUnOw==:1:8
    ```

[Nayeem Rahman]

@saeho The project folder you're using there is above the one you gave us access to. What's the path of your project root? Are you using a multiroot workspace? Currently we don't have full support for monorepos with multiple deno.jsons

If your project root is file:///Users/saeho/Documents/apps/, I suggest having a file:///Users/saeho/Documents/apps/deno.json which has all the mappings from both projects.

[saeho]

Path of the project is "file:///Users/saeho/Documents/apps/app-web/" and "file:///Users/saeho/Documents/apps/app-web/deno.json" is the correct path. And there is only 1 deno.json file.

I changed the path name and changed it to "app-web" instead of "name"

[saeho]

@saeho The project folder you're using there is above the one you gave us access to. What's the path of your project root? Are you using a multiroot workspace? Currently we don't have full support for monorepos with multiple deno.jsons

If your project root is file:///Users/saeho/Documents/apps/, I suggest having a file:///Users/saeho/Documents/apps/deno.json which has all the mappings from both projects.

Can you clarify what multiroot workspace is?

I'm using VS Code and i have 2 repos on the side so i can switch between 2 repos without changing VS Code tabs.

But the 2 repos are separate and not connected in any way.

[Nayeem Rahman]

I'm using VS Code and i have 2 repos on the side so i can switch between 2 repos without changing VS Code tabs.

Okay, yeah that's the issue. This is a multi-root workspace and they share a language server. Only the deno.json from your topmost project will be used for both currently. You can temporarily merge your other import map into that one.

[saeho]

Okay, that explains it all then.

Thank you.

A future update for this feature would be greatly appreciated.