How to correctly import custom component?

default discord avatar
zakoul
last month
6

When adding a custom component to my collection, I need to change the file extension to .tsx. It seems that this can't be imported into the collection on build time.



Using

yarn dev

everything works as expected, but after building, I get the following error:



unhandledRejection Error: Cannot find module './fields/PriceField'

My collection looks as follows:



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

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


My custom component is exported in the

/collections/fields/PriceField

as follows (of course with more content):



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

  return (
    <></>
  )
}

export default PriceInfoField;


What am I missing? I have jsx and tsx in my eslint-config for resolvers included.



How to correctly import custom component?

  • discord user avatar
    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?

  • default discord avatar
    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

  • discord user avatar
    Jarrod
    Payload Team
    last month

    What’s your build script

  • default discord avatar
    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",
      ]
    }
  • discord user avatar
    Jarrod
    Payload Team
    last month

    I think you need to set

    "jsx": "preserve"

    to

    "jsx": "react"
Open the post
Continue the discussion in Discord
Like what we're doing?
Star us on GitHub!

Star

Connect with the Payload Community on Discord

Discord

online

Can't find what you're looking for?

Get help straight from the Payload team with an Enterprise License.