Amplify-js: "WINDOW NOT DEFINED"... again :-(

[lambda0xff]

Describe the bug
Importing the latest aws-amplify into a nuxt application crashes with a "Window not defined" error

To Reproduce
In a Nuxt Js application (and probably any SSR framework), try to import the latest aws-amplify

Expected behavior
Should not crash

Additional context
Most certainly a regression for #3477

My latest working config is with aws-amplify version 1.1.36
with the following resolutions in package.json:

  "resolutions": {
    "@aws-amplify/analytics": "1.2.23",
    "@aws-amplify/api": "1.0.42",
    "@aws-amplify/auth": "1.2.31",
    "@aws-amplify/cache": "1.0.32",
    "@aws-amplify/core": "1.1.0",
    "@aws-amplify/interactions": "1.0.35",
    "@aws-amplify/predictions": "1.0.3",
    "@aws-amplify/pubsub": "1.1.0",
    "@aws-amplify/storage": "1.1.0"
 }

[iamronsuez]

+1

[shabegom]

I am seeing the same error when trying to run a next js app.

[ error ] ReferenceError: window is not defined
    at Object.<anonymous> (.../node_modules/@aws-amplify/analytics/dist/aws-amplify-analytics.js:10:4)
    at Module._compile (internal/modules/cjs/loader.js:868:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:879:10)
    at Module.load (internal/modules/cjs/loader.js:731:32)
    at Function.Module._load (internal/modules/cjs/loader.js:644:12)
    at Module.require (internal/modules/cjs/loader.js:771:19)
    at require (internal/modules/cjs/helpers.js:68:18)
    at Object.<anonymous> (.../node_modules/@aws-amplify/analytics/index.js:6:19)
    at Module._compile (internal/modules/cjs/loader.js:868:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:879:10)
    at Module.load (internal/modules/cjs/loader.js:731:32)
    at Function.Module._load (internal/modules/cjs/loader.js:644:12)
    at Module.require (internal/modules/cjs/loader.js:771:19)
    at require (internal/modules/cjs/helpers.js:68:18)
    at Object.<anonymous> (.../node_modules/aws-amplify/lib/index.js:15:19)
    at Module._compile (internal/modules/cjs/loader.js:868:30)

[email protected] in package.json

[iamronsuez]

had to add the following resolution

"resolutions": {
    "@aws-amplify/analytics": "1.2.14",
    "@aws-amplify/api": "1.0.33",
    "@aws-amplify/auth": "1.2.22",
    "@aws-amplify/cache": "1.0.25",
    "@aws-amplify/core": "1.0.25",
    "@aws-amplify/interactions": "1.0.28",
    "@aws-amplify/pubsub": "1.0.26",
    "@aws-amplify/storage": "1.0.28",
    "@aws-amplify/ui": "1.0.18",
    "@aws-amplify/xr": "0.1.15"
  },

[achaphiv]

My project was only using @aws-amplify/auth.

The breakage happened between 1.4.2 and 1.4.3.

Here was the resolution for that:

  "dependencies": {
    "@aws-amplify/auth": "1.4.2"
  },
  "resolutions": {
    "@aws-amplify/core": "1.2.2",
    "@aws-amplify/cache": "1.1.2"
  },

[Amplifiyer]

I believe it is because Webpack 4 upgrade for all the packages from pull #4007. Earlier issue #3477 was with amplify-ui package which was the only one using webpack 4 at that time. I'll create a new pull request for setting globalObject: 'this' in library umd library output.

[chengjia080787]

Any progress on this ?

[Amplifiyer]

@chengjia080787 @achaphiv @iamronsuez @lambda0xff @shabegom, hi folks, the fix has been merged and releases as unstable, can you please test it and let us know if this issue is fixed?

[nigelwtf]

@Amplifiyer - will a stable version be released once the issue is confirmed as fixed? We've been experiencing this too, and have been following this thread waiting for this to be resolved :)

Happy to test it if needed.

[Amplifiyer]

@nigelwtf, yes, if you can test with the unstable release and let us know if it works that would be great!

[nigelwtf]

Confirmed working using @aws-amplify/api@^1.2.4-unstable.3 and @aws-amplify/auth@^1.4.4-unstable.3.

[anarerdene]

Confirmed working using @aws-amplify/api@^1.2.4-unstable.3 and @aws-amplify/auth@^1.4.4-unstable.3.

not working on me

@aws-amplify/core/dist/aws-amplify-core.js:10:4

my version is 1.2.4-unstable.5

[anarerdene]

Any update? or Any quick solution ?

[damien-monni]

Confirmed working using @aws-amplify/auth@^1.4.4-unstable.5.

Still not working, see my comment bellow.

[anarerdene]

"resolutions": {
    "@aws-amplify/analytics": "1.3.2",
    "@aws-amplify/core": "1.2.2",
    "@aws-amplify/cache": "1.1.2",
    "@aws-amplify/auth": "1.4.2",
    "@aws-amplify/storage": "1.2.2",
    "@aws-amplify/api": "1.2.2",
    "@aws-amplify/pubsub": "1.2.2",
    "@aws-amplify/interactions": "1.1.2",
    "@aws-amplify/predictions": "1.1.2",
    "@aws-amplify/ui": "1.1.2",
    "@aws-amplify/xr": "0.2.2"
  }

Window Not Defined
node_modules/aws-amplify-react/dist/aws-amplify-react.js:10:4

[damien-monni]

Actually it is not with @aws-amplify/auth@^1.4.4-unstable.5.

Auth.configure() throws an Error server side: Not supported from urlListener:

https://github.com/aws-amplify/amplify-js/blob/c28851a6379f3ba05c4fef529bb5be7f18ebe316/packages/auth/src/urlListener.ts#L24

If I copy the JS.browserOrNode() function in my code and execute it server side it works, so I guess this is broke in build step.

[anarerdene]

its 404 error ?

[achaphiv]

@Amplifiyer yep, it works for me.

Just using this one aws-amplify related dependency:

  "dependencies": {
    "@aws-amplify/auth": "1.4.4-unstable.5"
  },

[Amplifiyer]

@anarerdene, we have released a new stable release, please try that and let us know if that works for you. If not, feel free to open a new issue with more details.

[anarerdene]

@Amplifiyer , i installed new versions of Amplify and Amplify React. Window Not Defined Error is gone.

and now "navigator is not defined"

node_modules/@aws-amplify/analytics/dist/aws-amplify-analytics.js:38103:24

[lambda0xff]

Running a Nuxt Js app with the latest aws-amplify ("aws-amplify": "^1.2.4") I also get the "navigator is not defined" error.

In addition, there's a new Typescript issue; launching the app gives me the following in the console:

Could not find a declaration file for module 'graphql/language/ast'. '/Users/xxxxxx/Projects/xxxxxx/node_modules/@aws-amplify/api/node_modules/graphql/language/ast.js' implicitly has an 'any' type.
  Try `npm install @types/graphql` if it exists or add a new declaration (.d.ts) file containing `declare module 'graphql/language/ast';`
  > 1 | import { DocumentNode } from 'graphql/language/ast';
      |                              ^
    2 | /**
    3 |  * RestClient instance options
    4 |  */

After yarn add @types/graphql and adding declare module 'graphql/language/ast' to a typescript definition file, I get:

Cannot use namespace 'DocumentNode' as a type.
    43 | }
    44 | export interface GraphQLOptions {
  > 45 |     query: string | DocumentNode;
       |                     ^
    46 |     variables?: object;
    47 |     authMode?: GRAPHQL_AUTH_MODE;
    48 | }

