Typescript: error TS2315: Type 'Plugin' is not generic

[florian-lefebvre]

Similar issue: #28.
I updated my project to Typescript and now I'm getting errors during the build on Vercel:

10:38:16.682 | node_modules_dev/@nuxt/types/config/build.d.ts(125,58): error TS2315: Type 'Plugin' is not generic.
-- | --
10:38:16.683 | node_modules_dev/@nuxt/types/config/build.d.ts(125,98): error TS2315: Type 'Plugin' is not generic.
10:38:16.683 | node_modules_dev/@nuxt/types/config/build.d.ts(125,134): error TS2315: Type 'Plugin' is not generic.
10:38:16.683 | node_modules_dev/@nuxt/types/config/build.d.ts(134,36): error TS2315: Type 'Plugin' is not generic.
10:38:16.683 | node_modules_dev/@nuxt/types/config/build.d.ts(135,37): error TS2315: Type 'Plugin' is not generic.
10:38:16.703 | Error: Command failed with exit code 2: npx tsc --target ES2018 --module ESNext --moduleResolution Node --lib ESNext,ESNext.AsyncIterable,DOM --esModuleInterop true --allowJs true --sourceMap true --strict true --experimentalDecorators true --baseUrl . --types @nuxt/types,@types/node,nuxt-i18n,@nuxtjs/strapi,@nuxtjs/toast --noEmit false --rootDir /vercel/workpath0 --outDir now_compiled nuxt.config.ts
10:38:16.703 | at makeError (/vercel/b3a3026e4d524981/.build-utils/.builder/node_modules/execa/lib/error.js:59:11)
-- | --
10:38:16.704 | at handlePromise (/vercel/b3a3026e4d524981/.build-utils/.builder/node_modules/execa/index.js:114:26)
10:38:16.704 | at processTicksAndRejections (internal/process/task_queues.js:97:5)
10:38:16.704 | at async compileTypescriptBuildFiles (/vercel/b3a3026e4d524981/.build-utils/.builder/node_modules/@nuxtjs/vercel-builder/lib/index.js:220:3)
10:38:16.704 | at async Object.build (/vercel/b3a3026e4d524981/.build-utils/.builder/node_modules/@nuxtjs/vercel-builder/lib/index.js:333:31)
10:38:16.704 | at async buildStep (/var/task/sandbox-worker.js:116543:24)
10:38:16.704 | at async /var/task/sandbox-worker.js:116190:27 {

I'm using nuxt 2.15.4, so I don't have @nuxt/typescript-runtime installed. Here are my files:

vercel.json

{
  "version": 2,
  "builds": [
    {
      "src": "api/**/*.ts",
      "use": "@vercel/node"
    },
    {
      "src": "nuxt.config.ts",
      "use": "@nuxtjs/vercel-builder",
      "config": {
        "serverFiles": ["lang/**"]
      }
    }
  ]
}

nuxt.config.ts

import { NuxtConfig } from "@nuxt/types";
import localesFetcher from "./lang/localesFetcher";

const config: NuxtConfig = async () => {
  const locales = await localesFetcher();
  return {
    head: {},
    plugins: [
      "~/plugins/vue-clipboard2.ts",
      "~/plugins/vue-country-flag.ts",
      "~/plugins/i18n.ts"
    ],
    components: true,
    loading: false,
    build: {
      loaders: {
        limit: 0
      }
    },
    buildModules: [
      "@nuxt/typescript-build",
      "@nuxtjs/tailwindcss",
      "@teamnovu/nuxt-breaky"
    ],
    modules: [
      "nuxt-i18n",
      "@nuxtjs/strapi",
      "@nuxtjs/toast",
      "@nuxtjs/google-fonts"
    ],
    i18n: {
      baseUrl: process.env.BASE_URL || "http://localhost:3000",
      strategy: "prefix",
      locales,
      lazy: true,
      langDir: "lang/",
      defaultLocale: "en",
      vueI18n: {
        fallbackLocale: "en"
      },
      detectBrowserLanguage: {
        useCookie: true,
        cookieKey: "i18n_redirected",
        onlyOnRoot: true
      }
    },
    strapi: {},
    toast: {
      position: "top-center",
      duration: 1000,
      theme: "tw"
    },
    tailwindcss: {
      jit: true,
      exposeConfig: true,
      viewer: false
    },
    googleFonts: {
      families: {
        Poppins: [100, 200, 300, 400, 500, 600, 700, 800, 900]
      }
    }
  };
};

export default config;

package.json

{
  "name": "nuxt",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build --modern",
    "start": "nuxt start",
    "generate": "nuxt generate",
    "analyze": "yarn build -a",
    "vercel": "vercel dev"
  },
  "dependencies": {
    "@nuxtjs/strapi": "^0.3.1",
    "@nuxtjs/toast": "^3.3.1",
    "@nuxtjs/vercel-builder": "^0.21.2",
    "@vercel/node": "^1.10.0",
    "axios": "^0.21.1",
    "core-js": "^3.10.1",
    "nuxt": "^2.15.4",
    "nuxt-i18n": "^6.25.0",
    "nuxt-property-decorator": "^2.9.1",
    "vue-clipboard2": "^0.3.1",
    "vue-country-flag": "^2.0.4"
  },
  "devDependencies": {
    "@nuxt/types": "^2.15.3",
    "@nuxt/typescript-build": "^2.1.0",
    "@nuxtjs/google-fonts": "^1.2.0",
    "@nuxtjs/tailwindcss": "^4.0.3",
    "@teamnovu/nuxt-breaky": "^1.2.2",
    "postcss": "^8.2.10",
    "tailwind-stroke-color": "1.0.0",
    "tailwindcss": "^2.1.1",
    "tailwindcss-textshadow": "^2.1.3",
    "vuex-module-decorators": "^1.0.1"
  }
}

