rubixvilast year
parts of my code to help you

import type { AdminViewServerProps } from "payload"

const Analytics: React.FC<AdminViewServerProps> = ({

initPageResult,

params,

searchParams,

}) => {

return (

<DefaultTemplate

i18n={initPageResult.req.i18n}

locale={initPageResult.locale}

params={params}

payload={initPageResult.req.payload}

permissions={initPageResult.permissions}

searchParams={searchParams}

user={initPageResult.req.user || undefined}

visibleEntities={initPageResult.visibleEntities}

>

<Gutter>

<div className="twp mb-10">

</div>

</Gutter>

</DefaultTemplate>

)

}

export default Analytics

you need to define that page's view
tan5085last year
what's the import for DefaultTemplate?
rubixvilast year
https://payloadcms.com/docs/custom-components/custom-views
import { DefaultTemplate } from '@payloadcms/next/templates'

basically you just need to wrap your userprofile page with the view components
tan5085last year
I used the code you gave me
rubixvilast year
are you getting a blank page right now?
tan5085last year
yeah this is just a blank page

http://localhost:3000/admin/user-profile

TypeError: Cannot read properties of undefined (reading 'length')
rubixvilast year
looks right so far
tan5085last year
honestly I have no clue what could be issue

can copy paste or give you the code?
rubixvilast year
if you want

or if you've already setup a git for it
tan5085last year
what's your email? will see if I'm admin, can try add you in

its on someone elses repo

or i can zip the entire codebase here

or even the files 🤷‍♂️
rubixvilast year
seems like what you're doing is right, have you tried doing payload generate:importmap just incase?

give me a second i'll look at it anyways
tan5085last year
oh you were messaging here lol

let me re-try that, i did do it

No new imports found, skipping writing import map

you're on the right branch right?

https://github.com/plexidigital/kyzenfit/tree/feat/wip-custom-view

feat/wip-custom-view
rubixvilast year
i'm just going to just add that to my project see what it gives me
tan5085last year
thanks bro
rubixvilast year
yeah i know whats wrong
tan5085last year
😮
rubixvilast year
you're typing in /admin/user-profile directly in the top right
tan5085last year
yeah, isnt that what we are meant to do?
rubixvilast year
try adding the view to your menu, and then try accessing it
tan5085last year
I have it here in my menu, let me show you

in "AfterNav"
rubixvilast year
custom menu right let me see

tan5085last year

this error

 ⨯ TypeError: Cannot read properties of undefined (reading 'length')
    at Array.find (<anonymous>) {
  digest: '3239912238'
}

rubixvilast year
hold on a minute

tan5085last year

yes?

GET http://localhost:3000/admin/user-profile 500 (Internal Server Error)

rubixvilast year
yeah i got it to work on my end with both types of views that you've done but i'm just checking something
tan5085last year
seriously? wonder why it doesn't work on my one 🤣
rubixvilast year
that link might not be passing the required data for the component to load
tan5085last year
hmm, thats odd.

I just want to open a blank page

i did put some text into the page though

<div className="twp mb-10">hello world</div>
rubixvilast year
this is adding in # with the function name to the i,[prt
tan5085last year
ah let me try it your way
rubixvilast year
that loads without using the link
tan5085last year
let me copy/paste these files into my project

rubixvilast year

import type { AdminViewServerProps } from 'payload'

import { Gutter } from '@payloadcms/ui'
import React from 'react'

export function MyCustomView({ initPageResult }: AdminViewServerProps) {
  const {
    req: { user },
  } = initPageResult

  if (!user) {
    return <p>You must be logged in to view this page.</p>
  }

  return (
    <Gutter>
      <h1>Custom Default Root View</h1>
      <p>This view uses the Default Template.</p>
    </Gutter>
  )
}

tan5085last year
I'm losing my sanity here 😆

how did you access that page? did you click anywhere or access in the browser directly
rubixvilast year
for that one i just typed it in my browser search

ddint use a link
tan5085last year

i'm sure I copied exactly, unless I made a mistake somewhere
rubixvilast year
still getting the same error?
tan5085last year
yep
rubixvilast year
try one thing close the app and restarting it
tan5085last year
yeah I tried to re-gen the types, importmap etc

its so odd

just doesn't make sense 🤔

I'm using the website template, could that be doing something is what I'm wondering now

rubixvilast year

// src/components/CustomUserProfile/index.tsx
import { Gutter } from "@payloadcms/ui";
import type { AdminViewProps } from "payload";

