'window is not defined' error when importing

[micchyboy]

Why am I getting an error

node_modules/svg-injector/svg-injector.js:464 }(window, document)); ^ ReferenceError: window is not defined

I just installed and imported
import ReactSVG from 'react-svg';

Throws me the error.

[tanem]

@micchyboy can you provide more context please? In particular, where are you trying to run your app? (e.g. browser?)

[hect1c]

I get the same issue. I am trying to run my app in the browser, and I set it into my component. But once it reloads I get the error. Not sure what further information you require but I get the same error as @micchyboy just from the import itself.

[tanem]

@hect1c code samples, or even better, isolated failing examples always help.

At the moment, all I have to go on is the fact that both of your basic imports are throwing an error. I've created my own examples using the lib build, and they're working fine along with the published example and the test suite.

Since other users are not reporting such a fundamental issue (see #14 that was closed a day or so ago), it sounds like something to do with either or both of your setups that I'm not familiar with. This could include things like how you're bundling your app.

Beyond that it feels like I'm guessing too much, so anything extra you can provide will help me diagnose and hopefully fix the issue faster for you both.

[tcompart]

This error is also on our side. When we compile the ECMAScript 6 Code with Babel in webpack.

The stacktrace looks then like this:

/data/checkout/is24/commercial-search-frontend/node_modules/svg-injector/svg-injector.js:464
}(window, document));
  ^

ReferenceError: window is not defined
    at Object.<anonymous> (/data/checkout/is24/commercial-search-frontend/node_modules/svg-injector/svg-injector.js:464:3)
    at Module._compile (module.js:571:32)
    at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:488:32)
    at tryModuleLoad (module.js:447:12)
    at Function.Module._load (module.js:439:3)
    at Module.require (module.js:498:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/data/checkout/is24/commercial-search-frontend/node_modules/react-svg/lib/index.js:17:20)
    at Module._compile (module.js:571:32)

[tanem]

Thanks @tcompart, that's what I was thinking it might be.

Be good to hear back from someone once it's sorted, even if it's just to share a snippet of webpack config, so the solution can be found in future 👍

[kaifaust]

UPDATE: I found another library that doesn't error when rendered on the server. I've actually really enjoyed using react-svg on a lot of projects, but had to adopt this because I'm not sure how to solve this particular issue. https://github.com/jhamlet/svg-react-loader

UPDATE 2: See below, 2.1.19 fixes the problem.

I get this error when trying to build a static site with Gatbsy. Anyone working on a solution or know of an alternative svg tool that can handle windowless rendering?

$ gatsby build
Generating CSS
Generating Static HTML
Failed at generating HTML

/Users/my_username/my_repo/node_modules/gatsby/dist/bin/cli.js:42
      throw err;
      ^
Error: ReferenceError: window is not defined
    at Object.<anonymous> (render-page.js:30848:4)
    at __webpack_require__ (render-page.js:30:30)
    at Object.isLocal (render-page.js:30273:21)
    at __webpack_require__ (render-page.js:30:30)
    at Object.defineProperty.value (render-page.js:30079:18)
    at __webpack_require__ (render-page.js:30:30)
    at module.exports (render-page.js:25161:34)
    at render-page.js:88:40
    at module.exports (render-page.js:60492:11)
    at Object.<anonymous> (render-page.js:87:2)

[tanem]

@kaifaust hmm yea, looks like a somewhat common issue:

gatsbyjs/gatsby#309
gatsbyjs/gatsby#514

Just published 2.1.19, do you want to try that to see if it solves your issue?

[kaifaust]

That worked, thanks for addressing that! I'm happy to revert back to your library, here's the difference in my project:

// Leaves bad taste in mouth
import LogoSrc from '-!babel!svg-react?name=Logo!./logo.svg'`

const Logo = styled(LogoSrc)`
  & path {
    fill: white;
  }
`

<Logo />

vs

import ReactSVG from 'react-svg'

const Logo = styled(ReactSVG)`
  & path {
    fill: white;
  }
`

// Candy!
<Logo path={'/logo.svg'} />

[tanem]

@kaifaust good news! Yea looks cleaner eh 👍