Nuxt•2w ago

Build failing with typescript error in [email protected]

My "nuxt buid" is failing with this error: transforming (31) nodemodules.pnpm\[email protected]@parcel+watcher_affb1ef70870c18232d7085a01aeb44d\node_modules\nuxt\dist\app\components\nuxt-root.vueerror TS5042: Option 'project' cannot be mixed with source files on a command line. Setting the typescript typecheck property to false make the build pass in nuxt.config.ts but obviously tha't's not something I want. Any idea how to solve it ?

10 Replies

kapa.ai•2w ago

Hi @Alexandre Nédélec. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the knowledge sources provided, I can offer some insights and potential solutions to your issue with Nuxt 3.15.4 build failing due to a TypeScript error. The error you're encountering suggests there might be a conflict in TypeScript configuration. Here are a few approaches you can try: 1. Update your tsconfig.json: Make sure your tsconfig.json extends the Nuxt-generated TypeScript configuration. This can help resolve some TypeScript-related issues:

   {
     "extends": "./.nuxt/tsconfig.json",
     "compilerOptions": {
       // Your custom options here
     }
   }

   {
     "extends": "./.nuxt/tsconfig.json",
     "compilerOptions": {
       // Your custom options here
     }
   }

Nuxt TypeScript Documentation provides more details on this setup. 2. Check Compatibility Version: Nuxt 3.15.4 introduces some changes related to TypeScript. You might want to try setting the compatibility version to 4 in your nuxt.config.ts:

   export default defineNuxtConfig({
     future: {
       compatibilityVersion: 4
     }
   })

   export default defineNuxtConfig({
     future: {
       compatibilityVersion: 4
     }
   })

This enables early access to Nuxt v4 features, which might resolve some TypeScript-related issues. Nuxt Configuration Documentation provides more information on this setting. 3. Verify TypeScript Version: Ensure you're using a compatible version of TypeScript. Nuxt 3.15.4 might require a specific TypeScript version. You can try updating TypeScript to the latest version compatible with Nuxt 3.15.4. 4. Check for Conflicting Configurations: Make sure you don't have conflicting TypeScript configurations in your project. The error message suggests there might be a conflict between the project option and source files on the command line. 5. Use vue-tsc: If the issue persists, you can try using vue-tsc for type checking. Install it as a dev dependency:

   npm install --save-dev vue-tsc typescript

   npm install --save-dev vue-tsc typescript

Then use the nuxi typecheck command to check your types:

   npx nuxi typecheck

   npx nuxi typecheck

Nuxt TypeScript Documentation provides more information on this approach. If none of these solutions work, you might want to create a minimal reproduction of the issue and share it on the Nuxt GitHub repository for further assistance from the Nuxt team or community. Remember, disabling TypeScript type checking (as you mentioned) is not recommended as it defeats the purpose of using TypeScript for type safety. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2w ago

<@696377945865846805> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Alexandre NédélecOP•2w ago

None solution worked 😦 @kapa.ai there is a compabitiliyDate property available but no compabilityversion in my nuxtconfig

kapa.ai•2w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- You're correct in noticing that there's a compatibilityDate property but no compatibilityVersion in your Nuxt configuration. This is because compatibilityDate and compatibilityVersion are two different concepts in Nuxt, and they serve different purposes. The compatibilityDate property was introduced to help manage compatibility with Nitro, Nuxt Image, and other modules that may change behavior without a major version bump. It's used to specify a date for compatibility purposes. On the other hand, compatibilityVersion is part of the future namespace in the Nuxt configuration. It's used for opting into new features that will become default in future versions of Nuxt. Here's what you need to know: 1. compatibilityDate: This is a top-level property in your Nuxt configuration. According to the Nuxt Configuration Documentation, it's used to "Specify a compatibility date for your app." 2. compatibilityVersion: This is set under the future namespace in your Nuxt configuration. As per the Nuxt Configuration Documentation, you can set it like this:

   export default defineNuxtConfig({
     future: {
       compatibilityVersion: 4
     }
   })

   export default defineNuxtConfig({
     future: {
       compatibilityVersion: 4
     }
   })

This setting is available in Nuxt v3.12+ and is used to opt-in to Nuxt v4 behavior. If you want to use features from the upcoming Nuxt 4, you should add the compatibilityVersion under the future namespace in your nuxt.config.ts file. However, keep in mind that this might introduce breaking changes, so it's recommended to test thoroughly if you decide to use it. Remember, these are two separate configurations serving different purposes. The compatibilityDate helps with module compatibility, while compatibilityVersion is for opting into future Nuxt features. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2w ago

