Installing Scripts into Nuxtjs 3 + Tailwind project introducing errors

Question

I have a Nuxtjs project using Tailwind CSS that was working locally when build with yarn dev until today when I installed Nuxt Scripts in an attempt to get YouTube embeds working per the documentation here: https://scripts.nuxt.com/scripts/content/youtube-player

However, after installing with npx nuxi@latest module add scripts and npm add -D @types/youtube and running npm audit fix my project no longer builds.

I am not even sure how to begin debugging this, but the two errors I am getting:

1: on yarn build or yarn dev

 ERROR  Nuxt Build Error: [@tailwindcss/vite:generate:build] Missing field negated on ScannerOptions.sources                            nuxi 4:10:09 p.m.  
file: [ROOT]/assets/main.css

    at C.generate (/[ROOT]/node_modules/@tailwindcss/vite/dist/index.mjs:1:4303)
    at async Object.transform (/[ROOT]/node_modules/@tailwindcss/vite/dist/index.mjs:1:2354)
    at async transform (/[ROOT]/node_modules/rollup/dist/es/shared/node-entry.js:20906:16)
    at async ModuleLoader.addModuleSource (/[ROOT]/node_modules/rollup/dist/es/shared/node-entry.js:21119:36)

2. In VS Code, I am getting an error on nuxt.config.ts:

Object literal may only specify known properties, and 'app' does not exist in type 'InputConfig<NuxtConfig, ConfigLayerMeta>'.

Note that if I delete 'app' I get the same error but for the next node in the file.

Answer 1

The problem was I had competing manifests due to using yarn and npm and npx. Steps to fix:

1. Delete node_modules and package-lock.json (because I have a yarn.lock instead)
2. Run yarn install

The project is now building and running again locally.