実現したいこと
作ったアプリをrailwaysでデプロイさせて、リリースさせたい。
前提
Next.js 13、React、Socket.io、Prisma、Tailwind、MySQLでアプリを作っています。そのアプリをrailwaysでデプロイしようとしたら、以下のようなエラーメッセージが出ました。
発生している問題・エラーメッセージ
railways
138.42 ./components/chat/chat-messages.tsx:130:50 2 338.42 Type error: Property 'deleted' does not exist on type 'MessageWithMemberWithProfile'. Did you mean 'delete'? 4 538.42 6 738.42 128 | content={message.content} 8 938.42 129 | fileUrl={message.fileUrl} 10 1138.42 > 130 | deleted={message.deleted} 12 1338.42 | ^ 14 1538.42 131 | timestamp={format(new Date(message.createdAt), DATE_FORMAT)} 16 1738.42 132 | isUpdated={message.updatedAt !== message.createdAt} 18 1938.42 133 | socketUrl={socketUrl} 20 21----- 22 23 24 25Dockerfile:24 26 27------------------- 28 2922 | # build phase 30 3123 | COPY . /app/. 32 3324 | >>> RUN --mount=type=cache,id=s/324baff0-adff-4882-ba91-aef6e6037b62-next/cache,target=/app/.next/cache --mount=type=cache,id=s/324baff0-adff-4882-ba91-aef6e6037b62-node_modules/cache,target=/app/node_modules/.cache npm run build 34 3525 | 36 3726 | 38 39------------------- 40 41ERROR: failed to solve: process "/bin/bash -ol pipefail -c npm run build" did not complete successfully: exit code: 1 42 43 44 45Error: Docker build failed 46エラーメッセージ
該当のソースコード
React
1"use client"; 2 3import { Fragment, useRef, ElementRef } from "react"; 4import { format } from "date-fns"; 5import { Member, Message, Profile } from "@prisma/client"; 6import { Loader2, ServerCrash } from "lucide-react"; 7 8import { useChatQuery } from "@/hooks/use-chat-query"; 9import { useChatSocket } from "@/hooks/use-chat-socket"; 10 11import { ChatWelcome } from "./chat-welcome"; 12import { ChatItem } from "./chat-item"; 13import { useChatScroll } from "@/hooks/use-chat-scroll"; 14 15const DATE_FORMAT = "d MMM yyyy, HH:mm"; 16 17type MessageWithMemberWithProfile = Message & { 18 member: Member & { 19 profile: Profile 20 } 21} 22 23interface ChatMessagesProps { 24 name: string; 25 member: Member 26 chatId: string; 27 apiUrl: string; 28 socketUrl: string; 29 socketQuery: Record<string, string>; 30 paramKey: "channelId" | "conversationId"; 31 paramValue: string; 32 type: "channel" | "conversation"; 33} 34 35export const ChatMessages = ({ 36 name, 37 member, 38 chatId, 39 apiUrl, 40 socketUrl, 41 socketQuery, 42 paramKey, 43 paramValue, 44 type, 45}: ChatMessagesProps) => { 46 const queryKey = `chat:${chatId}`; 47 const addKey = `chat:${chatId}:messages`; 48 const updateKey = `chat:${chatId}:messages:update` 49 50 const chatRef = useRef<ElementRef<"div">>(null); 51 const bottomRef = useRef<ElementRef<"div">>(null); 52 53 const { 54 data, 55 fetchNextPage, 56 hasNextPage, 57 isFetchingNextPage, 58 status, 59 } = useChatQuery({ 60 queryKey, 61 apiUrl, 62 paramKey, 63 paramValue, 64 }); 65 useChatSocket({ queryKey, addKey, updateKey }); 66 useChatScroll({ 67 chatRef, 68 bottomRef, 69 loadMore: fetchNextPage, 70 shouldLoadMore: !isFetchingNextPage && !!hasNextPage, 71 count: data?.pages?.[0]?.items?.length ?? 0, 72 }) 73 74 if (status === "loading") { 75 return ( 76 <div className="flex flex-col flex-1 justify-center items-center"> 77 <Loader2 className="h-7 w-7 text-zinc-500 animate-spin my-4" /> 78 <p className="text-xs text-zinc-500 dark:text-zinc-400"> 79 Loading messages... 80 </p> 81 </div> 82 ) 83 } 84 85 if (status === "error") { 86 return ( 87 <div className="flex flex-col flex-1 justify-center items-center"> 88 <ServerCrash className="h-7 w-7 text-zinc-500 my-4" /> 89 <p className="text-xs text-zinc-500 dark:text-zinc-400"> 90 Something went wrong! 91 </p> 92 </div> 93 ) 94 } 95 96 return ( 97 <div ref={chatRef} className="flex-1 flex flex-col py-4 overflow-y-auto"> 98 {!hasNextPage && <div className="flex-1" />} 99 {!hasNextPage && ( 100 <ChatWelcome 101 type={type} 102 name={name} 103 /> 104 )} 105 {hasNextPage && ( 106 <div className="flex justify-center"> 107 {isFetchingNextPage ? ( 108 <Loader2 className="h-6 w-6 text-zinc-500 animate-spin my-4" /> 109 ) : ( 110 <button 111 onClick={() => fetchNextPage()} 112 className="text-zinc-500 hover:text-zinc-600 dark:text-zinc-400 text-xs my-4 dark:hover:text-zinc-300 transition" 113 > 114 Load previous messages 115 </button> 116 )} 117 </div> 118 )} 119 <div className="flex flex-col-reverse mt-auto"> 120 {data?.pages?.map((group, i) => ( 121 <Fragment key={i}> 122 {group.items.map((message: MessageWithMemberWithProfile) => ( 123 <ChatItem 124 key={message.id} 125 id={message.id} 126 currentMember={member} 127 member={message.member} 128 content={message.content} 129 fileUrl={message.fileUrl} 130 deleted={message.deleted}//ここにエラーが生じているようです。 131 timestamp={format(new Date(message.createdAt), DATE_FORMAT)} 132 isUpdated={message.updatedAt !== message.createdAt} 133 socketUrl={socketUrl} 134 socketQuery={socketQuery} 135 /> 136 ))} 137 </Fragment> 138 ))} 139 </div> 140 <div ref={bottomRef} /> 141 </div> 142 ) 143}
試したこと
エラー文の通りにdeletedをdeleteに変更してみたりしましたが、今度はテキストエディタの方にエラーがでたのでこの方法も違うようです。他にも、firebaseでデプロイしてみましたが、やはり同じ場所でエラーを吐いてしまったので根本を直さない限りデプロイ出来ない事も判明しました。
補足情報（FW/ツールのバージョンなど）
ここにより詳細な情報を記載してください。
該当のエラー文のみだけでは解決が難しい可能性もあるので、以下に該当のアプリのソースコードを公開してあるものを添付しますので、恐縮ですがこちらも見ていただきながら解決をお願いします。
https://github.com/yoshihitoishihara/discord-clone
0 コメント