sveltejs/sapper

ReferenceError: window is not defined when import Amplify from "aws-amplify" within script tags

Closed this issue · 3 comments

asmajlovicmars commented

Describe the bug
This used to work fine, and still works in another Sapper project, but we started a new project couple days ago and started getting errors just when importing AWS Amplify component. Not even doing anything with it.

Logs

✔ server (2.1s)
✔ client (2.4s)
webpack:///./node_modules/isomorphic-unfetch/browser.js?:1
module.exports = window.fetch || (window.fetch = webpack_require(/*! unfetch / "./node_modules/unfetch/dist/unfetch.mjs").default || webpack_require(/! unfetch */ "./node_modules/unfetch/dist/unfetch.mjs"));
^

ReferenceError: window is not defined
at eval (webpack:///./node_modules/isomorphic-unfetch/browser.js?:1:18)
at Object../node_modules/isomorphic-unfetch/browser.js (/Users/asmajlovic/code/o3/sapper/dev/server/server.js:11755:1)
at webpack_require (/Users/asmajlovic/code/o3/sapper/dev/server/server.js:21:30)
at eval (webpack:///./node_modules/amazon-cognito-identity-js/es/Client.js?:3:76)
at Module../node_modules/amazon-cognito-identity-js/es/Client.js (/Users/asmajlovic/code/o3/sapper/dev/server/server.js:9692:1)
at webpack_require (/Users/asmajlovic/code/o3/sapper/dev/server/server.js:21:30)
at eval (webpack:///./node_modules/amazon-cognito-identity-js/es/CognitoUserPool.js?:3:65)
at Module../node_modules/amazon-cognito-identity-js/es/CognitoUserPool.js (/Users/asmajlovic/code/o3/sapper/dev/server/server.js:9776:1)
at webpack_require (/Users/asmajlovic/code/o3/sapper/dev/server/server.js:21:30)
at eval (webpack:///./node_modules/amazon-cognito-identity-js/es/index.js?:23:74)

Server crashed
✔ service worker (20ms)

To Reproduce
Please make sure you've tested with the latest versions of Svelte and Sapper. Yes, tested it with the latest versions of Svelte, Sapper, and Webpack (4.7) and got the same error.

npx degit "sveltejs/sapper-template#webpack" webpack-sapper-app
cd my-app
add "aws-amplify": "^3.0.24" to package.json. This version works in another project, but also tried the latest version with same results.
add import Amplify from "aws-amplify"; to Nav.svelte

Nav.svelte:
`

<script> export let segment; import Amplify from "aws-amplify"; </script>

`
npm run dev

To help us help you, if you've found a bug please consider the following:

  • If possible, we recommend creating a small repo that illustrates the problem.
  • Reproductions should be small, self-contained, correct examples – http://sscce.org.

Occasionally, this won't be possible, and that's fine – we still appreciate you raising the issue. But please understand that Svelte is run by unpaid volunteers in their free time, and issues that follow these instructions will get fixed faster.

Expected behavior

Same code still works in another Sapper application, without any issues. This is a new project, and this is expected to work. For the test purpose tested it in React, and it also works as expected.

Information about your Sapper Installation:

  • The output of npx envinfo --system --npmPackages svelte,sapper,rollup,webpack --binaries --browsers

    System:
    OS: macOS 10.15.6
    CPU: (12) x64 Intel(R) Core(TM) i9-8950HK CPU @ 2.90GHz
    Memory: 2.67 GB / 32.00 GB
    Shell: 5.0.18 - /usr/local/bin/bash
    Binaries:
    Node: 14.7.0 - ~/.nvm/versions/node/v14.7.0/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.14.7 - ~/.nvm/versions/node/v14.7.0/bin/npm
    Browsers:
    Chrome: 85.0.4183.102
    Firefox: 76.0.1
    Safari: 13.1.2
    npmPackages:
    sapper: ^0.28.0 => 0.28.5
    svelte: ^3.17.3 => 3.24.1
    webpack: ^4.7.0 => 4.44.1

package.json that works in another project, but doesn't work with this one:
"devDependencies": {
"@beyonk/svelte-notifications": "^2.0.3",
"aws-amplify": "^3.0.24",
"aws-sdk": "^2.703.0",
"dotenv": "8.2.0",
"lodash": "^4.17.15",
"moment": "^2.24.0",
"npm-run-all": "^4.1.5",
"sapper": "^0.27.12",
"svelte": "^3.20.1",
"svelte-icons": "2.1.0",
"svelte-loader": "^2.13.6",
"svelte-select": "^3.7.0",
"svelte-simple-modal": "^0.4.2",
"webpack": "^4.44.1"
}

latest default package.json (doesn't work with aws-amplify):
"devDependencies": {
"npm-run-all": "^4.1.5",
"sapper": "^0.28.0",
"svelte": "^3.17.3",
"svelte-loader": "^2.9.0",
"webpack": "^4.7.0",
"webpack-modules": "^1.0.0",
"aws-amplify": "^3.0.24"
}

  • Your browser

  • Your hosting environment (i.e. Local, GCP/AWS/Azure, Vercel/Begin, etc...)
    AWS, but this test fails even locally

  • If it is an exported (npm run export) or dynamic application

npm run dev, but it is exported (not supposed to use ssr).

Severity
How severe an issue is this bug to you? Is this annoying, blocking some users, blocking an upgrade or blocking your usage of Sapper entirely?

It's blocking the project, and have to resolve it, but so far haven't managed to identify why this error is happening. Usually, this kind of an error if it was in Svelte (window is not defined) would've been solved by wrapping the code into if (process.browser) {}, but not sure what's going on here ...

Note: the more honest and specific you are here the more we will take you seriously.

Additional context
Add any other context about the problem here.

Conduitry commented

Please fix your Markdown formatting, and please provide a clonable repo that reproduces this.

In any case, the issue is likely to be that you need to use a dynamic import of the library only on the client, if merely importing the library attempts to run code that window exists.

benmccann commented

You could try pinning different versions of dependencies or loading amplify only in the client. This is highly unlikely to be a bug in sapper, so I'm going to close this. We can revisit if you find information showing that there's definitively an issue in Sapper