Provide a more explanatory example project

Hi, thanks for your work.

I spent hours trying to customise a property in the list without any success, and I’d like some pointers.

My project uses

• nest.js
• typescript
• adminBro

I’m following the docs to the letter. In the configuration I added:

{ resource: styleModel, options: {
          properties: {
            parentId: {
              components: {
                list: AdminBro.bundle('./components/reference-in-list'),
              },
            }
          }
        } },

My ./components/reference-in-list is defined as the following:

import React from 'react'
import { InputGroup, Label } from '@admin-bro/design-system'
import { BasePropertyProps } from 'admin-bro'

const ReferenceInList: React.FC<BasePropertyProps> = (props) => {
  const { record, property } = props
  const value = record.params[property.name]

  return (
    <InputGroup>
      <Label>{property.name}</Label>
      {value}
    </InputGroup>
    )
}

export default ReferenceInList

All I got is an error:

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Is there any special configuration to add when using adminBro with nest.js? There are no docs on your website for using your product with nest.js and the example-app is very basic.

[maxpeterson]

After a bit more investigation I figured out why this wasn’t woking and how to get it to work.

What I originally failed to realise is that AdminBro.bundle expects the uncompiled component (in my case the .tsx file). I will say that again as it is not what I expected:

AdminBro.bundle expects the uncompiled component files

By using component: AdminBro.bundle('./components/company-index') it was finding the files in the dist folder where the tsx has been compiled by nestjs / tsc into js - this resulting js is not compatible with AdminBro.bundle. It is trying to use the version of react from the server not the browser!

By using component: AdminBro.bundle('../../../src/components/company-index') it was finding the files in the src folder where the uncompiled tsx file can be found and can be compiled and bundled byAdminBro.bundle. This is fine on my local dev environment … but not so good on the server (where src does not exist).

To fix this I had to setup nestjs to copy the tsx component files to the dist folder without compiling them, that way AdminBro.bundle can compile them and bundle them up correctly for use in the browser.

Here are the steps I followed to achieve this:

Update nest-cli.json compilerOptions.assets to copy the tsx component files from my admin-panel/components folder in src:

  "compilerOptions": {
    "assets": [
       "admin-panel/components/**"
    ]
  }

Updated tsconfig to exclude src/admin-panel/components (you need do this in tsconfig.build.json tsconfig.json depending on your setup )

 "exclude": [
    "src/admin-panel/components",
  ]

You also don’t need "jsx": "react", in the tsconfig compilerOptions if you are not compiling any tsx files with nestjs,

Finally I updated my AdminBro.bundle paths to be relative (without ../../src as suggested by @SimonB407 - which although it didn’t work I would never have figured this out without this hint so thanks again)

            components: {
              show: AdminBro.bundle('./components/resource-list-link'),
            }

Hope this helps someone else.

[dklymenk]

Thanks to @maxpeterson , I resolved the issue I had with user components not being bundled in prod build.

If anyone else is struggling with bundling of custom components in production, you can use my commit here as a reference.

If you’re struggling with nestjs+adminjs setup in general, I guess, you can use my repo for reference too. It’s not very clean and there is only one entity hooked up, but it should clear some things up, if you’re struggling.