export default function MyCustomView(props: AdminViewProps) {
  const { user } = props;

  if (!user) {
    return <p>You must be logged in to view this page.</p>;
  }

  return (
    <Gutter>
      <h1>Custom User Profile</h1>
      <p>This is a server-rendered admin view.</p>
    </Gutter>
  );
}

try this instead

        profile: {
        Component: "@/components/CustomUserProfile",
        path: "/user-profile",
    },

probably see you must be logged in to view

tan5085last year
no luck either, what if I give you my .env file?

you can clone the repo down, might be easier to be honest!
rubixvilast year
already cloned it down
tan5085last year
@654031862146007055
If you have time, would you be able to take a look? Me and
@187775044921982976
haven't had much luck for some reason for something that looks like it should be working. I can add you into the github repo
zed0547last year
Hey
@779697870722695180

I don't have time right now but will get back to this in the afternoon when I'm at my office!

Will check back in soon! Thanks for your patience
tan5085last year
No worries bro
@654031862146007055
just give me your email and I’ll send you an invite to the repository, it might be worth you cloning it down, as me and
@187775044921982976
spent hours looking at it with no luck

mrnoa2last year

export default buildConfig({
  admin: {
    user: Users.slug,
    importMap: {
      baseDir: path.resolve(dirname),
    },
    components: {
      views: {
        userProfile: {
          path: '/user-profile',
          Component: '@/frontend/components/UserProfile',
        },
      },
      afterNavLinks: ['@/frontend/components/UserProfileLink'],
    },
  },

// path to this file is: src/frontend/components/UserProfile.tsx
import type { AdminViewServerProps } from 'payload';

import { DefaultTemplate } from '@payloadcms/next/templates';
import { Gutter } from '@payloadcms/ui';
import React from 'react';

const UserProfileView = ({ initPageResult, params, searchParams }: AdminViewServerProps) => {
  return (
    <DefaultTemplate
      i18n={initPageResult.req.i18n}
      locale={initPageResult.locale}
      params={params}
      payload={initPageResult.req.payload}
      permissions={initPageResult.permissions}
      searchParams={searchParams}
      user={initPageResult.req.user || undefined}
      visibleEntities={initPageResult.visibleEntities}
    >
      <Gutter>
        <h1>Custom Default Root View</h1>
        <p>This view uses the Default Template.</p>
      </Gutter>
    </DefaultTemplate>
  );
};

export default UserProfileView;

// path to this file is: src/frontend/components/UserProfileLink.tsx
import React from 'react';
import Link from 'next/link';

const UserProfileLink: React.FC = () => {
  return (
    <div className="nav-item" style={{ padding: '0 15px' }}>
      <Link href="/admin/user-profile" className="nav-link">
        User Profile
      </Link>
    </div>
  );
};

export default UserProfileLink;

run

npm run generate:importmap

if needed

rubixvilast year
Did all that mate, nothing different here.
mrnoa2last year
sometime we need to remove .next
rubixvilast year
also done mate

that was all trailed already
tan5085last year
It’s a really odd bug 🐞 we tried all of these
@1059731838232440912
zed0547last year
@187775044921982976
So it works on your end? But it doesn't work for
@779697870722695180
?
tan5085last year
didnt work for either of us in my codebase (i use website template)
rubixvilast year
Works in my project, not in his

Kind of felt like it was something to do with his users or user data

as i stripped all his middleware to see if that was causing anything. did a full package update on his setup

the error that came out of it was .length so kind of felt like it's either not registering a user or it's registering multiple users
zed0547last year
@779697870722695180
It's your custom dashboard component

Sorry for the late reply btw

Build out your user profile view, then comment out your custom dashboard component

Works for me using your project
rubixvilast year
he probably built the custom dash components incorrectly
tan5085last year
Ahhh okay, you're right!
@654031862146007055

I disabled the dashboard and now I can see the custom view (user profile)... however how do I "fix" the dashboard then?
@187775044921982976

I re-arranged the order and it seems to be working ?! maybe that was it all along 😱

thanks for everyones help, much appreciated amigos! Happy to buy anyone a coffee, just hit me up
zed0547last year
Yeah this may be a bug in Payload

Was meaning to look into it
tan5085last year
I’m convinced it has to be a bug

Open

Continue the discussion in Discord

Star on GitHub

Star

Chat on Discord

Discord

online

Can't find what you're looking for?

Get dedicated engineering support directly from the Payload team.