Semantic-ui-react: ReferenceError: window is not defined

[ochanje210]

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! [email protected] start: `NODE_ENV=production node build/server`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

[layershifter]

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

[lottamus]

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

[uicomponent]

+1

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)

[kien8995]

Thank @ilinyevg, I try this and it work !

const hasWindow =
typeof window === 'object' && window !== null && window.self === window;

Visibility.defaultProps = {
  context: hasWindow ? window : {},
  continuous: false,
  once: true
};

[arthur-nesterenko]

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 );
  } );
} );

[WoLfulus]

How's this going? Everything broke here :(

[ochanje210]

Falling back to 0.71.3 should be fine until this is fixed.

[WoLfulus]

I'm in a loop xD
Some features I use are broken in .3

I'll try the workarounds

[Maxhodges]

I'm getting an error related to "window is not defined" when deploying to gatsby.
https://www.gatsbyjs.org/docs/debugging-html-builds/

I see multiple issues about this here and lots of discussion. Is there any consensus regarding a solution? if so should we add something to the docs?

• https://github.com/Semantic-Org/Semantic-UI/issues/4146
• https://github.com/Semantic-Org/Semantic-UI-React/issues/1987
• https://github.com/Semantic-Org/Semantic-UI-React/issues/712

[layershifter]

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

[prateekrastogi]

@layershifter Any eta on when project maintainers are planning to do so?

[levithomason]

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

[denisov1985]

I still have this error in 0.72.0

scrollContext: typeof window === 'object' && window !== null && window.self === window ? window : {},

The code above fixed problem

[lookagit]

node V7.9.0
npm V4.2.0

[levithomason]

If users are having issues on the latest release, please open a new issue if there is not one already. The fields in the issue template are necessary for us to debug and ship fixes.

[curran]

Experiencing this error with SSR on version 0.75.1.

[moshest]

I add to webpack on the server side the following plugin:

  plugins: [
    // Define free variables
    // https://webpack.js.org/plugins/define-plugin/
    new webpack.DefinePlugin({
      window: undefined,
    }),
  ],

[levithomason]

We're happy to look at new issues posted against the latest version 0.77.0.