Heroku pushエラーになってしまう デプロイできない

Question

以下のURL通りにフロントはReact、バックはnodeで制作したものをHerokuにデプロイしようとしています。
https://reffect.co.jp/react/front-react-back-node
何度かエラーになりつつもエラー内容を調べながら、行いましたが、
Herokuでコンパイルが出来ず、pushされないという以下の文章が出ます。

Failed to compile.

   TS7016: Could not find a declaration file for module 'styled-components'. '/tmp/build_e17f7a21/frontend/node_modules/styled-components/dist/styled-components.cjs.js' implicitly has an 'any' type.
     Try `npm i --save-dev @types/styled-components` if it exists or add a new declaration (.d.ts) file containing `declare module 'styled-components';`
     > 1 | import styled, { StyledComponent } from "styled-components"
         |                                         ^^^^^^^^^^^^^^^^^^^
       2 | import { Top } from "./components/Top";
       3 | import { Bottom } from "./components/Bottom";
       4 |
   
   

-----> Build failed

   We're sorry this build is failing! You can troubleshoot common issues here:
   https://devcenter.heroku.com/articles/troubleshooting-node-deploys
   
   If you're stuck, please submit a ticket so we can help:
   https://help.heroku.com/
   
   Love,
   Heroku
   

! Push rejected, failed to compile Node.js app.
! Push failed

VS codeではエラーが出ていませんが、Reactで制作したファイル内で指示通りのコマンドnpm i --save-dev @types/styled-componentsを行った後にReactをbuildして、nodeに紐づけたりなどしました。

しかし、一向に同じエラーが出ます。

解決方法をご教授していただければと存じます。

{
  "name": "catbot",
  "version": "1.0.0",
  "engines": {
    "node": "v16.14.2"
  },
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node backend/index.js",
    "heroku-postbuild": "cd frontend && npm install && npm run build"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "body-parser": "^1.20.0",
    "dotenv": "^16.0.1",
    "express": "^4.18.1",
    "nodemailer": "^6.7.5"
  }
}

{
  "name": "frontend",
  "version": "0.1.0",
  "private": true,
  "proxy": "http://localhost:3001",
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.1.1",
    "@testing-library/user-event": "^13.5.0",
    "@types/jest": "^27.4.1",
    "@types/node": "^16.11.29",
    "@types/react": "^18.0.7",
    "@types/react-dom": "^18.0.0",
    "axios": "^0.27.2",
    "react": "^18.2.0-next-d20c3af9d-20220506",
    "react-dom": "^18.2.0-next-d20c3af9d-20220506",
    "react-scripts": "5.0.1",
    "styled-components": "^5.3.5",
    "typescript": "^4.6.3",
    "typewriter-effect": "^2.18.2",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@types/react-typist": "^2.0.3",
    "@types/styled-components": "^5.1.25"
  },
  "peerDependencies": {
    "webpack": "^5.72.1"
  }
}

Answer 1

試しにnodeのファイル側で"npm i --save-dev @types/styled-components"を行い、
nodeのpackage.jsonが以下のようになりましたら、herokuへpushとデプロイができました。

"devDependencies": {
    "@types/styled-components": "^5.1.25"
  }