How to correctly import custom component?

zakoul

8 months ago

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

  8 months ago

  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

  8 months ago

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

• 

  Jarrod

  8 months ago

  What’s your build script

• 

  zakoul

  8 months ago

  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

  7 months ago

  I think you need to set

  "jsx": "preserve"

  to

  "jsx": "react"