Simplify your stack and build anything. Or everything.
Build tomorrow’s web with a modern solution you truly own.
Code-based nature means you can build on top of it to power anything.
It’s time to take back your content infrastructure.

Payload starts in another language and hangs on loading modal?

default discord avatar
Jakeylast year
41

I've just built and served payload on a server I've spun up on digital ocean.



Build ran fine but for some reason, it's in another language and a perpetual loading overlay shows up.



Any ideas on how to fix this? I'd like it to use English.

  • default discord avatar
    Jarrodlast year

    I think I have seen this when the cms domain is not in the CORS array. Is yours?

  • default discord avatar
    Jakeylast year

    I've

    just

    noticed a failed CORS request. I'll dig into that to confirm!



    I keep trying to derive the cors white list from an environment variable and i keep getting

    ERROR (payload): 1: "cors" does not match any of the allowed types

    as a result even though the types appear to be appropriate..



    The only values that seem to work are either a * or a direct definition of array of urls



    Ahh, looks like i needed to include the

    require('dotenv').config()

    in the payload.config.ts for it to work on build



    odd.. when i deploy that onto the server, it throws an error at run time basically saying it doesn't like that require where it is



    main.66b4d127b718a27ca406.js:78 Uncaught TypeError: n(...).config is not a function


    seems to grab other process.env values fine... just doesn't appear to like the CORS one i have



    so yeah, i'm kind of in a catch 22 atm. If i require the dotenv in payload.config.ts, it breaks at runtime. if i don't, the build fails because the values aren't going through

  • default discord avatar
    Jarrodlast year

    This seems odd, I have projects that do this. Hmmmmm I wonder what’s up here

  • default discord avatar
    Jakeylast year

    was able to get it to build consistently using

    cross-env $(cat .env | xargs)

    in the build command. it still does not work when it comes to runtime. It's making me wonder how this worked in the first place lol



    oh, I guess in the first place I wasn't trying to use an environment variable in the payload.config.ts



    if i just set

    cors

    directly to

    "*"

    it all runs fine

  • default discord avatar
    thisisnotchrislast year

    Have you tried learning Polish?



    /s
  • default discord avatar
    Jakeylast year

    lol



    i was curious what language it was



    starting to feel like it might just be easier to have multiple payload.config.ts's and just run separate build/start scripts with hardcoded values

  • default discord avatar
    thisisnotchrislast year

    I recently got that same .config error



    It was because I used the dotenv in a collection

  • default discord avatar
    Jakeylast year

    I guess that's the pattern here. payload seems to handle .env variables fine on the server side, but on the client it breaks atm.

  • default discord avatar
    thisisnotchrislast year

    Hmm



    I wonder since Payload uses webpack



    Can you just update your webpack config?



    plugins: [
      new webpack.DefinePlugin({
        'process.env': {
          'NODE_ENV': '"production"'
        }
      })
    ]


    And specify your client env vars like that?



    https://webpack.js.org/plugins/environment-plugin/
  • default discord avatar
    Jakeylast year

    my brain always hurts when I try to debug webpack, lol. that's a good point though



    do you think it would be in the webpack override in the admin property? so like



    export default buildConfig({
      admin: {
        webpack: (config) => {
          return {
            ...config,
            plugins: [
              new webpack.DefinePlugin({
                'process.env': {
                  'NODE_ENV': '"production"'
                }
              })
            ]
          }
        }
      }
    })


    the webpack thing is still over my head atm, but I did try creating environment specific payload configs and those seem to work



    still coming through in polish though



    also finding that after I create that initial user, I can't change the language

  • default discord avatar
    thisisnotchrislast year

    @Jakey That setup looks good to me, did it work?

  • default discord avatar
    Jakeylast year

    no, i think an error was thrown. i've been grinding at this for so long that going with my current workaround atm



    hm.. i updated the cors to include the qa domain i have itself.. not sure why it's still coming back with unauthorized requests. can't save anything



    it definitely created the first user though



    i emptied my collection in the db, recreated initial user, and it swapped to english from there



    maybe something about how digital ocean starts up your collections makes it so payload thinks you prefer polish



    one thing that might relate to this is this note on the docs


    Important:
    This file is included in the Payload admin bundle, so make sure you do not embed any sensitive information.

    https://payloadcms.com/docs/configuration/overview

    So I wonder if there is supposed to be an alternate way to get .env values where you need them in payload.

  • default discord avatar
    Jarrodlast year

    @jmikrut do you have any thoughts here?

  • default discord avatar
    Jakeylast year

    this issue kind of branched out. I guess the current answer to my original question is:



    The modal will hang if your CORS settings isn't correct


    The initial language

    might

    be derived from the original state of your mongo db for some reason.



    I'll consider this answered and start a new thread on my current issue.

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..