railwayでデプロイしようとしたらエラーが出ました

実現したいこと

作ったアプリを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

Refrain

2024/03/20 08:54

テキストエディタでのエラーも共有お願いします。基本は`Message`に実装している`delete`を使うはずですので、修正は正しいように見えます。

行動規範の内容に同意します

回答1件

ベストアンサー

schema.prismaにはMessage#deleteが、chat-item.tsxにはChatItemProps#deletedが定義されており、名前が不一致状態のようです。
片方をdeletedにするとMessage側が、deleteにするとChatItemProps側がプロパティを見付けられずにエラーになっているのではないでしょうか？
プロパティ名を揃えるのはいかがでしょうか。

投稿2024/03/20 09:02

Refrain

総合スコア527