Semantic-UI-React: ReferenceError: window is not defined

From the latest version: 0.71.5, server-side rendering produces following issue

/var/app/current/node_modules/semantic-ui-react/dist/commonjs/behaviors/Visibility/Visibility.js:260
  context: window,
           ^
ReferenceError: window is not defined
    at Object.<anonymous> (/var/app/current/node_modules/semantic-ui-react/dist/commonjs/behaviors/Visibility/Visibility.js:260:12)
    at Module._compile (module.js:569:30)
    at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:503:32)
    at tryModuleLoad (module.js:466:12)
    at Function.Module._load (module.js:458:3)
    at Module.require (module.js:513:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (/var/app/current/node_modules/semantic-ui-react/dist/commonjs/behaviors/Visibility/index.js:8:19)
    at Module._compile (module.js:569:30)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! snowy-console@1.0.0 start: `NODE_ENV=production node build/server`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the snowy-console@1.0.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

About this issue

Original URL
State: closed
Created 7 years ago
Reactions: 24
Comments: 18 (6 by maintainers)

Most upvoted comments

I do my best to make a release every weekend. Sometimes I don’t cause of life and free software 😃

+10

levithomason on Aug 28, 2017

Looks like the issue is coming from this commit: https://github.com/Semantic-Org/Semantic-UI-React/commit/e350886fbaad1f696b02cdd00b92852c5713df6f

Perhaps we should wrap the defaultProps “context”: window with an “isBrowser” check

lottamus on Aug 21, 2017

PRs are welcome. We already have isBrowser function to recognize if SSR is used.

layershifter on Aug 21, 2017

I have wrote temporary script for fix this, perhaps for somebody will be useful

const fs = require( 'fs' );

const visibilityFile = 'node_modules/semantic-ui-react/dist/commonjs/behaviors/Visibility/Visibility.js';
const stickyFile = 'node_modules/semantic-ui-react/dist/commonjs/modules/Sticky/Sticky.js';

fs.readFile( visibilityFile, 'utf8', function ( err, data ) {
  if ( err ) {
    return console.error( err );
  }
  const result = data.replace( 'context: window', 'context: typeof window === \'object\' && window !== null && window.self === window ? window : {}' );

  fs.writeFile( visibilityFile, result, 'utf8', function ( err ) {
    if ( err ) return console.error( err );
  } );
} );

fs.readFile( stickyFile, 'utf8', function ( err, data ) {
  if ( err ) {
    return console.error( err );
  }
  const result = data.replace( 'scrollContext: window', 'scrollContext: typeof window === \'object\' && window !== null && window.self === window ? window : {}' );

  fs.writeFile( stickyFile, result, 'utf8', function ( err ) {
    if ( err ) return console.error( err );
  } );
} );

arthur-nesterenko on Aug 25, 2017

Just wait until #1990 will be merged and released in new version.

layershifter on Aug 27, 2017

How’s this going? Everything broke here 😦

WoLfulus on Aug 27, 2017

ChrisNLott thanks for help!

I commented all changes from this commit (+two related comments in Sticky.js and Visibility.js) and my project start to work.

Hope it can help somebody)

uicomponent on Aug 21, 2017