Admin Widgets and UI Routes are not displaying

[opeah]

Bug report

Describe the bug

I followed the documentation here here and here to add custom widgets and UI routes, but neither work.

The widget is not shown. Here is the code:

// src/admin/widgets/product-widget.tsx
import { defineWidgetConfig } from '@medusajs/admin-shared';

const ProductWidget = () => {
  return (
    <div>
      <h2>Product Widget</h2>
    </div>
  );
};

export const config = defineWidgetConfig({
  zone: `product.details.after`,
});

export default ProductWidget;

The page is not visible in the sidebar, and the URL returns a 404 error. However, if I remove defineRouteConfig, the page is still not visible in the sidebar, but I can access the page (no 404 error).

Here is the code:

// src/admin/routes/custom/page.tsx
import { defineRouteConfig } from '@medusajs/admin-shared';
import { Container } from '@medusajs/ui';

const CustomPage = () => {
  return <Container>This is my custom route</Container>;
};

export const config = defineRouteConfig({
  label: `Custom Route`,
});

export default CustomPage;

System information

Medusa version (including plugins): preview (latest) Node.js version: 20.16.0 Database: postgres@14 Operating system: macOS Browser (if relevant): Arc

Steps to reproduce the behavior

1. Bootstrap a new projet
2. Follow the documentation to add custom widget or ui route
3. Widget and page are not visible

Expected behavior

I should see the widget in the product page and the page in the sidebar

Additional context

I'm using pnpm. I followed the instructions from this issue to install dependencies, and everything is working perfectly.

[n3cr0murl0c]

I'm having the same problem. Using:

{
 "@medusajs/admin": "^7.1.11",
 "@medusajs/medusa": "^1.20.7"
}

Also on my front end on my store, using "medusa-react": "^9.0.15", breaks everything. medusa-react based on react-query +axios is no longer working. it returns errors saying theres not a mutationFnon the hooks, so it appears something broke on medusa-react and if medusajs/admin is using medusa-react then its carrying that error too.

For what i've been throubleshooting, medusajs/admin cant manage the cookies, is not presenting then when sending a request. It posts a login request, gets back a session cookie, but then doesnt log in, and everything return 401. Same problem i had with medusa-react, where the overall query context wont work. Eventually had to migrate from medusajs/admin and develop an admin panel for medusa using nextjs and nextauth to use medusa JWT powered auth service.

EDIT: regarding // src/admin/widgets/product-widget.tsx

import { defineWidgetConfig } from '@medusajs/admin-shared';

The currentl admin-shared gave me the same problem. had to fall back to the outdated guide where they use

import type { OrderDetailsWidgetProps, WidgetConfig } from "@medusajs/admin";

But then again it doesnt show the widget nor the routes. And this problem is recent, around 2-3 weeks back.

[kasperkristensen]

Hi @opeah,

Could you try changing:

export const config = defineWidgetConfig({
  zone: `product.details.after`,
});

to

export const config = defineWidgetConfig({
  zone: "product.details.after",
});

The same for the route, so change ` to ". The values you have provided for zone and label are template literals and not strings, so when we analyze your file to check if they have valid configs they are being rejected.

We will add a note on this to the documentation, and most likely also add a warning if we detect this.

[kasperkristensen]

@n3cr0murl0c you seem to be mixing code from v1 and V2, which won't work, as there have been some changes to how admin extensions work between the versions.

For your issue with medusa-react it seems like you are using a non-compatible version of @tanstack/react-query, properly version 5+, which introduced breaking changes, that means it does not work with medusa-react. As described in our documentation you need to use 4.22 - https://docs.medusajs.com/medusa-react/overview.

For your issue with cookies, there are many reasons why your cookie might not be set, you could be running your site in production on an unsecure protocol (http instead of https), the URL of your site is on the public suffix list, etc.

In any case please open a separate issue for these if you are still having trouble, as it's not related to the OP.

[n3cr0murl0c]

@n3cr0murl0c you seem to be mixing code from v1 and V2, which won't work, as there have been some changes to how admin extensions work between the versions.

For your issue with medusa-react it seems like you are using a non-compatible version of @tanstack/react-query, properly version 5+, which introduced breaking changes, that means it does not work with medusa-react. As described in our documentation you need to use 4.22 - https://docs.medusajs.com/medusa-react/overview.

For your issue with cookies, there are many reasons why your cookie might not be set, you could be running your site in production on an unsecure protocol (http instead of https), the URL of your site is on the public suffix list, etc.

In any case please open a separate issue for these if you are still having trouble, as it's not related to the OP.

Sorry for the mix up. I'll create another issue

[opeah]

Hi @kasperkristensen, Indeed it's working with quote, thanks for the help