Related to #2362 ?

[lambda0xff]

@Amplifiyer shouldn't this issue be reopened ?

[Blunderchips]

Still getting this issue.

[rkgrep]

@damien-monni Have you resolved the issue with browserOrNode() detection?
What helped for me is overriding the function behavior in my code by simply copying the source.

It seems that in my case the error happens because of webpack behavior.

import Amplify, { Auth, JS } from 'aws-amplify';

JS.browserOrNode = function () {
  const isBrowser = typeof window !== 'undefined' && typeof window.document !== 'undefined';
  const isNode = typeof process !== 'undefined' && process.versions != null && process.versions.node != null;
  return {
    isBrowser: isBrowser,
    isNode: isNode
  };
};

Amplify.configure({
  Auth: AuthConfig,
});
Auth.configure()

[praisegeek]

@rkgrep I am trying out your reference now and will revert back to you.

[achaphiv]

Why are you guys running this server-side?

plugins/aws-amplify.client.js

import Auth from '@aws-amplify/auth'

export default () => {
  Auth.configure({
    // whatever
  })
}

[alexofob]

I had the same issue on nextjs. Not Supported. AuthClass.configure error.

@rkgrep proposed solution above fixed.

Thanks a lot, @rkgrep

[powerfulj]

Solved with the same solution, thanks!

[damien-monni]

@damien-monni Have you resolved the issue with browserOrNode() detection?
What helped for me is overriding the function behavior in my code by simply copying the source.

No I haven't. I am still using old package versions to make it work:

"@aws-amplify/auth": "1.4.2",
"@aws-amplify/cache": "1.1.2",
"@aws-amplify/core": "1.2.2",

Why are you guys running this server-side?

plugins/aws-amplify.client.js

import Auth from '@aws-amplify/auth'

export default () => {
  Auth.configure({
    // whatever
  })
}

Because my app is server side rendered (next.js) and I need to know if my user is authenticated and refresh the token if needed to get full SSR.