NX monorepo - payload is undefined

[ShakedHad]

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:

• Create a new workspace
• Generate express app with nx g @nrwl/express:app test
• Install payload manually according to https://payloadcms.com/docs/getting-started/installation
  • npm i --save -
  • Create payload.config.ts
  • add payload.init({}) to main.ts

[DanRibbens]

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!

[ShakedHad]

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

2. In main.ts, update express import to
   import express from 'express';
3. In project.json, add "webpackConfig": "apps/nx-payload/webpack.config.js" to targets.build.options
4. 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',
    },
  };
};

5. npm install --save dotenv
6. Add to main.ts

import dotenv from 'dotenv';

dotenv.config();

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