NX monorepo - payload is undefined

ShakedHad

last year

1 1

• Selected Answer
  

  DanRibbens

  Payload Team

  last year

  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

  last year

  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