<@696377945865846805> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Alexandre NédélecOP•2w ago

@kapa.ai same error event with the compability version and others solutions did not work

kapa.ai•2w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- I understand that you're still encountering the same TypeScript error even after trying the solutions I suggested, including setting the compatibility version. I apologize that these solutions didn't resolve your issue. Let's explore some additional options based on the information available in the knowledge sources. 1. Check your Nuxt and TypeScript versions: Make sure you're using compatible versions of Nuxt and TypeScript. According to a recent issue in the Nuxt GitHub repository, there might be some compatibility issues with certain TypeScript versions. You might want to try updating or downgrading your TypeScript version to see if it resolves the issue. 2. Investigate potential conflicts with ESLint: There have been reports of conflicts between ESLint and TypeScript configurations in Nuxt projects. You could try updating your ESLint configuration. If you're using @nuxtjs/eslint-config, consider switching to the newer @nuxt/eslint-config for Nuxt 3 projects. ESLint Nuxt Documentation provides information on custom config presets that might help. 3. Check for global installations: As suggested in a GitHub issue comment, sometimes globally installed packages can cause conflicts. Try checking if you have any globally installed Nuxt-related packages and remove them if necessary. 4. Verify your tsconfig.json: Ensure that your tsconfig.json is correctly set up. It should extend the Nuxt-generated configuration:

   {
     "extends": "./.nuxt/tsconfig.json",
     "compilerOptions": {
       // Your custom options here
     }
   }

   {
     "extends": "./.nuxt/tsconfig.json",
     "compilerOptions": {
       // Your custom options here
     }
   }

Be cautious about overwriting options such as compilerOptions.paths, as this can lead to module resolution issues. 5. Try using --no-typecheck flag: As a temporary workaround to isolate the issue, you could try running the build with the --no-typecheck flag:

   nuxt build --no-typecheck

   nuxt build --no-typecheck

This isn't a permanent solution, but it might help identify if the issue is specifically with the TypeScript checking process. 6. Create a minimal reproduction: If none of these solutions work, it would be beneficial to create a minimal reproduction of your issue. This can help in getting more specific assistance from the Nuxt community or maintainers. 7. Check for recent updates or known issues: Keep an eye on the Nuxt GitHub repository for any recent issues or updates related to TypeScript errors in version 3.15.4. If the issue persists after trying these additional steps, it might be worth creating a new issue on the Nuxt GitHub repository with a detailed description of your setup, the steps you've tried, and a minimal reproduction of the problem. The Nuxt team or community members might be able to provide more specific guidance based on your particular case. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2w ago

<@696377945865846805> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Alexandre NédélecOP•2w ago

It di not solve my issue

Mittchel•2w ago

The error you're encountering (TS5042: Option 'project' cannot be mixed with source files on a command line) is related to how TypeScript is being invoked during the build process. This issue often arises when there's a misconfiguration in how TypeScript is being used in your Nuxt project.

npm run build --verbose

npm list typescript

npm dedupe

npm install nuxt@latest
npm install typescript@latest

npm run build --verbose

npm list typescript

npm dedupe

npm install nuxt@latest
npm install typescript@latest

Check tsconfig.json

{
  "extends": "./.nuxt/tsconfig.json",
  "compilerOptions": {
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": [
    "**/*.ts",
    "**/*.vue"
  ],
  "exclude": [
    "node_modules"
  ]
}

{
  "extends": "./.nuxt/tsconfig.json",
  "compilerOptions": {
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": [
    "**/*.ts",
    "**/*.vue"
  ],
  "exclude": [
    "node_modules"
  ]
}

nuxt.config.ts

export default defineNuxtConfig({
  typescript: {
    typeCheck: true,
    strict: true,
    shim: false,
  },
});

export default defineNuxtConfig({
  typescript: {
    typeCheck: true,
    strict: true,
    shim: false,
  },
});

package.json

{
  "scripts": {
    "build": "nuxt build"
  },
  "dependencies": {
    "nuxt": "^3.15.4",
    "typescript": "^5.0.0"
  }
}

{
  "scripts": {
    "build": "nuxt build"
  },
  "dependencies": {
    "nuxt": "^3.15.4",
    "typescript": "^5.0.0"
  }
}

good luck

Gaming

Programming

Build failing with typescript error in [email protected]

Did you find this page helpful?