javascript - Kunde inte hitta en deklarationsfil för modulen 'tailwind-scrollbar'

Jag försöker använda några Tailwind-paket för en Next.js-applikation och jag stöter på ett problem som jag inte kan hitta en lösning på. När jag lägger till ett "require" i min tailwind.config.js-fil får jag hela tiden detta fel:

Could not find a declaration file for module 'tailwind-scrollbar'. 
'/Users/beatsbyrsd/Documents/JavaScript/React/instagram-clone/node_modules/.pnpm/[email /node_modules/tailwind-scrollbar/src/index.js' 
implicitly has an 'any' type. 
Try `npm i --save-dev @types/tailwind-scrollbar` if it exists or add a 
new declaration (.d.ts) file containing `declare module 'tailwind-scrollbar';

Här är hur min tailwind.config.js-fil ser ut:

module.exports = {
    content: [
        "./pages/**/*.{js,ts,jsx,tsx}",
        "./components/**/*.{js,ts,jsx,tsx}",
    ],
    theme: {
        extend: {},
    },
    plugins: [
        require("@tailwindcss/forms"),
        require("tailwind-scrollbar"),
        require("tailwind-scrollbar-hide"),
    ],
};

Jag har letat runt online och hittat metoder som att skapa en global.d.ts-fil och deklarera modulen, att prova npm i --save-dev @types/tailwind-scrollbar, men inget verkar fungera. Jag uppskattar hjälpen och tack på förhand!

Svar #1

Var snäll och gör detta...

npm uninstall  tailwind-scrollbar

Ta bort från konfiguration

module.exports = {
    content: [
        "./pages/**/*.{js,ts,jsx,tsx}",
        "./components/**/*.{js,ts,jsx,tsx}",
    ],
    theme: {
        extend: {},
    },
    plugins: [
        require("@tailwindcss/forms"),

    ],
};

Sedan

 npm i  tailwind-scrollbar-hide

lägg till i konfigureringen

module.exports = {
    content: [
        "./pages/**/*.{js,ts,jsx,tsx}",
        "./components/**/*.{js,ts,jsx,tsx}",
    ],
    theme: {
        extend: {},
    },
    plugins: [
        require("@tailwindcss/forms"),
        require("tailwind-scrollbar-hide"),
    ],
};

använd den här klassen för att dölja rullningslist

scrollbar-hide

Svar #2

Du har de problemen eftersom de moduler du försöker använda inte levereras med TypeScript-typdeklaration som standard.

För att lösa detta: skapa en typdeklarationsfil

//global.d.ts
declare module tailwind-scrollbar
declare module tailwind-scrollbar-hide

uppdatera din tsconfig.json så här

//tsconfig.json
{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "strict": true,
    "jsx": "preserve",
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "resolveJsonModule": true,
    "allowJs": true
  },
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx",
    "global.d.ts" // don't miss adding this line
  ],
  "exclude": ["node_modules"]
}

Din Tailwind-konfigurationsfil bör förbli densamma och det kommer att lösa ditt problem