@aws-amplify dependency issue with vite build

Question

I'm currently working on converting our React project over to use Vite. It is great for development so far but when we try to run vite build (npm run build), we run into the following issue with @aws-amplify

[commonjs--resolver] Unexpected token (97:27) in /Users/directoryPlaceholder/node_modules/@aws-amplify/pubsub/lib-esm/vendor/paho-mqtt.js
file: /Users/directoryPlaceholder/node_modules/@aws-amplify/pubsub/lib-esm/vendor/paho-mqtt.js:97:27
95:   }
96: })(this, function LibraryFactory() {
97:   var PahoMQTT = (function (global) {
                                ^
98:     // Private variables below, these are only visible inside the function closure
99:     // which is used to define the module.

Our vite.config.js already has the following configurations:

    define: {
        global: '({})',
    },
    resolve: {
        alias: {
            './runtimeConfig': './runtimeConfig.browser',
        },
    },

and in index.html, we have the following script:

<script>
  const isBrowser = () => typeof window !== "undefined";
  const isGlobal = () => typeof global !== "undefined";
  if (!isGlobal() && isBrowser()) {
    var global = window;
  }
</script>
<script type="module" src="/src/index.tsx"></script>

If anyone has any ideas on how to solve this we would be very grateful!

Answer 1

Removing this option from vite.config.ts fixed the issue

 define: {
        global: '({})',
    },