Amplify-js: Getting the error of Window is not defined, after new installation of the node_modules with "youtube-iframe" package

[svenkatesh-nyros]

Describe the bug
After installation of the @aws-amplify with the additional package of youtube-iframe. Getting the error of window is not defined.

Screenshots
Please check the following screenshot of the error. The app is working with previous node_modules without youtube-iframe package inside.

You can turn on the debug mode to provide more info for us by setting window.LOG_LEVEL = 'DEBUG'; in your app.

[mdw2000]

I also came across that issue after upgrading aws-amplify to 1.1.29.

A workaround I'm using to get around it (I'm using amplify from Node backend) is to add the following polyfill before importing Amplify...this fixes that error but opens up some other issues involving AWS Pinpoint down the line..

const ws = require('ws');
(global as any).WebSocket = ws;
(global as any).window = (global as any).window || {
    setTimeout: setTimeout,
    clearTimeout: clearTimeout,
    WebSocket: ws,
    ArrayBuffer: global.ArrayBuffer,
    addEventListener: function () {
    },
    navigator: {onLine: true}
};
(global as any).localStorage = {
    store: {},
    getItem: function (key) {
        return this.store[key];
    },
    setItem: function (key, value) {
        this.store[key] = value;
    },
    removeItem: function (key) {
        delete this.store[key];
    }
};

[sammartinez]

@svenkatesh-nyros We did have an issue with the youtube-iframe npm package in the aws-analytics package yesterday that we ended up doing an unstable publish yesterday afternoon to fix. Please update to the unstable version and report back

[GeorgeBellTMH]

This resolved the issue, but now I am getting:

node -r esm ssr-server.js

/Users/georgebell/Desktop/Code/tmh-web/web/node_modules/@aws-amplify/ui/dist/aws-amplify-ui.js:1
ReferenceError: window is not defined
at Object. (/Users/georgebell/Desktop/Code/tmh-web/web/node_modules/@aws-amplify/ui/dist/aws-amplify-ui.js:1)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)

[svenkatesh-nyros]

@svenkatesh-nyros We did have an issue with the youtube-iframe npm package in the aws-analytics package yesterday that we ended up doing an unstable publish yesterday afternoon to fix. Please update to the unstable version and report back

@sammartinez .
I installed the "aws-amplify": "1.1.30-unstable.0" latest unstable version and checked the app. Now I am getting the following error.

ReferenceError: window is not defined
in the folder node_modules/@aws-amplify/ui/dist/aws-amplify-ui.js

Please check the following screenshot.

[artista7]

I thought I'm getting something wrong. But seems like this is one of the latest issues. Please get this fixed asap. I am using aws-amplify in lambda and the following error is coming :-
{
"errorType": "ReferenceError",
"errorMessage": "window is not defined",
"trace": [
"ReferenceError: window is not defined",
" at Object. (/var/task/node_modules/youtube-iframe/index.js:50:3)",
" at Module._compile (internal/modules/cjs/loader.js:701:30)",
" at Object.Module._extensions..js (internal/modules/cjs/loader.js:712:10)",
" at Module.load (internal/modules/cjs/loader.js:600:32)",
" at tryModuleLoad (internal/modules/cjs/loader.js:539:12)",
" at Function.Module._load (internal/modules/cjs/loader.js:531:3)",
" at Module.require (internal/modules/cjs/loader.js:637:17)",
" at require (internal/modules/cjs/helpers.js:22:18)",
" at Object. (/var/task/node_modules/@aws-amplify/analytics/lib/Providers/AmazonPersonalizeHelper/MediaAutoTrack.js:15:27)",
" at Module._compile (internal/modules/cjs/loader.js:701:30)"
]

[kim-ra]

Facing the same issue just getting started out with Amplify, does anyone happen to know workable versions to roll back to in the meantime to unblock?

[artista7]

Hey, meanwhile the error might be getting fixed, you can use individual amplify components in your app and use them like :-

const Amplify = require('@aws-amplify/core').default;
var API = require('@aws-amplify/api').default;
var { graphqlOperation } = require('@aws-amplify/api');
var Auth = require('@aws-amplify/auth').default;

[patrickcze]

Also having the same issue on a node app we are running on server only. Using the current unstable branch 1.1.30-unstable.0 is causing the following error which still seems related.

ReferenceError: window is not defined
    at Object.<anonymous> (/home/ec2-user/viva-api/node_modules/@aws-amplify/ui/dist/aws-amplify-ui.js:1:289)
    at Module._compile (module.js:652:30)
    at Object.Module._extensions..js (module.js:663:10)
    at Module.load (module.js:565:32)
    at tryModuleLoad (module.js:505:12)
    at Function.Module._load (module.js:497:3)
    at Module.require (module.js:596:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (/home/ec2-user/viva-api/node_modules/aws-amplify/lib/index.js:39:10)

[aldegoeij]

same here 1.1.30-unstable.1 also still giving window not defined for amplify-ui

[anarerdene]

Same. window is not defined node_modules/@aws-amplify/ui/dist/aws-amplify-ui.js:1:289.

how i fix this rly quick ?

[buithaibinh]

@anarerdene
If you not use @aws-amplify/ui module then you can remove this module.
I already did it and it work

I only add modules which i will use.
Example:

import Auth from '@aws-amplify/auth'
import Storage from '@aws-amplify/storage'
import API from '@aws-amplify/api'
import Analytics from '@aws-amplify/analytics'

[mkondel]

Here is an alternative quick fix, I only had to add 'resolutions' to my package.json. This is the source: https://github.com/aws-amplify/amplify-js/issues/3477

  "resolutions": {
    "@aws-amplify/ui": "1.0.19"
  },

[aldegoeij]

referencing tickets #3486, #3506, #3615, #3015, #876, #3477 and webpack/webpack#6522