以下の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に紐づけたりなどしました。
しかし、一向に同じエラーが出ます。
解決方法をご教授していただければと存じます。
nodeのpackage.json
{ "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" } }
Reactのpackage.json
{ "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" } }
まだ回答がついていません
会員登録して回答してみよう