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?

jarrod_not_jared
2 years 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?
zakoul2 years 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_not_jared
2 years ago
What’s your build script

zakoul2 years 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_not_jared
2 years ago
I think you need to set
"jsx": "preserve"
to
"jsx": "react"

Open

Continue the discussion in Discord

Star on GitHub

Star

Chat on Discord

Discord

online

Can't find what you're looking for?

Get dedicated engineering support directly from the Payload team.