@theme-ui/global breaks when using with Vite.js define global config

[arantespp]

Describe the bug

When I have this configuration on vite.config.ts (it's a solution to use Vite.js with AWS Amplify as shown here):

export default defineConfig(async () => {
  return {
    define: {
      global: {},
    }
    ... // rest of config
  }
}

I got this error:

[vite]: Rollup failed to resolve import "@theme-ui/{}" from "/hdd1T/startup/ttoss/ttoss/node_modules/theme-ui/dist/theme-ui.esm.js".
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
`build.rollupOptions.external`
error during build:

It seems that whenever I use to define global, it replaces export { default as Global } from '@theme-ui/global'; on theme-ui/dist/theme-ui.esm.js. For example, if I use global: 'window' on vite.config.ts, the error message changes to:

[vite]: Rollup failed to resolve import "@theme-ui/window" from

To Reproduce
Steps to reproduce the behavior:

1. Clone https://github.com/ttoss/ttoss
2. Add { define { global: { } } on vite.config.ts
3. On the monorepo root, run yarn and yarn turbo run build.

Expected behavior

It shouldn't not replace the global from @theme-ui/global.

Additional context

If you're using { define { global: { } } to use with AWS Amplify, you can remove the config and add this script.

[hasparus]

I'm sorry, but this Amplify issue, not Theme UI issue.
It seems that the StackOverflow post you've linked was edited to include a proper solution.

optimizeDeps: {
  esbuildOptions: {
    define: {
      global: 'globalThis',
    },
  },
},

aws/aws-sdk-js#3673 (comment)
vitejs/vite#2878