Unable to Build Shopify Vite Project

Question

I am trying to use the Shopify Ruby Template (https://github.com/Shopify/shopify-app-template-ruby) along with the Shopify Post Purchase UI library: https://github.com/Shopify/post-purchase-ui

I have added the resolve section to vite but I am still unable to run the project. This is my Vite config:

  resolve: {
    preserveSymlinks: true,
    alias: {
      '@shopify/post-purchase-ui-extensions-react': '@shopify/post-purchase-ui-react'
    }
  },

When I do yarn dev I get the following error:

2023-06-17 18:43:12 │ frontend │   VITE v4.3.9  ready in 475 ms
2023-06-17 18:43:12 │ frontend │
2023-06-17 18:43:12 │ frontend │   ➜  Local:   http://127.0.0.1:54430/
2023-06-17 18:43:12 │ frontend │ ✘ [ERROR] Could not resolve "./build/esm/index"
2023-06-17 18:43:12 │ frontend │
2023-06-17 18:43:12 │ frontend │     ../../node_modules/@shopify/post-purchase-ui-react/index.mjs:1:14:
2023-06-17 18:43:12 │ frontend │       1 │ export * from "./build/esm/index";
2023-06-17 18:43:12 │ frontend │         ╵               ~~~~~~~~~~~~~~~~~~~
2023-06-17 18:43:12 │ frontend │
2023-06-17 18:43:12 │ frontend │ ✘ [ERROR] Could not resolve "./build/esm/ui-extensions/index"
2023-06-17 18:43:12 │ frontend │
2023-06-17 18:43:12 │ frontend │     ../../node_modules/@shopify/post-purchase-ui-react/ui-extensions.mjs:1:14:
2023-06-17 18:43:12 │ frontend │       1 │ export * from "./build/esm/ui-extensions/index";
2023-06-17 18:43:12 │ frontend │         ╵               ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
2023-06-17 18:43:12 │ frontend │

I have also posted this in the issues for the library but it looks like its not being watched by anyone. This has been driving me crazy for 3 days if anyone could help I would really appreciate it. I was able to get it working with webpack but I am trying to migrate my app to the new Shopify CLI 3.0

This is the config in webpack that works:

    resolve: {
        mainFields: [
            "esnext",
            "browser",
            "module",
            "main"
        ],
        extensions: [
            ".esnext",
            ".tsx",
            ".ts",
            ".jsx",
            ".mjs",
            ".js",
            ".sass",
            ".scss",
            ".css",
            ".module.sass",
            ".module.scss",
            ".module.css",
            ".png",
            ".svg",
            ".gif",
            ".jpeg",
            ".jpg"
        ],
        symlinks: false,
        alias: {
            '@shopify/post-purchase-ui-extensions-react': '@shopify/post-purchase-ui-react',
        }
    },

{
                test: /\.mjs$/,
                include: /node_modules/,
                type: "javascript/auto",
                resolve: {
                    fullySpecified: false
                }
            }