Create component path variable for custom component and import in field will cause paylaod cli fail

chincheng4756last year

12

 admin: {
        components: {
            afterInput: [
                '/modules/common/components/field/to-upper-case-component/index.tsx'
            ]
        }
    }

import { toUpperCaseComponentPath } from "../../components/field/to-upper-case-component";

    admin: {
        components: {
            afterInput: [
                toUpperCaseComponentPath
            ]
        }
    }

//export const toUpperCaseComponentPath = await getCurrentComponentPath(import.meta.url)

export const toUpperCaseComponentPath = '/modules/common/components/field/to-upper-case-component/index.tsx' as const;

node:internal/process/promises:394
    triggerUncaughtException(err, true /* fromPromise */);
    ^
TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".css" for C:\Work\admin\node_modules\react-image-crop\dist\ReactCrop.css
    at Object.getFileProtocolModuleFormat [as file:] (node:internal/modules/esm/get_format:218:9)
    at defaultGetFormat (node:internal/modules/esm/get_format:244:36)
    at defaultLoad (node:internal/modules/esm/load:122:22)
    at async nextLoad (node:internal/modules/esm/hooks:748:22)
    at async load (file:///C:/Work/admin/node_modules/tsx/dist/esm/index.mjs?1741077641179:2:1762)       
    at async nextLoad (node:internal/modules/esm/hooks:748:22)
    at async Hooks.load (node:internal/modules/esm/hooks:385:20)
    at async handleMessage (node:internal/modules/esm/worker:199:18) {
  code: 'ERR_UNKNOWN_FILE_EXTENSION'
}

• 

  cashcodelast year

  I think you need to specify the path in here and not an import see (

  https://payloadcms.com/docs/custom-components/overview#defining-custom-components

  ).

  
  

  The paths are then used to generate the

  importMap

  which actually imports your component.

• 

  rubixvilast year

  your importmap is going to fail with the second

• 

  nils06488last year

  @474772813706821652

  this is from the docs.

  
  
  

  Component Paths
  
  In order to ensure the Payload Config is fully Node.js compatible and as lightweight as possible, components are not directly imported into your config. Instead, they are identified by their file path for the Admin Panel to resolve on its own.
  

  
  https://payloadcms.com/docs/custom-components/overview#component-paths
• 

  chincheng4756last year

  @795565624860344320

  the toUpperCaseComponentPath is a string variable which is export const toUpperCaseComponentPath = '/modules/common/components/field/to-upper-case-component/index.tsx' as const;

  
  
  

  the issue here is why it can only work if the path is in pure string instead of the string datatype variable

  
  
  

  i guess it can only work without using import variable, well this can cause a lot of redundant path name declaration, when directory structure change have to manually resolve by seeking through out source code

• 

  nils06488last year

  I think, I am missing something.

  
  
  

  This works for me:

  
  
  

  export const seedButtonPath = 'src/collections/Scheduler/components/seed-button#SeedButton'

  
  
  

  And importing it:

  
  
  

  ...
  import { seedButtonPath } from '@/collections/Scheduler/paths'
  ...
  
  const SchedulerUsers: CollectionConfig = {
    slug: 'scheduler-users',
    labels: {
      singular: 'Scheduler User',
      plural: 'Scheduler Users',
    },
    admin: {
      group: 'Scheduler',
      components: {
        beforeList: [seedButtonPath],
      },
      useAsTitle: 'name',
    },

• 

  chincheng4756last year

  this is first time import or the path already exist in importmap

  
  
  

  it will work if the impormap already register the path, then variable path will work just fine

  
  
  

  but if the path is not yet in importmap and you try using seedButtonPath variable directly in the beforeList, the importmap fail to pick it up

• 

  nils06488last year

  let me test that.

  
  
  

  it gives me the expected notification:

  
  
  

  getFromImportMap: PayloadComponent not found in importMap {
  key: 'src/collections/Scheduler/components/test-button#TestButton',
  PayloadComponent: 'src/collections/Scheduler/components/test-button#TestButton',
  schemaPath: ''
  } You may need to run the payload generate:importmap command to generate the importMap ahead of runtime.
  

  
  

  after running

  pnpm payload generate:importmap

  it works.

  
  
  

  ... but, I just checked your error. It says:

  
  
  

  TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".css" for C:\Work\admin\node_modules\react-image-crop\dist\ReactCrop.css
  

  so there is another problem.

  
  
  

  sorry, for taking your time.

• 

  chincheng4756last year

  thanks for trying out, may i know which version of payload you currently using?

  
  
  

  hmm i guess same error, i using npm so log may be a bit different but the main cause is the same

• 

  nils06488last year

  I am on

  3.24.0
  
  

  ❯ pnpm payload info | grep @payload
    @payloadcms/db-postgres: 3.24.0
    @payloadcms/email-nodemailer: 3.24.0
    @payloadcms/graphql: 3.24.0
    @payloadcms/live-preview: 3.24.0
    @payloadcms/live-preview-react: 3.24.0
    @payloadcms/next/utilities: 3.24.0
    @payloadcms/plugin-cloud-storage: 3.24.0
    @payloadcms/plugin-form-builder: 3.24.0
    @payloadcms/plugin-nested-docs: 3.24.0
    @payloadcms/plugin-redirects: 3.24.0
    @payloadcms/plugin-search: 3.24.0
    @payloadcms/plugin-seo: 3.24.0
    @payloadcms/richtext-lexical: 3.24.0
    @payloadcms/storage-s3: 3.24.0
    @payloadcms/translations: 3.24.0
    @payloadcms/ui/shared: 3.24.0

• 

  chincheng4756last year

  and also all the cli will fail cause of this error and unable to proceed with the cli command

  
  
  

  both of us is on the same version, i will update here once i try it in 3.25.0

• 

  nils06488last year

  save your current work in a branch and go back to the last known good. Then just test simplest test.

  
  
  

  this is my button

  
  
  

  export function TestButton() {
    return <button className="m-0">Test</button>
  }

  
  
  

  rest is in comments above.

• 

  chincheng4756last year

  after testing the path variable on the latest version, i think i found the work around, the path name declaration cannot be place on the same files as the component, it will work if create a additional file called path.ts then put the path variable inside, after that the cli npm run payload generate:importmap will run flawlessly

  @795565624860344320