Amplify / Vue3 / Vuetify missing 'global' variable - Uncaught ReferenceError: global is not defined

[jmarshall9120]

Before opening, please confirm:

• I have searched for duplicate or closed issues and discussions.
• I have read the guide for submitting bug reports.
• I have done my best to include a minimal, self-contained set of instructions for consistently reproducing the issue.

JavaScript Framework

Vue

Amplify APIs

Not applicable

Amplify Categories

Not applicable

Environment information

# Put output below this line
  System:
    OS: Windows 10 10.0.22000
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Memory: 13.90 GB / 31.74 GB
  Binaries:
    Node: 16.17.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.4 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 8.15.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 113.0.5672.127
    Edge: Spartan (44.22000.120.0), Chromium (113.0.1774.57)
    Internet Explorer: 11.0.22000.120
  npmPackages:
    @aws-amplify/ui-vue: ^3.1.18 => 3.1.18
    @mdi/font: 7.0.96 => 7.0.96
    @vitejs/plugin-vue: ^3.0.3 => 3.2.0
    aws-amplify: ^5.2.4 => 5.2.4
    core-js: ^3.29.0 => 3.30.2
    eslint: ^8.37.0 => 8.41.0
    eslint-plugin-vue: ^9.3.0 => 9.14.1
    pinia: ^2.0.0 => 2.1.3
    roboto-fontface: * => 0.10.0
    sass: ^1.62.1 => 1.62.1
    vite: ^4.2.0 => 4.3.9
    vite-plugin-vuetify: ^1.0.0 => 1.0.2
    vue: ^3.2.0 => 3.3.4
    vue-router: ^4.0.0 => 4.2.1
    vue3-easy-data-table: ^1.5.42 => 1.5.42
    vuetify: ^3.0.0 => 3.3.1
    webfontloader: ^1.0.0 => 1.6.28
  npmGlobalPackages:
    @aws-amplify/cli: 11.1.1
    @vue/cli-service-global: 4.5.17
    @vue/cli: 4.5.11
    browserify: 17.0.0
    gulp-cli: 2.3.0
    gulp-exec: 5.0.0
    npm-install-all: 1.1.21
    pnpm: 7.9.3
    sass: 1.32.4
    webpack-cli: 4.5.0

Describe the bug

Starting server after boot strapping site with vuetify / vue / amplify, causes an error that prevents the site from loading. The error is in the aws packages.

Here's the file where it looks for the global variable

Here's the auth module where it gets bundled from:

Note there is a previous ticket for this issue #678

You can see that recently a number of people have brought up this issue again, so it is a bug that is back.

The work around there by @mclean25 allowed me to load the site.

Found a better better fix for Vite Projects. Edit the vite.config.[js/ts] file with the following:

export default defineConfig({
  define: {
    "global": {},
  },
});

This issue should probably be opened again and resolved.

Expected behavior

The site should run after bootstrapping without amplify packages breaking the build.

Reproduction steps

Bootstrap

yarn create vuetify
cd ./MyProject
amplify init
## I added Auth, and API here and pushed but I don't think it matters

Add amplify to main.js

// Components
import App from './App.vue'

// Composables
import { createApp } from 'vue'

// Plugins
import { registerPlugins } from '@/plugins'

// Amplify
import {Amplify} from 'aws-amplify'
import awsExports from './aws-exports'
import AmplifyVue from '@aws-amplify/ui-vue'

Amplify.configure(awsExports)

const app = createApp(App)

registerPlugins(app)


app.use(AmplifyVue)

app.mount('#app')

Run

yarn dev

Code Snippet

// Put your code below this line.

Log output

// Put your logs below this line

aws-exports.js

No response

Manual configuration

No response

Additional configuration

No response

Mobile Device

No response

Mobile Operating System

No response

Mobile Browser

No response

Mobile Browser Version

No response

Additional information and screenshots

No response

[nadetastic]

Related to #9639

[nadetastic]

Hi @jmarshall9120 thank you for opening this issue. We are currently tracking this bug on issue #9639 as well as working to better document configuration for Vite and other bundlers. The recommend usage for vite can be found at https://ui.docs.amplify.aws/vue/getting-started/troubleshooting but will be consolidated soon in a better vite/bundler specific location.

I'll go ahead and close this issue out in favor or #9639

Thanks!