Comments (9)
@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?
from react-svg.
@micchyboy can you provide more context please? In particular, where are you trying to run your app? (e.g. browser?)
from react-svg.
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.
from react-svg.
@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.
from react-svg.
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)
from react-svg.
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 👍
from react-svg.
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)
from react-svg.
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'} />
from react-svg.
@kaifaust good news! Yea looks cleaner eh 👍
from react-svg.
Related Issues (20)
- Components don't work properly in iframe HOT 4
- <style>-tag inside SVG becomes a page-wide style HOT 2
- Setting color HOT 3
- src prop warning in unit testing react testing library HOT 2
- Re-render of react-svg lost reference HOT 2
- ref type is incompatible HOT 2
- React SVG isn't working, when we give the external source. HOT 2
- wrapper rendered twice HOT 2
- Unit test cases are failing, if i use ReactSVG. HOT 4
- Namespace 'React' has no exported member 'JSX'. HOT 3
- Styling in scss HOT 2
- Doesn't update <use /> tag "href" attribute when `renumerateIRIElements` is true HOT 3
- CORS issue HOT 4
- SVG URL EXTERNAL, How Can I mock!? HOT 2
- ForwardedRef not assignable to ref type
- Make wrapper optional HOT 1
- 'ReactSVG' cannot be used as a JSX component.
- react-svg ssr compatibility with nextJs v14 App router
- A11y | <title> doesn't make an svg screen reader friendly
- Type instantiation is excessively deep and possibly infinite (ts-2589) error with styled-component and typescript setup HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-svg.