custom logout button works sometimes and sometimes generates an error

[radiant thunder]

I added a custom logout button to my admin panel.

// src/components/Logout/index.tsx
import React from 'react';
import { env } from '../../env'

const Logout: React.FC = () => {
  return (
    <a
      href={`${env.APP_PUBLIC_URL}/auth/logout`}
      className="px-4 py-2 bg-red-600 text-white rounded hover:bg-red-700 transition-colors"
    >
      Logout
    </a>
  );
};

export default Logout;

In my admin config, I added it as shown in the docs (https://payloadcms.com/docs/custom-components/overview#defining-custom-components):

  admin: {
    user: Users.slug,
    importMap: { baseDir: path.resolve(dirname) },
    components: {
      logout: {
        Button: '/components/Logout',
      },
    },
  },

Sometimes it works fine and sometimes I get this error:

https://nextjs.org/docs/messages/module-not-found


 ⨯ ./CMS/src/app/(payload)/importMap.js:25:1
Module not found: Can't resolve 'CMS/src/components/Logout'
  23 | import { SlugComponent as SlugComponent_92cc057d0a2abb4f6cf0307edf59f986 } from '@/fields/slug/SlugComponent'
  24 | import { TenantField as TenantField_1d0591e3cf4f332c83a86da13a0de59a } from '@payloadcms/plugin-multi-tenant/client'
> 25 | import { default as default_48020f3667ddea7ceca78c6415f50ac2 } from 'CMS/src/components/Logout'
     | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  26 | import { TenantSelector as TenantSelector_1d0591e3cf4f332c83a86da13a0de59a } from '@payloadcms/plugin-multi-tenant/client'
  27 | import { TenantSelectionProvider as TenantSelectionProvider_d6d5f193a167989e2ee7d14202901e62 } from '@payloadcms/plugin-multi-tenant/rsc'

I can fix it by regenerating the importMap and restarting my dev server. But that's not a nice solution.

Any idea what the reason could be?

[wraith moon]

New Community-Help Thread Created!

Help is on the way! To mark it as solved, use the /solve command. In the meantime, here are some existing threads that may help you:

Documentation:

• Root Components - Components - logout.Button
• Custom Features - Client Feature
• Custom Features - Server Feature - Feature load order
• Custom Features - Client Feature - Toolbar groups - Custom buttons toolbar group
• Root Components - Config Options

[radiant thunder]

figured it out myself

I changed following:

• named export instead of default export
• added #Logout at the end of the path
• what I believe made the real difference, is adding @ in front of the path, to make use of typescript alias imports.

Now it works fine with :

admin: {
    user: Users.slug,
    importMap: { baseDir: path.resolve(dirname) },
    components: {
      logout: {
        Button: '@/components/Logout#Logout',
      },
    },
  },

This example from the website template was very useful: https://github.com/payloadcms/payload/blob/main/templates/website/src/Footer/config.ts