Unable to resolve module './App.vue'

[hungify]

Check for existing issues

• [X] Completed

Describe the bug / provide steps to reproduce it

Look at the screenshot, it's weird.

It's fine on VS Code.

Repo: https://github.com/hungify/zed-vue-resolve-import

Environment

Zed: v0.124.4 (Zed Preview) OS: macOS 14.3.1 Memory: 16 GiB Architecture: aarch64

If applicable, add mockups / screenshots to help explain present your vision of the feature

No response

If applicable, attach your ~/Library/Logs/Zed/Zed.log file to this issue.

If you only need the most recent lines, you can run the zed: open log command palette action to see the last 1000.

2024-02-24T19:55:09+07:00 [INFO] Opening main db
2024-02-24T19:55:09+07:00 [INFO] set environment variables from shell:/bin/zsh, path:/Users/hungify/.bun/bin:/Users/hungify/Library/Caches/fnm_multishells/94131_1708779309250/bin:/opt/homebrew/bin:/opt/homebrew/sbin:/usr/local/bin:/System/Cryptexes/App/usr/bin:/usr/bin:/bin:/usr/sbin:/sbin:/var/run/com.apple.security.cryptexd/codex.system/bootstrap/usr/local/bin:/var/run/com.apple.security.cryptexd/codex.system/bootstrap/usr/bin:/var/run/com.apple.security.cryptexd/codex.system/bootstrap/usr/appleinternal/bin:/Library/Apple/usr/bin:/Users/hungify/Library/pnpm:/Users/hungify/.bun/bin:/Users/hungify/Library/Caches/fnm_multishells/90712_1708777774351/bin:/opt/homebrew/bin:/opt/homebrew/sbin:/Users/hungify/.cargo/bin:/Users/hungify/.orbstack/bin:/Users/hungify/.orbstack/bin
2024-02-24T19:55:09+07:00 [ERROR] crates/settings/src/settings_file.rs:76: EOF while parsing an object at line 78 column 0
2024-02-24T19:55:09+07:00 [INFO] Opening main db
2024-02-24T19:55:09+07:00 [INFO] build git repository ".git"
2024-02-24T19:55:09+07:00 [INFO] set status on client 0: Authenticating
2024-02-24T19:55:09+07:00 [INFO] set status on client 108379: Connecting
2024-02-24T19:55:09+07:00 [INFO] Opening main db
2024-02-24T19:55:09+07:00 [INFO] Node runtime install_if_needed
2024-02-24T19:55:09+07:00 [INFO] starting language server. binary path: "/Users/hungify/Library/Application Support/Zed/node/node-v18.15.0-darwin-arm64/bin/node", working directory: "/", args: ["/Users/hungify/Library/Application Support/Zed/copilot/copilot-v0.5.0/dist/agent.js", "--stdio"]
2024-02-24T19:55:09+07:00 [INFO] connected to rpc endpoint https://collab.zed.dev/rpc
2024-02-24T19:55:10+07:00 [INFO] Language server with id 0 sent unhandled notification LogMessage:
{
  "level": 0,
  "message": "[DEBUG] [agent] [2024-02-24T12:55:10.088Z] Agent service starting",
  "metadataStr": "[DEBUG] [agent] [2024-02-24T12:55:10.088Z]",
  "extra": [
    "Agent service starting"
  ]
}
2024-02-24T19:55:10+07:00 [INFO] Language server with id 0 sent unhandled notification client/registerCapability:
{
  "registrations": [
    {
      "id": "197063cb-f46f-4b71-a855-7e99c7017d07",
      "method": "workspace/didChangeWorkspaceFolders",
      "registerOptions": {}
    }
  ]
}
2024-02-24T19:55:10+07:00 [INFO] Language server with id 0 sent unhandled notification LogMessage:
{
  "level": 0,
  "message": "[DEBUG] [agent] [2024-02-24T12:55:10.604Z] Telemetry initialized",
  "metadataStr": "[DEBUG] [agent] [2024-02-24T12:55:10.604Z]",
  "extra": [
    "Telemetry initialized"
  ]
}
2024-02-24T19:55:10+07:00 [INFO] add connection to peer
2024-02-24T19:55:10+07:00 [INFO] waiting for server hello
2024-02-24T19:55:10+07:00 [INFO] got server hello
2024-02-24T19:55:10+07:00 [INFO] set status to connected (connection id: ConnectionId { owner_id: 0, id: 0 }, peer id: PeerId { owner_id: 345, id: 266887 })
2024-02-24T19:55:10+07:00 [INFO] set status on client 108379: Connected { peer_id: PeerId { owner_id: 345, id: 266887 }, connection_id: ConnectionId { owner_id: 0, id: 0 } }

[Moshyfawn]

A bit of additional context: this happens when you try to import a .vue file from a .ts file (in this case main.ts).

Inside .ts file	Inside .vue file

P.S. Somewhat unrelated, but note how you can import ./App.vue from within App.vue, which could be considered a bug.

[segovia-no]

Same issue here, it happens when trying to import the App.vue component within a .ts file.

[hungify]

Hey guys!

To fix this error, add a shim file for Vue files.

Create a new file like shims-vue.d.ts in the src folder (same level as main.ts) and add the following code.

declare module '*.vue' {
  import type { DefineComponent } from 'vue'

  const component: DefineComponent<object, object, any>
  export default component
}

Yeah, that's it. This error will be gone.

cc: @Moshyfawn @segovia-no

[d3chapma]

@hungify Problem with this solution is it seems to break Go to Definition. For example, do Go to Definition on App in main.ts and it takes you to the shim file.

[fazulk]

try adding this to your tsconfig.json "plugins": [{ "name": "@vue/typescript-plugin" }],

and installing @vue/typescript-plugin in your dev deps.

You should not need to add the shim.

I think vscode does this automatically but i'm not sure of the details

[vknowles-rv]

Confirmed that @fazulk suggestion worked.

To clarify, install @vue/typescripot-plugin. Npm Example:

npm i -D @vue/typescript-plugin

Add the plugin to your compilerOptions. Example tsconfig.json with only the plugin. Make sure yours is an addition

{
    "compilerOptions": {
        "plugins": [{ "name": "@vue/typescript-plugin" }]
    }
}

Hoping I can daily drive Zed now 🤞

[lvzhenbo]

This should be a problem with the vue plugin, the official vscode plugin for vue is solving the problem of conflicts between the two language servers