Could not find a declaration file for module 'gatsby-plugin-dark-mode'-CodePudding

I'm getting the below error, trying to import ThemeToggler from gatsby-plugin-dark-mode

module "C:/Users/Karim Elnemr/Desktop/my-gatsby-website/node_modules/gatsby-plugin-dark-mode/index"
Could not find a declaration file for module 'gatsby-plugin-dark-mode'. 'C:/Users/Karim Elnemr/Desktop/my-gatsby-website/node_modules/gatsby-plugin-dark-mode/index.js' implicitly has an 'any' type.
  Try `npm i --save-dev @types/gatsby-plugin-dark-mode` if it exists or add a new declaration (.d.ts) file containing `declare module 'gatsby-plugin-dark-mode';`ts(7016)

also I'm getting this errors on the terminal for ever I try to install the blugin

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR!   react@"^17.0.1" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"16.x" from [email protected]
npm ERR! node_modules/gatsby-plugin-dark-mode
npm ERR!   gatsby-plugin-dark-mode@"^1.1.2" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!

down below is where I imported the said plugin

import React from "react"
import { ThemeToggler } from "gatsby-plugin-dark-mode"

export default function ThemeToggle() {
  return (
    <ThemeToggler>
      {({ theme, toggleTheme }) => {
        if (theme == null) {
          return null
        }
        return (
          <label className="theme-switch">
            <input
              type="checkbox"
              onChange={e => toggleTheme(e.target.checked ? "dark" : "light")}
              checked={theme === "dark"}
            />
            <span className="toggle"></span>
          </label>
        )
      }}
    </ThemeToggler>
  )
}

need some explanation what dose it mean and why it's happening so I can solve it.

CodePudding user response：

You need to downgrade your react versions: in your package.json

   "dependencies": {
   ...
   "react": "16.14.0",
    "react-dom": "16.14.0",
    ...
    }

Then delete your node-modules folder and run

yarn install or npm install

CodePudding user response：

The error on the install means that the library you want to install depends on react 16 while you have React 17 installed on your project

you can use this command npm i gatsby-plugin-dark-mode --legacy-peer-deps

CodePudding user response：

You can simply do : npm i gatsby-plugin-dark-mode --force