Files
Shahed Nasser e3e3c725db docs: triage issues + revamp troubleshooting guides (#14216)
* docs: triage issues + revamp troubleshooting guides

* small change
2025-12-04 17:12:48 +02:00

82 lines
2.4 KiB
Plaintext

export const metadata = {
title: `Admin Widget / UI Route Not Showing`,
}
# {metadata.title}
This troubleshooting guide covers common reasons why an admin widget or UI route may not be showing in your Medusa Admin and how to resolve them.
## Incorrect Zone
If you're adding an admin widget, make sure you're using a correct zone.
Refer to the [Admin Widget Injection Zones list](../../../admin-widget-injection-zones/page.mdx) for reference.
---
## Incorrect Function Definition
Widget and UI routes must be defined as arrow functions. Any other type of declaration isn't accepted.
Refer to the [Admin Development Constraints](!docs!/learn/fundamentals/admin/constraints) documentation for more details.
---
## Incorrect Type of Zone Value
A widget zone's value must be wrapped in double or single quotes:
```ts
export const config = defineWidgetConfig({
zone: "product.details.before",
})
```
Any other usage leads to the widget not being shown.
Refer to the [Admin Development Constraints](!docs!/learn/fundamentals/admin/constraints) documentation for more details.
---
## Errors in Docker
If you're using a Docker image to host your Medusa application, make sure that the image's root path is different than the Medusa Admin's `path` configuration.
For example, if your Docker image's root path is `/app`, make sure to change the `path` configuration in `medusa-config.ts`, as it's `/app` by default:
```ts title="medusa-config.ts"
module.exports = defineConfig({
admin: {
path: `/dashboard`,
},
// ...
})
```
---
## Uncaught SyntaxError: The request module does not provide an export named default
If you're using a third-party library that isn't ESM compatible, you might encounter this error in the console when you access the admin.
To resolve it, add the third-party library to `vite`'s `optimizeDeps` configuration in `medusa-config.ts`. For example:
```ts title="medusa-config.ts"
module.exports = defineConfig({
admin: {
vite: () => {
return {
optimizeDeps: {
include: ["qs"],
},
}
},
},
// ...
})
```
Where `qs` would be the third-party library you're using.
Learn more about the `optimizeDeps` configuration in the [Vite documentation](https://vite.dev/config/dep-optimization-options). Also, learn more about Medusa's admin configurations in [this documentation](!docs!/learn/configurations/medusa-config).