Like what we’re doing? Star us on GitHub!

NX monorepo - payload is undefined

ShakedHad
11 months ago
1 1

Hi
I'm trying to configure Payload as an NX app, but when I'm trying to run payload.init, I receive an error that payload is undefined.

TypeError: Cannot read properties of undefined (reading 'init')
at /Users/shaked.hadas/Documents/Projects/d-suite/dist/apps/d-editor/webpack:/src/main.ts:16:9
at /Users/shaked.hadas/Documents/Projects/d-suite/dist/apps/d-editor/main.js:73:3
at Object. (/Users/shaked.hadas/Documents/Projects/d-suite/dist/apps/d-editor/main.js:78:12)
at Module._compile (node:internal/modules/cjs/loader:1103:14)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1155:10)
at Module.load (node:internal/modules/cjs/loader:981:32)
at Function.Module._load (node:internal/modules/cjs/loader:822:12)
at Function.Module._load (/Users/shaked.hadas/Documents/Projects/d-suite/packages/node/src/executors/node/node-with-require-overrides.ts:16:27)
at Module.require (node:internal/modules/cjs/loader:1005:19)
at require (node:internal/modules/cjs/helpers:102:18)

Reproducing the problem:

  • DanRibbens
    Payload Team
    11 months ago

    Hey @ShakedHad,

    I reproduced the problem you had and was able to get further in the setup by changing the tsconfig.app.json the to have two more settings in the compilerOptions, they are "esModuleInterop" set to true and strict set to false.
    With those changes my tsconfig.app.json is:

    {
      "extends": "./tsconfig.json",
      "compilerOptions": {
        "outDir": "../../dist/out-tsc",
        "module": "commonjs",
        "types": ["node", "express"],
        "esModuleInterop": true,
        "strict": false
      },
      "exclude": ["jest.config.ts", "**/*.spec.ts", "**/*.test.ts"],
      "include": ["**/*.ts"]
    }
    

    Mine still isn't starting so there is one more thing to finish out. The last thing will be to make sure that your payload.config.js is included in the dist. You might have to add to the tsconfig to make that transpile from .ts and then adding to your "start" script the path.

    Something like this should get you there after you make sure the payload.config.js is written to dist:
    "start": "SET PAYLOAD_CONFIG_PATH=dist/apps/nx-payload/payload.config.js && nx serve",
    and don't forget to replace "nx-payload" with your own app name.

    Hope that gets you closer and gives you an idea of what to fix. If you are still struggling, let us know!

    1 reply
  • ShakedHad
    11 months ago

    Thank you very much, it worked!

    I'm writing here the full configuration steps, for future references:

    1. Add these lines to tsconfig.app.json
    "esModuleInterop": true,
        "allowSyntheticDefaultImports": true,
        "strict": false
    
    1. In main.ts, update express import to
      import express from 'express';
    2. In project.json, add "webpackConfig": "apps/nx-payload/webpack.config.js" to targets.build.options
    3. Add file webpack.config.js:
    module.exports = (config, context) => {
      return {
        ...config,
        entry: {
          ...config.entry,
          config: './apps/nx-payload/payload.config.ts',
        },
        output: {
          ...config.output,
          filename: '[name].js',
        },
      };
    };
    
    1. npm install --save dotenv
    2. Add to main.ts
    import dotenv from 'dotenv';
    
    dotenv.config();
    
    1. Create file .env at the root of the nx app, with:
      PAYLOAD_CONFIG_PATH=./dist/apps/nx-payload/config.js

    That's it, it should work now.
    remember to replace nx-payload with your app name

Open the post
Continue the discussion in GitHub
Can't find what you're looking for?
Get help straight from the Payload team with an Enterprise License.Learn More