XMLHttpRequest is not defined about nextjs-starter HOT 9 CLOSED

I ran into the same problem when i switched over my project to use yarn...I removed the now-logs dependency, which includes the xmlhttprequest-ssl package. You need that one...the ssl version: https://www.npmjs.com/package/xmlhttprequest-ssl
not the older xmlhttprequest package.

from nextjs-starter.

My app run on heroku. the strange thing is that when a user is logging and have a token in the local storage, the app crashes every some days and the error in the console is "XMLHttpRequest is not defined". it's possible to replace the XMLHttpRequest with fetch or axios?

from nextjs-starter.

I see now that when i remove the connect.sid cookie the app back to normal. any ideas?

from nextjs-starter.

Hmm I'm not sure what's going on here, I'll see if I can replicate on Heroku. It shouldn't be calling XMLHttpRequest on the server ever. Maybe something Heroku specific is going on.

The reason it uses XMLHttpRequest rather than fetch is interesting, it's actually to do with having HTTP Only cookies (that can't be read in JavaScript) while still supporting universal rendering.

It does this to provide a "best practice" example but actually it complicates authentication significantly,
and I'm considering if it's worth the hassle of supporting.

I'll investigate and get back to you.

from nextjs-starter.

Hi @kamish24six - tried deploying to Heroku, found an issue and fixed it - it's now working on Heroku.

The issue seemed to be that Heroku didn't know to run "next build" before running "next start" (required on production for Next.js apps).

I added "postinstall": "next build" to the package.json file under scripts.

The scripts section in package.json now looks like this:

  "scripts": {
    "test": "xo",
    "dev": "NODE_ENV=development PORT=3000 node index.js",
    "build": "next build",
    "start": "node index.js",
    "postinstall": "next build"
  },

I've confirmed I was able to deploy directly from GitHub to Heroku and log in so it should work for you now.

Note you will need to configure authentication via env vars. It's probably easiest to configure email authentication first, just to check it's all working. You don't need to configure a user database just for testing, but if you don't the database will just be erased every time you restart the service.

from nextjs-starter.

Thanks. In the past I succeeded to upload the project to heroku, and it works.Oftentimes it can suddenly stop working and and an XMLHttpRequest error appears. When ן delete the connect.sid cookie is starts working again.

from nextjs-starter.

Interesting! Thanks for the added detail.

I'm going to re-open this and see if I can replicate the problem.

from nextjs-starter.

Thanks to your bug report I think I have a fix for this rolled out now!

I did a review of all calls to XMLHttpRequest in the project (they are all in components/session.js) and there was one place where XMLHttpRequest could accidentally be called while running on the server (which it should never be).

It could happen when the client had an existing session, but it had expired on the server and then the page was reloaded on the client (e.g. with refresh, or by visiting the site again after a period of being idle). This explains why it didn't happen right away.

I do want to refactor this code, and I did get a pull request for that, but there were some issue with the PR and I had to revert the change unfortunately. Most of the complexity is caused by the code supporting HTTP Only cookies.

I will see what the browser support for fetch with credentials: 'same-origin' is like to see if it works with HTTP Only cookies in browsers now, and if so trying and merge that pull request back in - the code isn't that complex, but fetch is a terser and easier to read and debug.

Thanks for the bug report!

I'd appreciate any feedback if you still see this issue with version 4.2.7

from nextjs-starter.

Addendum: I've actually just gone ahead and refactored the Session class to use fetch now.

from nextjs-starter.