How to integrate SvelteKit and payloadCMS to use Local Api in SSR

koakhlast year

4

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h to show help
4:37:59 AM [vite] page reload src/lib/server/payload.ts
4:37:59 AM [vite] page reload src/lib/server/index.ts
4:37:59 AM [vite] page reload src/hooks.server.ts
4:37:59 AM [vite] page reload src/app.html
[03:37:59] INFO (payload): Connected to MongoDB server successfully!
[03:37:59] INFO (payload): Starting Payload...
4:37:59 AM [vite] Error when evaluating SSR module /src/lib/server/payload.ts:
|- /mnt/storage/Home/Documents/Development/Svelte/SvelteKitPayloadCmsLocalApiSetup/src/lib/server/payload.config.ts:1
import { buildConfig } from 'payload/config';
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at internalCompileFunction (node:internal/vm:73:18)
    at wrapSafe (node:internal/modules/cjs/loader:1176:20)
    at Module._compile (node:internal/modules/cjs/loader:1218:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1308:10)
    at Module.load (node:internal/modules/cjs/loader:1117:32)
    at Module._load (node:internal/modules/cjs/loader:958:12)
    at Module.require (node:internal/modules/cjs/loader:1141:19)
    at require (node:internal/modules/cjs/helpers:110:...

• 

  alessiogr

  last year

  I think you need to adjust some things in your tsconfig so that it doesn't complain, since payload itself uses commonjs and not esmodules. Not sure if vite needs something as well

  
  
  

  If you ask chatgpt it should tell you what tsconfig flags it needs - try to experiment a bit with it. I can also check later what I used when I'm on my pc

  
  

  
  

  https://github.com/HanielU/sk-trpc-payload

  also worth to check this out. Your approach is interesting as you start payload from svelte. This repo does it the other way - starting sveltekit from payload

• 

  koakhlast year

  thanks @Alessio🍣

  
  

  this repo

  sk-trpc-payload

  is in my radar for a long time, I play with it a weeks ago, and its awesome

  
  

  greate work in this starter

  
  
  later I look at it again, and again
  
  

  I will try to figure it out from this repo and tweak

  tsconfig.ts

  , In fact I already try in yesterday, without success

  
  
  

  I have one stupid question about this project

  sk-trpc-payload

  
  
  

  why we have tRPC and GraphQL configured in same project?

  
  

  (with the awesome magic of houdini)

  
  

  for me is great, this way I can use one or another 🙂

  
  
  

  but must be a reason why we use GraphQL and LocalApi with tRPC .....

  
  

  (I Think tRPC is using P.ayloadCMS Local Api, but I dont look at it yet)

  
  

  ....in same project, just curious, but yes we can opt for one or another

  
  
  

  thanks fellow payloaders 🙂

  
  

  
  

  I can't figure out how to use the commonjs payload dependency with vite/sveltekit like @Alessio🍣 sugest,
  
  

  I found something related here in this link

  
  https://kit.svelte.dev/faq#packages
  

  but I'm not sure if is useful

  
  
  

  quote @Alessio🍣:

  I can also check later what I used when I'm on my pc
  

  @Alessio🍣 can you check in your pc for any clues, thanks budie

• 

  neo97last year

  Hey @koakh , i'm also trying to figure out how to integrate Local API with sveltekit.

  
  

  I had lots of problems like you're having, the solution i found was to use

  .cjs

  as the file extension for payload, and use

  .cjs

  for all collections files

• 

  koakhlast year

  hello @NEO97

  
  

  I try already use .cjs file extensions,

  
  

  in despair, but without success,

  
  

  do you have any example/repo that you can share?

  
  
  

  or want to tweak this example repo

  https://discord.com/channels/967097582721572934/1116758836204802189/1116767436025372752

  and send PR

  
  
  

  I think it will be very usefull for me and others to

  
  

  thanks for you precious help @NEO97

  
  

  
  

  I tried to change this files

  
  

  - src/lib/server/collections/Users.cjs

  
  

  - src/lib/server/payload.cjs

  
  

  - src/lib/server/payload.config.cjs (tried as .ts to)

  
  
  

  but same error, must admit that this is tricky.....any help will be appreciated 🙂

  
  

  
  

  seems that this is not a file extension solution, seems that it need some more tweaks for ex in tsconfig or vite config

  
  

  
  

  At last I think I already solve the problem,

  
  

  but the project is a bit hacked,

  
  
  

  we must use js in payload related stuff (cjs files), with requires and module.exports and other crazy stuff,

  
  

  in svelte we can use normal ts and svelte files

  
  
  

  but it works with bellow snippet....thays a start

  
  

  export const load = (async () => {
    const result = await payloadClient.find({
      collection: 'users',
      depth: 2,
      page: 1,
      limit: 10,
      // pass a `where` query here
      where: {},
      sort: '-title',
      locale: 'en',
      overrideAccess: false,
      showHiddenFields: true,
    });
    console.log(`result: [${JSON.stringify(result, undefined, 2)}]`);
    return result;
  }) satisfies PageServerLoad;

  
  

  when I have a more elegant way, maybe with cts files or a sort of

  
  

  I update my repo and leave a feedback here

  
  
  

  thanks