"Cannot write file '...' because it would overwrite input file" error in tsconfig.json

Hello. I created a Nuxt app with bunx nuxi@latest init www-nuxt. I added t3-env/nuxt and then I added TailwindCSS following their Nuxt guide. I went ahead to add a simple route in the server and a page in the client.
tree --gitignore
.
├── app.config.ts
├── app.vue
├── assets
│ └── css
│ └── main.css
├── components
├── env
│ ├── client.ts
│ └── server.ts
├── layouts
├── nuxt.config.ts
├── package.json
├── pages
│ └── index.vue
├── public
│ └── favicon.ico
├── README.md
├── server
│ ├── api
│ │ └── hello.ts
│ └── tsconfig.json
├── tailwind.config.js
└── tsconfig.json

10 directories, 14 files
tree --gitignore
.
├── app.config.ts
├── app.vue
├── assets
│ └── css
│ └── main.css
├── components
├── env
│ ├── client.ts
│ └── server.ts
├── layouts
├── nuxt.config.ts
├── package.json
├── pages
│ └── index.vue
├── public
│ └── favicon.ico
├── README.md
├── server
│ ├── api
│ │ └── hello.ts
│ └── tsconfig.json
├── tailwind.config.js
└── tsconfig.json

10 directories, 14 files
// server/api/hello.ts
export default defineEventHandler(() => {
return "Hello";
});
// server/api/hello.ts
export default defineEventHandler(() => {
return "Hello";
});
// pages/index.vue
<script setup lang="ts">
const data = await useFetch("/api/hello");
</script>

<template>
<pre> {{ data }}</pre>
</template>
// pages/index.vue
<script setup lang="ts">
const data = await useFetch("/api/hello");
</script>

<template>
<pre> {{ data }}</pre>
</template>
This runs fine with bun dev, however, I keep getting an error in server/tsconfig.json: Cannot write file '/home/shig07770/Programming/ts-devkit/projects/www-nuxt/tailwind.config.js' because it would overwrite input file.ts. However, this file only contains:
{
"extends": "../.nuxt/tsconfig.server.json"
}
{
"extends": "../.nuxt/tsconfig.server.json"
}
I tried removing the .nuxt directory and then regenerating the files with bun dev but the error is still there. This is also not a VS Code issue because it didn't go away when I reloaded the window.
No description
5 Replies
🌺🇫🇷 Shigu :3 🌺
Reproducing the error - Run bunx nuxi@latest init nuxt-tsconfig-bug - Which package manager would you like to use? bun - Initialize git repository? No - Run cd nuxt-tsconfig-bug - Run bun add -D tailwindcss postcss autoprefixer && bunx tailwindcss init - Write nuxt.config.ts
export default defineNuxtConfig({
devtools: { enabled: true },
postcss: {
plugins: {
tailwindcss: {},
autoprefixer: {}
}
}
});
export default defineNuxtConfig({
devtools: { enabled: true },
postcss: {
plugins: {
tailwindcss: {},
autoprefixer: {}
}
}
});
- Write tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./components/**/*.{js,vue,ts}",
"./layouts/**/*.vue",
"./pages/**/*.vue",
"./plugins/**/*.{js,ts}",
"./app.vue",
"./error.vue"
],
theme: {
extend: {}
},
plugins: []
};
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./components/**/*.{js,vue,ts}",
"./layouts/**/*.vue",
"./pages/**/*.vue",
"./plugins/**/*.{js,ts}",
"./app.vue",
"./error.vue"
],
theme: {
extend: {}
},
plugins: []
};
- Observe error in server/tsconfig.json
Reagan M
Reagan M3w ago
Hi @🌺🇫🇷 Shigu :3 🌺 , have you found the solution?
Reagan M
Reagan M3w ago
In my case it's the Eslint with .mjs suffix that is causing the issue. And I don't think it is recommended to change the .mjs to .ts(unsure) so as a temporary solution, I had to exclude it in the ~server/tsconfig.json like this.
{
"extends": "../.nuxt/tsconfig.server.json",
"exclude": ["../eslint.config.mjs"]
}
{
"extends": "../.nuxt/tsconfig.server.json",
"exclude": ["../eslint.config.mjs"]
}
In your case, I think the reason for that is the tailwind.config.js Try changing it to.ts
🌺🇫🇷 Shigu :3 🌺
Thanks, I'll try when I get home