global is not defined error when trying to import aws-amplify/storage

Question

node v20.11.1 | git version 2.44.0.windows.1 | npm 10.5.0 | amplify 12.10.1 | aws-cli/2.15.26 Python/3.11.8 Windows/10 exe/AMD64 prompt/off | windows 10

I've been having this problem on my main project so I decided to create a new one to test and still get the same problem. I am using quasar framework with vue 3 if that helps.

Whenever I try to use import {} from 'aws-amplify/storage'; I get this error: ReferenceError: global is not defined at node_modules/@aws-amplify/storage/node_modules/buffer/index.js.

When I use import {} from "aws-amplify/auth"; and import {} from "aws-amplify/api"; they do not give the error and the api queries work as well as the auth.

I've followed the amplify documentation to setting up my project.

I looked at node_modules > @aws-amplify > storage > node_modules > buffer > index.js and I've found the word global mentioned only twice and it looks like this:

 * We detect these buggy browsers and set `Buffer.TYPED_ARRAY_SUPPORT` to `false` so they
 * get the Object implementation, which is slower but behaves correctly.
 */
Buffer.TYPED_ARRAY_SUPPORT = global.TYPED_ARRAY_SUPPORT !== undefined
  ? global.TYPED_ARRAY_SUPPORT
  : typedArraySupport()

Code of my IndexPage.vue from newly created project:

<template>
  <q-page class="flex flex-center">
    <img
      alt="Quasar logo"
      src="~assets/quasar-logo-vertical.svg"
      style="width: 200px; height: 200px"
    />
  </q-page>
</template>

<script setup>
import { generateClient } from "aws-amplify/api";
import { fetchAuthSession } from "aws-amplify/auth";
import { uploadData } from "aws-amplify/storage";
</script>

My main index.js file found in src > router > index.js:

import { route } from "quasar/wrappers";
import {
  createRouter,
  createMemoryHistory,
  createWebHistory,
  createWebHashHistory,
} from "vue-router";
import routes from "./routes";
import { Amplify } from "aws-amplify";
import amplifyconfig from "src/amplifyconfiguration.json";

Amplify.configure(amplifyconfig);
/*
 * If not building with SSR mode, you can
 * directly export the Router instantiation;
 *
 * The function below can be async too; either use
 * async/await or return a Promise which resolves
 * with the Router instance.
 */

export default route(function (/* { store, ssrContext } */) {
  const createHistory = process.env.SERVER
    ? createMemoryHistory
    : process.env.VUE_ROUTER_MODE === "history"
    ? createWebHistory
    : createWebHashHistory;

  const Router = createRouter({
    scrollBehavior: () => ({ left: 0, top: 0 }),
    routes,

    // Leave this as is and make changes in quasar.conf.js instead!
    // quasar.conf.js -> build -> vueRouterMode
    // quasar.conf.js -> build -> publicPath
    history: createHistory(process.env.VUE_ROUTER_BASE),
  });

  return Router;
});

and my amplifyconfiguration.json - src > amplifyconfiguration.json:

{
  "aws_project_region": "ap-southeast-2",
  "aws_cognito_identity_pool_id": "ap-southeast-2:xxx",
  "aws_cognito_region": "ap-southeast-2",
  "aws_user_pools_id": "ap-southeast-2_xxx",
  "aws_user_pools_web_client_id": "xxx",
  "oauth": {},
  "aws_cognito_username_attributes": [],
  "aws_cognito_social_providers": [],
  "aws_cognito_signup_attributes": [
    "EMAIL"
  ],
  "aws_cognito_mfa_configuration": "OFF",
  "aws_cognito_mfa_types": [
    "SMS"
  ],
  "aws_cognito_password_protection_settings": {
    "passwordPolicyMinLength": 8,
    "passwordPolicyCharacters": []
  },
  "aws_cognito_verification_mechanisms": [
    "EMAIL"
  ],
  "aws_user_files_s3_bucket": "testprojectstorage115825-dev",
  "aws_user_files_s3_bucket_region": "ap-southeast-2",
  "aws_appsync_graphqlEndpoint": "https://xxx.appsync-api.ap-southeast-2.amazonaws.com/graphql",
  "aws_appsync_region": "ap-southeast-2",
  "aws_appsync_authenticationType": "API_KEY",
  "aws_appsync_apiKey": "xxx"
}