Widget 404 not found

[lexvz14]

Bug report

Describe the bug

I added a widget on the product details side section, but it results in a 404 on a production build. On running the dev build, it works fine.

GET https://xyz.abc.nl/app/@id/__x00__virtual:medusa/widgets/product/details/side/before net::ERR_ABORTED 404 (Not Found)

System information

Medusa version (including plugins): 2.0.6 Node.js version: 20.x Database: PostgreSQL Operating system: N/A Browser (if relevant): Chrome

Steps to reproduce the behavior

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior

Widget should be present and not cause 404

Screenshots

If applicable, add screenshots to help explain your problem

Code snippets

import { defineWidgetConfig } from "@medusajs/admin-sdk"
import { Container, Heading } from "@medusajs/ui"
import { 
  DetailWidgetProps, 
  AdminProduct,
} from "@medusajs/types"

// The widget
const ProductWidget = ({ 
  data,
}: DetailWidgetProps<AdminProduct>) => {
  return (
    <Container>
      <Heading level="h2">
        Product Widget {data.title}
      </Heading>
    </Container>
  )
}

// The widget's configurations
export const config = defineWidgetConfig({
  zone: "product.details.side.before",
})

export default ProductWidget

Additional context

Not sure if it matters, but I am using the MEDUSA_BACKEND_URL variable, set to my domain (https://xyz.abc.nl)

[lexvz14]

Some more context:

GET /app/@id/x00virtual:medusa/widgets/product/details/side/before WITHOUT widgets results in:

export default {
        widgets: [],
      }
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlx1MDAwMHZpcnR1YWw6bWVkdXNhL3dpZGdldHMvcHJvZHVjdC9kZXRhaWxzL3NpZGUvYWZ0ZXIiXSwic291cmNlc0NvbnRlbnQiOlsiZXhwb3J0IGRlZmF1bHQge1xuICAgICAgICB3aWRnZXRzOiBbXSxcbiAgICAgIH0iXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQztBQUNoQixDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUM7QUFDcEIsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMifQ==

If I add widgets: Cannot GET /app/@id/x00virtual:medusa/widgets/product/details/side/before

[lexvz14]

Updated to preview version 10, no changes (using admin-sdk package).

[lexvz14]

I found these error details:

2024-10-07T14:14:22.135453171Z 2:14:22 PM [vite] Internal server error: Failed to resolve import "/src/admin/widgets/product-labels.tsx" from "virtual:medusa/widgets/product/details/before". Does the file exist? 2024-10-07T14:14:22.135549252Z Plugin: vite:import-analysis 2024-10-07T14:14:22.135557012Z File: virtual:medusa/widgets/product/details/before:1:25 2024-10-07T14:14:22.135562412Z 1 | import WidgetExt0 from "/app/src/admin/widgets/product-labels.tsx"; 2024-10-07T14:14:22.135567412Z | ^ 2024-10-07T14:14:22.135571772Z 2 | export default { 2024-10-07T14:14:22.135576052Z 3 | widgets: [{ Component: WidgetExt0 }], 2024-10-07T14:14:22.135580812Z at TransformPluginContext._formatError (file:///app/node_modules/vite/dist/node/chunks/dep-CDnG8rE7.js:49193:41) 2024-10-07T14:14:22.135585852Z at TransformPluginContext.error (file:///app/node_modules/vite/dist/node/chunks/dep-CDnG8rE7.js:49188:16) 2024-10-07T14:14:22.135590692Z at normalizeUrl (file:///app/node_modules/vite/dist/node/chunks/dep-CDnG8rE7.js:63984:23) 2024-10-07T14:14:22.135595412Z at async file:///app/node_modules/vite/dist/node/chunks/dep-CDnG8rE7.js:64116:39 2024-10-07T14:14:22.135600012Z at async Promise.all (index 0) 2024-10-07T14:14:22.135604372Z at async TransformPluginContext.transform (file:///app/node_modules/vite/dist/node/chunks/dep-CDnG8rE7.js:64043:7) 2024-10-07T14:14:22.135609212Z at async PluginContainer.transform (file:///app/node_modules/vite/dist/node/chunks/dep-CDnG8rE7.js:49034:18) 2024-10-07T14:14:22.135614012Z at async loadAndTransform (file:///app/node_modules/vite/dist/node/chunks/dep-CDnG8rE7.js:51867:27) 2024-10-07T14:14:22.135618812Z at async viteTransformMiddleware (file:///app/node_modules/vite/dist/node/chunks/dep-CDnG8rE7.js:61824:24)

It looks as if it tries to import the original component, not the component in the dist folder. Could it be that the original component does not exist when this Vite process runs? Locally it does work as I have the original component in my IDE, but on a remote deployment the original code is not included in the build I believe.