error TS6305: Output file '/app/vite.config.d.ts' has not been built from source file '/app/vite.config.ts'.

[NathanAP]

Hi, I'm trying to run a Docker container with Vite, Vue 3 and Nginx in my homologation server, but I'm getting the following error in my CI/CD:

err: 16.25 error TS6305: Output file '/app/vite.config.d.ts' has not been built from source file '/app/vite.config.ts'.
err: 16.25   The file is in the program because:
err: 16.25     Matched by include pattern 'vite.config.ts' in '/app/tsconfig.json'
err: ------
err: Dockerfile.local:23
err: --------------------
err:   21 |     RUN npm install
err:   22 |     COPY . .
err:   23 | >>> RUN npm run build
err:   24 |     
err:   25 |     FROM nginx:stable-alpine as production-stage
err: --------------------
err: ERROR: failed to solve: process "/bin/sh -c npm run build" did not complete successfully: exit code: 2
err: Service 'client-platform' failed to build : Build failed

This is my Dockerfile:

FROM node:latest as build-stage

WORKDIR /app
COPY package.json package-lock.json ./
RUN npm install
COPY . .
RUN npm run build

FROM nginx:stable-alpine as production-stage

COPY --from=build-stage /app/dist /usr/share/nginx/html
COPY --from=build-stage /app/nginx.conf /etc/nginx
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

This is my tsconfig.json:

{
    "compilerOptions": {
        ...
    },
    "include": [
        "src/**/*.ts",
        "src/**/*.d.ts",
        "src/**/*.tsx",
        "src/**/*.vue",
        "src/**/*.json",
        "vite.config.ts"
    ],
    "references": [{ "path": "./tsconfig.node.json" }],
    "exclude": ["node_modules"]
}

This is my tsconfig.node.json:

{
    "compilerOptions": {
        "composite": true,
        "module": "ESNext",
        "moduleResolution": "Node",
        "allowSyntheticDefaultImports": true
    },
    "include": ["vite.config.ts"]
}

My npm run build runs vue-tsc --noEmit && vite build.

I've already did this process early and nothing changed in these files. Did something changed?

[ferdicus]

getting the same error when moving from TS 5.4.x to 5.5.x

[NathanAP]

It seems that Vite (or TS) really cares about errors after some update. In my case it was circular dependency. I recommend you try to run npm run build locally and find build errors.

Edit: sorry, this is not a solution, I'm just assuming it is because I can't run build locally.

[badsyntax]

@NathanAP The final TS version your app is using depends on your version range set in your package.json and also which TS version your deps depend on. Setting a pinned version of TS to 5.4 solved the issue for me.

[ferdicus]

i've seen, that i had "include": ["vite.config.ts"] within my tsconfig.json, which i'm not quite sure why it's required 🤔
removing that fixed the issue, however i'm unsure what effects this might have down the river...

[NathanAP]

i've seen, that i had "include": ["vite.config.ts"] within my tsconfig.json, which i'm not quite sure why it's required 🤔 removing that fixed the issue, however i'm unsure what effects this might have down the river...

When I did that, my run build started to show me that I had some errors (unused variables, circular import, wrong typing, etc). I'm trying to fix it now to see if I can run it again.

[peksipatongeis]

Had the same issue with an older Vite app that upgraded to TypeScript 5.5.

Managed to fix the issue by updating the TSConfig structure to adhere the structure of the latest Vite app with TSConfig split to three different config files; tsconfig.json, tsconfig.app.json and tsconfig.node.json.

[krishnagkmit]

I did this and the problem is solved but I noticed something in the new vite app,
I created a Ts error intentionally in App.tsx and didn’t change anything in the new app and ran npx tsc and it didn’t detect the error and npx tsc -b is detecting the error.
Because this similar behaviour is happening in my project after changing tsconfigs.
Is there a specific reason for this?

• typescript version used in the new app - 5.6.2
  (this is the only change I did in the new app)

import { useState } from "react";
import reactLogo from "./assets/react.svg";
import viteLogo from "/vite.svg";
import "./App.css";

function App() {
  const [count, setCount] = useState<string>(0); // intensional TS Error

  return (
    <>
      <div>
        <a href="https://vitejs.dev" target="_blank">
          <img src={viteLogo} className="logo" alt="Vite logo" />
        </a>
        <a href="https://react.dev" target="_blank">
          <img src={reactLogo} className="logo react" alt="React logo" />
        </a>
      </div>
      <h1>Vite + React</h1>
      <div className="card">
        <button onClick={() => setCount((count) => count + 1)}>
          count is {count}
        </button>
        <p>
          Edit <code>src/App.tsx</code> and save to test HMR
        </p>
      </div>
      <p className="read-the-docs">
        Click on the Vite and React logos to learn more
      </p>
    </>
  );
}

export default App;

[jonaldinger]

I created a new Vite app and copied the changed configs from there to my project

Thanks @peksipatongeis, doing this solved the issue for me as well after upgrading to from TypeScript 5.4 to 5.6. But I did run into the same issue as @krishnagkmit, where I also needed to add the build flag to TypeScript tsc -b in order for it to actually perform any type checking. I was pretty excited because my build times shot way down after the TS upgrade + Vite config changes, then I discovered that's because it stopped checking any types during the build 🤦‍♂️. It's unclear to me why that flag is now suddenly needed.

[FaitAccompli]

Updating the TSConfig structure worked for me as well but now running vue-tsc --noEmit or tsc --noEmit does not detect any errors. Were you able to resolve this @jonaldinger @krishnagkmit?

[krishnaagarwal1506]

@FaitAccompli, I was not able to resolve this issue with the latest vite update so I degraded my Ts version and reverted the config files as before and that resolved all my issues for ts errors and lint errors

[FaitAccompli]

@krishnagkmit Thanks! Did it just now, and it seems to work fine.

• downgraded to typescript 5.4.x
• reverted config files

[NathanAP]

So, I have an update. After a lot of research, I discovered that my npm run build wasn't completing because I had some logic errors like circular imports, unused variables and some typing as well. I fixed everything (1k lines 😥) and now everything is up again.

edit: I forgot to say that I removed vite.config.ts from my tsconfig.json and left it only in tsconfig.node.json and thats how I discovered that I had those errors. Let me know if this is not a good practice.

[krishnagkmit]

it is working if vite.config.ts is removed from the includes array in the tsconfig.json but I can’t confirm if this is a good practice

[krishnagkmit]

@NathanAP , I did this and it was not working properly and I got some errors and then I downgraded the typescripts version to 5.1.6 and then it was working perfectly even after adding vite.config.ts in tsconfig.json

[NathanAP]

I believe Typescript changed the way they look into some problems (like circular import in my case). You probably should take a look into your structure to see if you find some inconsistency. Everything worked properly after my changes

[den-bulaev]

Hi guys!
I've faced the same issue in my freshy npx degit reduxjs/redux-templates/packages/vite-template-redux project and i fixed it by setting typescript version to 5.1. By the way, at this moment npm run lint won't work either after this setup, ts 5.1 solve this problem