Adding property 'css:[]' in Nuxt 3 resulting in Typescript error

huangapple go评论74阅读模式
英文:

Adding property 'css:[]' in Nuxt 3 resulting in Typescript error

问题

I'm using Nuxt3/Typescript/CompositionAPI..
Why does my nuxt.config.ts keep giving me errors when I want to use for example the 'css:'?
Right now this is my nuxt.config.ts:

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  css: [
    '~/assets/css/global.css',
  ],
  modules: [
    '@nuxtjs/tailwindcss',
    '@nuxtjs/google-fonts',
    '@formkit/nuxt',
    '@nuxtjs/eslint-module',
    // Pinia
    // i18n
  ],
  tailwindcss: {
    cssPath: '~/assets/css/tailwind.css',
    configPath: 'tailwind.config',
  },
  googleFonts: {
    families: {
      'Plus+Jakarta+Sans': true,
    },
  },
});

Only the css:[] is giving the error:

TS2345: Argument of type '{ app: {}; modules: string[]; tailwindcss: { cssPath: string; configPath: string; }; googleFonts: { families: { 'Plus+Jakarta+Sans': true; }; }; }' is not assignable to parameter of type 'NuxtConfig'. Object literal may only specify known properties, and 'app' does not exist in type 'NuxtConfig.

This is my package.json:

"devDependencies": {
    "@nuxtjs/eslint-module": "^4.0.2",
    "@nuxtjs/google-fonts": "^3.0.0",
    "@nuxtjs/tailwindcss": "^6.6.5",
    "eslint": "^8.37.0",
    "eslint-plugin-tailwindcss": "^3.10.3",
    "nuxt": "^3.3.3"
},
"dependencies": {
    "@formkit/addons": "^0.16.4",
    "@formkit/nuxt": "^0.16.4",
    "@formkit/themes": "^0.16.4",
    "@formkit/vue": "^0.16.4",
    "@nuxtjs/eslint-config-typescript": "^12.0.0"
}

Good to mention, this is working so no errors on the localhost. But its just returning the error in my IDE when I hover over it.

The docs: Nuxt Configuration - css.
I am kinda new to setting up new Nuxt projects. Please, let me know if you need anything else.

Thanks

英文:

I'm using Nuxt3/Typescript/CompositionAPI..
Why does my nuxt.config.ts keep giving me errors when I want to use for example the 'css:'?
Right now this is my nuxt.config.ts:

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  css: [
    '~/assets/css/global.css',
  ],
  modules: [
    '@nuxtjs/tailwindcss',
    '@nuxtjs/google-fonts',
    '@formkit/nuxt',
    '@nuxtjs/eslint-module',
    // Pinia
    // i18n
  ],
  tailwindcss: {
    cssPath: '~/assets/css/tailwind.css',
    configPath: 'tailwind.config',
  },
  googleFonts: {
    families: {
      'Plus+Jakarta+Sans': true,
    },
  },
});

Only the css:[] is giving the error:

TS2345: Argument of type '{ app: {}; modules: string[]; tailwindcss: { cssPath: string; configPath: string; }; googleFonts: { families: { 'Plus+Jakarta+Sans': true; }; }; }' is not assignable to parameter of type 'NuxtConfig'. Object literal may only specify known properties, and 'app' does not exist in type 'NuxtConfig'.

This is my package.json:

   "devDependencies": {
    "@nuxtjs/eslint-module": "^4.0.2",
    "@nuxtjs/google-fonts": "^3.0.0",
    "@nuxtjs/tailwindcss": "^6.6.5",
    "eslint": "^8.37.0",
    "eslint-plugin-tailwindcss": "^3.10.3",
    "nuxt": "^3.3.3"
  },
  "dependencies": {
    "@formkit/addons": "^0.16.4",
    "@formkit/nuxt": "^0.16.4",
    "@formkit/themes": "^0.16.4",
    "@formkit/vue": "^0.16.4",
    "@nuxtjs/eslint-config-typescript": "^12.0.0"
  }

Good to mention, this is working so no errors on the localhost. But its just returning the error in my IDE when I hover over it.

The docs: https://nuxt.com/docs/api/configuration/nuxt-config#css.
I am kinda new to setting up new Nuxt projects. Please, let me know if you need anything else.

Thanks

答案1

得分: 11

尝试将 typescript 安装为开发依赖项,修复了我的IDE上的问题。

英文:

Try installing typescript as dev dependency, fixed the issue on my IDE

答案2

得分: 2

我在使用VS Code时遇到了类似的问题,并通过将TypeScript版本更改为工作区版本来解决了该问题。

英文:

I had a similar issue while using VS code, and fixed the problem by changing the typescript version to the Workspace version.

Adding property 'css:[]' in Nuxt 3 resulting in Typescript error

答案3

得分: 0

我有与 @nuxtjs/eslint-module 和 eslint 键相同的问题。我尝试了 @yoduh 的小技巧(尽管我运行了 npm run postinstall),这对我有用。

英文:

I had the same issue with @nuxtjs/eslint-module and the eslint key. I tried @yoduh's trick (although I did npm run postinstall) and that fixed it for me.

huangapple
  • 本文由 发表于 2023年4月6日 20:13:28
  • 转载请务必保留本文链接:https://go.coder-hub.com/75949400.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定