[danielroe]

@florian-lefebvre Could you check your package lockfile and see what version of @nuxt/types you have installed? In addition, could you do a full-text search of your project for the string Plugin< to see if you are using a generic version of the Plugin type anywhere?

[florian-lefebvre]

@danielroe
yarn.lock

"@nuxt/types@^2.15.3":
  version "2.15.4"
  resolved "https://registry.npmjs.org/@nuxt/types/-/types-2.15.4.tgz#7d385757eb4faa28bb03cddc5f677c5c6677ab42"
  integrity sha512-caDwN0mFIBd5E3y9Gtgb8nAfg+Uqz2QlLKW1qHwLP546A97lC3jIdGlRGoiEUblIxXjEOOBYJ/G5sUBWThXZLQ==
  dependencies:
    "@types/autoprefixer" "^9.7.2"
    "@types/babel__core" "^7.1.14"
    "@types/compression" "^1.7.0"
    "@types/connect" "^3.4.34"
    "@types/etag" "^1.8.0"
    "@types/file-loader" "^4.2.1"
    "@types/html-minifier" "^4.0.0"
    "@types/less" "^3.0.2"
    "@types/node" "^12.20.7"
    "@types/optimize-css-assets-webpack-plugin" "^5.0.3"
    "@types/pug" "^2.0.4"
    "@types/sass-loader" "8.0.1"
    "@types/serve-static" "^1.13.9"
    "@types/webpack" "^4.41.27"
    "@types/webpack-bundle-analyzer" "^3.9.2"
    "@types/webpack-dev-middleware" "^4.1.2"
    "@types/webpack-hot-middleware" "^2.25.4"
    sass-loader "^10.1.1"

I'm not using any generic version of the Plugin type.

I don't know if it can help but here are my plugins:

// i18n.ts
import { Context } from "@nuxt/types";

export default function({ store, app }: Context) {
  // app.i18n.beforeLanguageSwitch = (oldLocale, newLocale) => {
  //   console.log(oldLocale, newLocale);
  // };
  app.i18n.onLanguageSwitched = (oldLocale, newLocale) => {
    // console.log(oldLocale, newLocale);
    store.commit("pinned/SET_CURRENT_LOCALE", { locale: newLocale });
  };
}

// vue-clipboard2.ts
import Vue from "vue";
import VueClipboard from "vue-clipboard2";
Vue.use(VueClipboard);

// vue-country-flag.ts
import Vue from "vue";
import CountryFlag from "vue-country-flag";
Vue.component("country-flag", CountryFlag);

[florian-lefebvre]

They are not involved in the error: I disabled all the plugins and I still get the error.

[danielroe]

@florian-lefebvre Any chance you could create a reproduction?

You might also try enabling skipLibCheck in your tsconfig.json - see docs.

[florian-lefebvre]

Thanks, I'll check that.
I'll create a repo and send the link here.

[florian-lefebvre]

@danielroe I sent you a DM on Discord.

[florian-lefebvre]

skipLibCheck worked but still I'm curious to know where the error comes from

[danielroe]

@florian-lefebvre Thanks for pinging me your repo. It's because you have postcss@8 installed and @nuxt/types is using postcss@7 types.

[florian-lefebvre]

Thank you @danielroe! How can I fix that?

[danielroe]

@florian-lefebvre Just make sure to keep skipLibCheck enabled.

[florian-lefebvre]

Okay, thanks a lot for your help!