{"action":"created","issue":{"url":"https://api.github.com/repos/jhamlet/svg-react-loader/issues/31","repository_url":"https://api.github.com/repos/jhamlet/svg-react-loader","labels_url":"https://api.github.com/repos/jhamlet/svg-react-loader/issues/31/labels{/name}","comments_url":"https://api.github.com/repos/jhamlet/svg-react-loader/issues/31/comments","events_url":"https://api.github.com/repos/jhamlet/svg-react-loader/issues/31/events","html_url":"https://github.com/jhamlet/svg-react-loader/issues/31","id":169496616,"number":31,"title":"\"Reference Error: React is not defined\" with server side rendering. How to implement in an isomorphic context?","user":{"login":"tconroy","id":1609336,"avatar_url":"https://avatars.githubusercontent.com/u/1609336?v=3","gravatar_id":"","url":"https://api.github.com/users/tconroy","html_url":"https://github.com/tconroy","followers_url":"https://api.github.com/users/tconroy/followers","following_url":"https://api.github.com/users/tconroy/following{/other_user}","gists_url":"https://api.github.com/users/tconroy/gists{/gist_id}","starred_url":"https://api.github.com/users/tconroy/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/tconroy/subscriptions","organizations_url":"https://api.github.com/users/tconroy/orgs","repos_url":"https://api.github.com/users/tconroy/repos","events_url":"https://api.github.com/users/tconroy/events{/privacy}","received_events_url":"https://api.github.com/users/tconroy/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":7,"created_at":"2016-08-04T23:23:40Z","updated_at":"2016-08-08T21:50:58Z","closed_at":null,"body":"Hi!\r\n\r\nThis is likely just a configuration issue on my part, but I'm getting the following error message when attempting to use this loader in an isomorphic react app:\r\n\r\n**error:**\r\n```\r\n/Users/Tom/Code/src/svg/circle.inline.svg:3\r\nReact.createElement(\r\n^\r\n\r\nReferenceError: React is not defined\r\n    at Object.<anonymous> (circle.inline.svg:1:1)\r\n    at Module._compile (module.js:413:34)\r\n    at loader (/Users/Tom/Code/node_modules/babel-register/lib/node.js:148:5)\r\n    at Object.require.extensions.(anonymous function) [as .js] (/Users/Tom/Code/node_modules/babel-register/lib/node.js:158:7)\r\n    at Module.load (module.js:357:32)\r\n    at Function.Module._load (module.js:314:12)\r\n    at Module.require (module.js:367:17)\r\n    at require (internal/module.js:16:19)\r\n    at Object.<anonymous> (BlockAdComponent.js:3:1)\r\n    at Module._compile (module.js:413:34)\r\n```\r\n\r\n**webpack loader config:**\r\n\r\n```\r\n      {\r\n        test: /\\.inline.svg$/,\r\n        loader: 'babel!svg-react',\r\n      },\r\n```\r\n\r\n**contents of SVG file:**\r\n\r\n```\r\n<svg\r\n  version=\"1.1\"\r\n  xmlns=\"http://www.w3.org/2000/svg\"\r\n  x=\"0px\"\r\n  y=\"0px\"\r\n  viewBox=\"0 0 100 100\"\r\n  enable-background=\"new 0 0 100 100\"\r\n>\r\n  <circle\r\n    className=\"svg-inline-circle\"\r\n    cx=\"50\"\r\n    cy=\"50\"\r\n    r=\"48\"\r\n  >\r\n  </circle>\r\n</svg>\r\n```\r\n\r\n**simplified example of how the SVG is being imported:**\r\n```\r\nimport React from 'react';\r\nimport Circle from 'svg/circle.inline.svg';\r\n\r\nclass BlockComponent extends React.Component {\r\n\r\n  render() {\r\n    const { config, swipeArrows } = this.props;\r\n    return (\r\n      <div>\r\n        <Circle className=\"block-ad__circle\" />\r\n      </div>\r\n    );\r\n  }\r\n}\r\n\r\nexport default BlockComponent;\r\n\r\n```\r\n\r\nThe setup instructions I followed were from [this guide (method 2)](https://diessi.ca/blog/svg-images-as-react-components-with-webpack/?utm_campaign=React%2BNewsletter&utm_medium=web&utm_source=React_Newsletter_39)\r\n\r\nEnvironment is:\r\nNode: 5.5.0\r\nNPM: 2.15.9\r\nWebpack: 1.13.1\r\nReact: 0.14.0\r\nsvg-react-loader: 0.3.7\r\nExpress: 4.14.0\r\n\r\nA coworker had this working on his local via a simple `webpack-dev-server`, however while attempting to implement it into an isomorphic react context (express server backened), I am now getting this error.\r\n\r\n\r\nIf you need any other info from me please feel free to ask. Any help much appreciated. "},"comment":{"url":"https://api.github.com/repos/jhamlet/svg-react-loader/issues/comments/238388963","html_url":"https://github.com/jhamlet/svg-react-loader/issues/31#issuecomment-238388963","issue_url":"https://api.github.com/repos/jhamlet/svg-react-loader/issues/31","id":238388963,"user":{"login":"jhamlet","id":687558,"avatar_url":"https://avatars.githubusercontent.com/u/687558?v=3","gravatar_id":"","url":"https://api.github.com/users/jhamlet","html_url":"https://github.com/jhamlet","followers_url":"https://api.github.com/users/jhamlet/followers","following_url":"https://api.github.com/users/jhamlet/following{/other_user}","gists_url":"https://api.github.com/users/jhamlet/gists{/gist_id}","starred_url":"https://api.github.com/users/jhamlet/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/jhamlet/subscriptions","organizations_url":"https://api.github.com/users/jhamlet/orgs","repos_url":"https://api.github.com/users/jhamlet/repos","events_url":"https://api.github.com/users/jhamlet/events{/privacy}","received_events_url":"https://api.github.com/users/jhamlet/received_events","type":"User","site_admin":false},"created_at":"2016-08-08T21:50:58Z","updated_at":"2016-08-08T21:50:58Z","body":"Interesting.\r\n\r\nAre you pre-compiling with `webpack` before this step?"}}
{"actor":{"display_login":"jhamlet"}}