vue-tsc behaving incorrectly on bun vs with node

[graphiteisaac]

What version of Bun is running?

1.0.0+822a00c4d508b54f650933a73ca5f4a3af9a7983

What platform is your computer?

Linux 5.15.90.1-microsoft-standard-WSL2 x86_64 x86_64

What steps can reproduce the bug?

The most dead-simple way of reproducing this is to create a vue typescript vite project and build it:

bunx create-vite

# Select "Vue" for framework and "Typescript" for variant
bun install

bunx --bun vue-tsc

The output should display this (or similar):

As you can see in the image, node has no problem running this. I've dug into the vue-tsc source (albeit briefly) and cannot find what might be causing this.

What is the expected behavior?

Blank output.

What do you see instead?

src/main.ts:3:17 - error TS2307: Cannot find module './App.vue' or its corresponding type declarations.

3 import App from './App.vue'
                  ~~~~~~~~~~~


Found 1 error in src/main.ts:3```

### Additional information

This blocks Vite projects using Vue from typechecking, and thus blocks the default build script from running, meaning this is a partial roadblocker for Vite users

[Evengard]

Can confirm, having same symptoms with my Vue app.

[patfr]

I also have this issue. Using Bun 1.0.1 i believe

[patrickelectric]

Same problem

[devajakamerus]

Not sure why but you can fix this by adding .d.ts file in project src

//vue-shim.d.ts declare module "*.vue" { import type { DefineComponent } from "vue"; const component: DefineComponent<{}, {}, any>; export default component; }

[neoighodaro]

Thought I was the only one experiencing this. Good to know I am not

Not sure why but you can fix this by adding .d.ts file in project src

//vue-shim.d.ts declare module "*.vue" { import type { DefineComponent } from "vue"; const component: DefineComponent<{}, {}, any>; export default component; }

This did not work for my case, already had the shim

[martwz]

Same problem

[jayakornk]

It works on my Macbook Pro M2 (running bun v1.0.14) but having the same issue inside docker container (oven/bun:1.0.14).

[taisph]

It works on my Macbook Pro M2 (running bun v1.0.14) but having the same issue inside docker container (oven/bun:1.0.14).

Same here. I think it works locally because vue-tsc is not actually running under bunx. As soon as I add bunx --bun in front of vue-tsc in package.json, it fails locally the same way it fails in docker.

[Jnp95]

Same problem. Whereas it works with Node.js.

FYI, as it's difficult to know the responsible between bun and vue-tsc (or vite ?), let's add a cross-reference: https://github.com/vuejs/language-tools/issues/4082

[Jnp95]

Not sure why but you can fix this by adding .d.ts file in project src

//vue-shim.d.ts declare module "*.vue" { import type { DefineComponent } from "vue"; const component: DefineComponent<{}, {}, any>; export default component; }

By doing this, you will just disactivate type checking in your *.vue files...

[rukshn]

Not sure why but you can fix this by adding .d.ts file in project src //vue-shim.d.ts declare module "*.vue" { import type { DefineComponent } from "vue"; const component: DefineComponent<{}, {}, any>; export default component; }

By doing this, you will just disactivate type checking in your *.vue files...

I was having similar issues with Docker with bun image, and this solution worked for me,

But unlike adding this file to development environment, it would be created by the dockerfile before running bun run build so the file won't effect my type checking in editor

[Jnp95]

@rukshn

Not sure why but you can fix this by adding .d.ts file in project src //vue-shim.d.ts declare module "*.vue" { import type { DefineComponent } from "vue"; const component: DefineComponent<{}, {}, any>; export default component; }

I was having similar issues with Docker with bun image, and this solution worked for me,

Are you very sure that by adding this kind of mock, type errors are effectively detected via bun run type-check CLI?

Because an issue has been detected here in vue-tsc and it clearly appears that vue-tsc can NOT work in a bun env, because it requires to modify Node fs module, that is not allowed in Bun! https://github.com/vuejs/language-tools/issues/4082#issuecomment-2010875135

[Jarred-Sumner]

requires to modify Node fs module, that is not allowed in Bun!

Modifying fs is allowed in Bun

This code:

var orig = require("fs").readFileSync;
require("fs").readFileSync = function () {
  console.log("i have modified fs.readFileSync and now it returns 42");
  return 42;
};

console.log(require("fs").readFileSync("a.cjs"));

Outputs this:

Most likely the linked issue means that overriding readFileSync as a way to hook into module loading. We do not support that currently.

We do support two alternative approaches though:

• require can be overriden and we have code in place to fully support that
• We have pretty good support for Loaders that work for both ESM and CJS (unlike overriding require)

[beejaz]

Not sure why but you can fix this by adding .d.ts file in project src

//vue-shim.d.ts declare module "*.vue" { import type { DefineComponent } from "vue"; const component: DefineComponent<{}, {}, any>; export default component; }

For my purpose, building in a bun docker image for production deploy, I added as a temporarily solution bun run build:skipts:

  "scripts": {
    "dev": "vite",
    "build": "vue-tsc && vite build",
    "build:skipts": "vite build",
    "preview": "vite preview"
  },

I just tell it to run that when im going for prod after manually checking local bun run build