How to correctly import custom component?

zakoul

last month

6

import PriceInfoField, { OfferPriceInfoField } from './fields/PriceField';

...
{
  type: 'ui',
  name: 'offerPriceInfo',
  admin: {
    components: {
      Field: OfferPriceInfoField,
    },
  },
},

const PriceInfoField: React.FC<Props> = (props) => {

  return (
    <></>
  )
}

export default PriceInfoField;

• 

  Jarrod

  Payload Team

  last month

  In your dist folder, does that file exist? When you go to the file, is the import relative to where the config is in the dist?

• 

  zakoul

  last month

  Correct! In the production build, the file is correctly located in the dist-folder and the relative import is still correct folder-wise

• 

  Jarrod

  Payload Team

  last month

  What’s your build script

• 

  zakoul

  last month

  I'm using the Next.js combination example, my build scripts are:

  
  
  

  "build:next": "next build",
  "build:server": "tsc --project tsconfig.server.json",
  "build:payload": "payload build",
  "build": "cross-env NODE_ENV=production yarn build:payload && yarn build:server && yarn copyfiles:media && yarn build:next"

  
  
  

  for serving I use the standard

  
  

  "serve": "cross-env NODE_ENV=production PAYLOAD_CONFIG_PATH=dist/payload.config.js node dist/server.js"

  
  
  

  My tsconfig

  
  

  {
    "compilerOptions": {
      "esModuleInterop": true,
      "target": "es5",
      "lib": [
        "dom",
        "dom.iterable",
        "esnext"
      ],
      "allowJs": true,
      "skipLibCheck": true,
      "strict": false,
      "forceConsistentCasingInFileNames": true,
      "noEmit": true,
      "incremental": true,
      "jsx": "preserve",
      "module": "CommonJS",
      "moduleResolution": "node",
      "resolveJsonModule": true,
      "isolatedModules": true
    },
    "include": [
      "next-env.d.ts",
      "server.ts",
      "payload.config.ts",
      "**/*.ts",
      "**/*.tsx",
      "next.config.js"
    ],
    "exclude": [
      "node_modules"
    ],
    "ts-node": {
      "transpileOnly": true,
      "swc": true
    }
  }

  
  

  And Ts.server.config as referenced in the build script

  
  

  {
    "extends": "./tsconfig.json",
    "compilerOptions": {
      "module": "commonjs",
      "outDir": "dist",
      "noEmit": false,
    },
    "include": [
      "server.ts",
      "payload.config.ts",
    ]
  }

• 

  Jarrod

  Payload Team

  last month

  I think you need to set

  "jsx": "preserve"

  to

  "jsx": "react"