Lightrun
question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[BUG] Server Side Rendering fails when using Gatsby

See original GitHub issue

Description/Screenshot

I’m using Gatsby to create a static website but when I attempted to generate the static HTML files from the React components the Server Side Rendering (SSR) fails in AppInsights:

"window" is not available during server side rendering.
[14/1691]
See our docs page for more info on this error: https://gatsby.dev/debug-html

   ReferenceError: window is not defined

   - render-page.js:8451 new AjaxMonitor
 /home/aaron/code/github/react-app-insights/AppInsights-Part2/public/render-page.js:8451:34

- render-page.js:10514 new Initialization
 /home/aaron/code/github/react-app-insights/AppInsights-Part2/public/render-page.js:10514:29

   - render-page.js:50798 Module../src/AppInsights.js
/home/aaron/code/github/react-app-insights/AppInsights-Part2/public/render-page.js:50798:306

  - render-page.js:30 __webpack_require__
   /home/aaron/code/github/react-app-insights/AppInsights-Part2/public/render-page.js:30:30

  - render-page.js:51172 Module../src/components/ProductSummary/index.js
   /home/aaron/code/github/react-app-insights/AppInsights-Part2/public/render-page.js:51172:70

   - render-page.js:30 __webpack_require__
   /home/aaron/code/github/react-app-insights/AppInsights-Part2/public/render-page.js:30:30

  - render-page.js:51433 Module../src/templates/ProductPage.js
  /home/aaron/code/github/react-app-insights/AppInsights-Part2/public/render-page.js:51433:84

   - render-page.js:30 __webpack_require__
   /home/aaron/code/github/react-app-insights/AppInsights-Part2/public/render-page.js:30:30

  - render-page.js:667 Object../.cache/sync-requires.js
 /home/aaron/code/github/react-app-insights/AppInsights-Part2/public/render-page.js:667:364

- render-page.js:30 __webpack_require__
   /home/aaron/code/github/react-app-insights/AppInsights-Part2/public/render-page.js:30:30

  - render-page.js:617 Module../.cache/static-entry.js
  /home/aaron/code/github/react-app-insights/AppInsights-Part2/public/render-page.js:617:1526

   - render-page.js:30 __webpack_require__
   /home/aaron/code/github/react-app-insights/AppInsights-Part2/public/render-page.js:30:30

  - render-page.js:94
   /home/aaron/code/github/react-app-insights/AppInsights-Part2/public/render-page.js:94:18

  - render-page.js:97
   /home/aaron/code/github/react-app-insights/AppInsights-Part2/public/render-page.js:97:10

  - render-page.js:3 webpackUniversalModuleDefinition
   /home/aaron/code/github/react-app-insights/AppInsights-Part2/public/render-page.js:3:20

   - render-page.js:10 Object.<anonymous>
/home/aaron/code/github/react-app-insights/AppInsights-Part2/public/render-page.js:10:3

Steps to Reproduce

  1. Create a new Gatsby website (using the default starter kit, or any others)
  2. Add AppInsights from npm + the React extension
  3. Run npm run build to generate the static output
  • OS/Browser: WSL2 (but confirmed failing on Windows)
  • SDK Version [e.g. 22]:
    "@microsoft/applicationinsights-react-js": "^2.3.0",
    "@microsoft/applicationinsights-web": "^2.3.0",
  • How you initialized the SDK: Following Basic Usage from the sample README.

Expected behavior

Gatsby is able to generate a set of static files.

Additional context

You’ll find a demo that the errors can be repo’ed in on my GitHub. Gatsby works fine when run using the development webserver.

Issue Analytics

  • State:open
  • Created 4 years ago
  • Comments:8 (6 by maintainers)

github_iconTop GitHub Comments

1reaction
t0ff3rcommented, Dec 2, 2020

@jasonnutter came across this issue. If you loadAppInsights() in gatsby-browser.js you avoid that window-problem aswell 😄

1reaction
MSNevcommented, Jun 9, 2020

It should indeed be using typeof to avoid the JS strict mode checking, just as is done in the dependencies @ https://github.com/microsoft/ApplicationInsights-JS/blob/master/extensions/applicationinsights-dependencies-js/src/ajax.ts#L54

Read more comments on GitHub >

github_iconTop Results From Across the Web

Troubleshooting Common Errors - Gatsby
If you encounter a webpack error that says Generating SSR bundle failed after installing a plugin and trying to run gatsby develop or...
Read more >
Gatsby Failed Build - error "window" is not available during ...
... SSR (Server-Side Rendering). This is because gatsby develop occurs in the browser (where there is a window ) while gatsby build occurs ......
Read more >
React Server Side Rendering Errors
Hi,. I am using MDB React Pro v4.8.7. My team uses SSR for all of our websites but I have been getting errors...
Read more >
Gatsby Changelog | 5.3.0
You might have run into an error like this while using Gatsby: ... It shows you how to use TypeScript, Server Side Rendering,...
Read more >
Error Boundaries - React
Server side rendering ; Errors thrown in the error boundary itself (rather than its children). A class component becomes an error boundary if...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found
Previous page

trackEvent API Reference Wrong?

Next page

Enable cookie support after the SDK has been initialized