小编Tom*_*cks的帖子

我想使用 slug 中的 ID 查询我的 Supabase 表，localhost:3000/book/1然后在 Next.js 的页面上显示有关该书的信息。

桌子

书/[id].js

import { useRouter } from 'next/router'
import { getBook } from '@/utils/supabase-client';

export default function Book({bookJson}) {
  const router = useRouter()
  const { id } = router.query
  
  return <div>
    <p>Book: {id}</p>
    <h1>{bookJson}</h1>
  </div>
}

export async function getServerSideProps(query) {
  const id = 1 // Get ID from slug
  const book = await getBook(id);
  const bookJson = JSON.stringify(book)

  return {
    props: {
      bookJson
    }
  };
}

utils/supabase-client.js

export …

我的 next.js 应用程序在我的机器上运行，并且在部署在 Vercel 上时可以正常工作，但现在在 Vercel 上构建时失败并出现以下错误：

我试过删除 node_modules 并运行npm install几次，但没有任何乐趣。

任何帮助将不胜感激。谢谢！

运行“NPM运行构建” 20：43：24.926
tdwcks@1.0.0构建/ vercel / 5ccaedc9 20：43：24.926
下一个构建20：43：24.967
内部/模块/ CJS / loader.js：983 20：43：24.967
掷呃; 20:43:24.967
^ 20:43:24.967
错误：找不到模块“../build/output/log” 20:43:24.967
需要堆栈：20:43:24.967
- /vercel/5ccaedc9/node_modules/.bin/接下来 20:43:24.967
在 Function.Module._resolveFilename (internal/modules/cjs/loader.js:980:15) 20:43:24.967
在 Function.Module._load (internal/modules/cjs/loader.js:862 :27) 20:43:24.967
在 Module.require (internal/modules/cjs/loader.js:1042:19) 20:43:24.967
在需要 (internal/modules/cjs/helpers.js:77:18) 20:43:24.967
在对象。(/vercel/5ccaedc9/node_modules/.bin/next:2:46) 20:43:24.967
在 Module._compile (internal/modules/cjs/loader.js:1156:30) 20:43:24.967
在 Object.Module ._extensions..js (internal/modules/cjs/loader.js:1176:10) 20:43:24.967
at Module.load (internal/modules/cjs/loader.js:1000:32) 20:43:24.967
at Function.Module._load (internal/modules/cjs/loader.js:899:14) 20:43:24.967
在 Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:74:12) { 20:43 ：24.967 …

我有两个 redux 查询从我的 Firebase Firestore 中提取帖子。第一个成功显示了我关注的人的所有帖子：

export function fetchUsersFollowingPosts(uid) {
    return ((dispatch, getState) => {
        firebase.firestore()
            .collection("posts")
            .doc(uid)
            .collection("userPosts")
            .orderBy("creation", "asc")
            .get()
            .then((snapshot) => {
                const uid = snapshot.query.EP.path.segments[1];
                const user = getState().usersState.users.find(el => el.uid === uid);


                let posts = snapshot.docs.map(doc => {
                    const data = doc.data();
                    const id = doc.id;
                    return { id, ...data, user }
                })

                for (let i = 0; i < posts.length; i++) {
                    dispatch(fetchUsersFollowingLikes(uid, posts[i].id))
                }
                dispatch({ type: USERS_POSTS_STATE_CHANGE, posts, uid })

            })
    })
} …

我正在使用react-feather在组件中渲染图标。我可以通过硬编码来导入静态图标。但是如何让它根据道具中传递给它的内容来渲染图标呢IconLeft.icon？

import { Camera } from 'react-feather';
import React, { FunctionComponent } from 'react';

type HeaderProps = {
    title: string;
    iconLeft?: {
        icon?: string;
        url?: string;
        state?: string;
        label?: string;
    }
}

export const DefaultHeader: FunctionComponent<HeaderProps> = ({ title, iconLeft, iconRight}) => <header>
    <h1>{String}</h1>
    <Camera size={24} stroke-width={2}/>
</header>