Unable to view a collection

default discord avatar
Taun
2 months ago
49

Hi. I've created a collection called PortfolioItems.ts in the collections folder and added it to the Payload config file. I've restarted the Payload server. It's not displaying in the Payload admin page? What am I doing wrong?


Repo:

https://github.com/taunhealy/PayloadHotel2


PortfolioItems collection is registered in the MongoDB database



It's not displaying in Payload admin panel

  • default discord avatar
    noheadphones
    2 months ago

    are the other types showing in the admin panel? @Taun

  • default discord avatar
    Taun
    2 months ago

    Pages, Media and User

  • default discord avatar
    noheadphones
    2 months ago

    are you running the correct project? right port and db creds? cause you dont have a

    User

    declared in this ^ config

  • default discord avatar
    Taun
    2 months ago

    Does this look right?



    MONGO_URL=mongodb+srv://taunhealy:<password>@cluster0.zpesqyk.mongodb.net/?retryWrites=true&w=majority



    With my password inserted



    The cluster on Mongo contains the PortfolioItems



    With no query items yet as I haven't submitted from Payload



    When i nav to localhost:3000 it used to return 404 error message, now it returns errror:



    "missing required error components, refreshing..."



    Maybe that is related



    image.png
  • default discord avatar
    noheadphones
    2 months ago

    Did you configure your localhosts for payload and next properly in the .env?



    As per the instructions to copy the .env.example

  • default discord avatar
    Taun
    2 months ago

    I think I renamed the env.example to env.



    Is this fine? NEXT_PUBLIC_SERVER_URL=

    http://localhost:3000

    PAYLOAD_PUBLIC_SERVER_URL=

    http://localhost:3000


    .env *



    PORT=3000 and my secret key is there



     import { buildConfig } from 'payload/config';
    import dotenv from 'dotenv';
    import Page from './collections/Page';
    import Media from './collections/Media';
    import PortfolioItems from './collections/PortfolioItems';
    
    dotenv.config();
    
    export default buildConfig({
      serverURL: process.env.PAYLOAD_PUBLIC_SERVER_URL,
      collections: [
        Page,
        Media,
        PortfolioItems,
      ],
    });
     
  • default discord avatar
    noheadphones
    2 months ago

    put them on different ports



    like next on 3001 and try again

  • default discord avatar
    Taun
    2 months ago

    as well as PORT:3001?



    Putting those 3 on 3001 returned no errors wihtin VScode, though browser returned "This site can’t be reachedlocalhost refused to connect."

  • default discord avatar
    noheadphones
    2 months ago

    oh actually i just read the original docs better, whats your output from

    yarn dev

    ?

  • default discord avatar
    Taun
    2 months ago
     
    
    npm run dev
    
    > payload-nextjs-server@0.0.1 dev
    > ts-node server.ts
    
    [10:30:56] INFO (payload): Connected to Mongo server successfully!
    [10:30:56] INFO (payload): Starting Payload...
    info  - Loaded env from C:\git\2160\PayloadHotel1\.env
    webpack built a9cb4e3b94061ca113e9 in 10522ms
    WARNING in ./node_modules/slate-react/dist/index.es.js 457:70-88
    export 'Scrubber' (imported as 'Scrubber') was not found in 'slate' (possible exports: Editor, Element, Location, Node, Operation, Path, PathRef, Point, PointRef, Range, RangeRef, Span, Text, Transforms, createEditor)
    
    WARNING in ./node_modules/slate-react/dist/index.es.js 602:75-93
    export 'Scrubber' (imported as 'Scrubber') was not found in 'slate' (possible exports: Editor, Element, Location, Node, Operation, Path, PathRef, Point, PointRef, Range, RangeRef, Span, Text, Transforms, createEditor)
    
    WARNING in ./node_modules/slate-react/dist/index.es.js 674:77-95
    export 'Scrubber' (imported as 'Scrubber') was not found in 'slate' (possible exports: Editor, Element, Location, Node, Operation, Path, PathRef, Point, PointRef, Range, RangeRef, Span, Text, Transforms, createEditor)
    
    WARNING in ./node_modules/slate-react/dist/index.es.js 4662:95-113
    export 'Scrubber' (imported as 'Scrubber') was not found in 'slate' (possible exports: Editor, Element, Location, Node, Operation, Path, PathRef, Point, PointRef, Range, RangeRef, Span, Text, Transforms, createEditor)
    
    WARNING in ./node_modules/slate-react/dist/index.es.js 4666:71-89
    export 'Scrubber' (imported as 'Scrubber') was not found in 'slate' (possible exports: Editor, Element, Location, Node, Operation, Path, PathRef, Point, PointRef, Range, RangeRef, Span, Text, Transforms, createEditor)
    
    webpack compiled with 5 warnings
    <w> [webpack.cache.PackFileCacheStrategy] Caching failed for pack: Error: No serializer registered for ConcatSource
    <w> while serializing webpack/lib/util/registerExternalSerializer.webpack-sources/ConcatSource -> Array { 2 items } -> ConcatSource 


    I used npm

  • default discord avatar
    noheadphones
    2 months ago

    i would actually recommend yarn, there are subtle differences in peer dependency resolutions where npm struggles



    that said run a

    yarn install

    again see if it changes this output, although none of it is an error

  • default discord avatar
    Taun
    2 months ago
     PS C:\git\2160\PayloadHotel1> yarn install
    yarn install v1.22.19
    warning package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files. To clear this warning, remove package-lock.json.
    [1/4] Resolving packages...
    [2/4] Fetching packages...
    [3/4] Linking dependencies...
    ( some warnings were here)
    
    error An unexpected error occurred: "EPERM: operation not permitted, copyfile 'C:\\Users\\taunh\\AppData\\Local\\Yarn\\Cache\\v6\\npm-ansi-regex-5.0.1-integrity\\node_modules\\ansi-regex\\package.json' -> 'C:\\git\\2160\\PayloadHotel1\\node_modules\\ansi-regex\\package.json'".
    info If you think this is a bug, please open a bug report with the information provided in "C:\\git\\2160\\PayloadHotel1\\yarn-error.log".
    info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.
    PS C:\git\2160\PayloadHotel1> 
  • default discord avatar
    linus
    2 months ago

    Also might be worth trying to make a GET request to

    /api/access

    to see if the collection shows up there



    https://payloadcms.com/docs/authentication/operations
  • default discord avatar
    Taun
    2 months ago

    Thanks, I'll try that



    3001 isn't working

    image.png
  • default discord avatar
    noheadphones
    2 months ago

    nah reverse the port to the initial, cause i think the setup in this case is meant to be a little different with the monorepo



    though I never tried running payload in a monorepo myself so idk of the caveats yet

  • default discord avatar
    Taun
    2 months ago

    It's back to returning this error. Strange because the first time i tried Payload it worked locally. I don't remember change those server URLs. What should they be?



    I'm going to start a fresh project

    image.png
  • default discord avatar
    noheadphones
    2 months ago

    I recommend you try a separate approach tbh, it'll make hosting easier for you as well


    https://github.com/payloadcms/website
    https://github.com/payloadcms/website-cms


    Sorta ^ complex templates but maybe it'll help you structure your codebase better from the start

  • default discord avatar
    Taun
    2 months ago

    Thanks, are these for Nextjs?



    Is this the right repo for a Nextjs project or is it adding server complexity?

    https://github.com/payloadcms/nextjs-custom-server


    After setting up a new project it's not displaying the PortfolioItems collection.



    I've gettting this error in the terminal:



    PS C:\git\2160\PayloadHotel2> yarn dev
    yarn run v1.22.19
    $ ts-node server.ts
    [11:09:00] INFO (payload): Connected to Mongo server successfully!
    [11:09:00] INFO (payload): Starting Payload...
    info  - Loaded env from C:\git\2160\PayloadHotel2\.env
    event - compiled client and server successfully in 3.3s (160 modules)
    uncaughtException [Error: EPERM: operation not permitted, open 'C:\git\2160\PayloadHotel2\.next\trace'] {
      errno: -4048,
      code: 'EPERM',
      syscall: 'open',
      path: 'C:\\git\\2160\\PayloadHotel2\\.next\\trace'
    }
    error Command failed with exit code 1.
    info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
  • default discord avatar
    noheadphones
    2 months ago

    This one is for running nextjs and payload on the same express server, which I think is a pretty

    niche

    setup



    I'd do them separately and just communicate between them via the APIs

  • default discord avatar
    Taun
    2 months ago

    Ok cool, so I can use this repo?

    https://github.com/payloadcms/website-cms
  • default discord avatar
    noheadphones
    2 months ago

    Yeah even if just for an example, but it's quite fully featured and has a strict adherence to good coding standards



    following the default getting started steps is also a good option

    https://payloadcms.com/docs/getting-started/installation


    you can choose a starter like todo or blog



    but it will be more bare than the example above ^

  • default discord avatar
    Taun
    2 months ago

    Thanks for the help. Later today I'll create a Next app and then install Payload via

    npm install --save --legacy-peer-deps payload


    yarn*



    I haven't resolved the issue yet. I'm curious as to what the problem is if anyone has experienced it?



    Resolved now - I created a fresh project, it returned some strange error missing Next trace or something, I restarted vscode and the server and it's working fine.

Open the post
Continue the discussion in Discord
Like what we're doing?
Star us on GitHub!

Star

Connect with the Payload Community on Discord

Discord

online

Can't find what you're looking for?

Get help straight from the Payload team with an Enterprise License.