Svg-sprite-loader: ReferenceError: React is not defined

[whois42]

Hello,
I testing my react application with Mocha and when I run npm test I got the exception:
`app/DOM/pure/landing-assets/logo.svg:3
React.createElement(
^

ReferenceError: React is not defined`

How I can solve this problem?

[kisenka]

@whois42 I need more details. Please create a test case which reproduces error (webpack.config.js, your react component and svg file).

[princed]

@whois42 Have you solved the issue? Is there some info for people who may encounter it too?

[antonydb]

If anyone ends up here like I did, this might be helpful https://github.com/jhamlet/svg-react-loader/issues/31.

[mascardoso]

I also have the same issue.
Tried reading @antonydb post reference but their options for me don't work.
The weird thing is that I only have this issue when starting webpack in dev env and it still works.

This is the error:

[0]     "stack": [
[0]       "ReferenceError: React is not defined",
[0]       "    at Object.<anonymous> (/front/assets/img/sprite.svg:1:1)",
[0]       "    at Module._compile (module.js:571:32)",
[0]       "    at loader (/node_modules/babel-register/lib/node.js:144:5)",
[0]       "    at Object.require.extensions.(anonymous function) [as .js] (/node_modules/babel-register/lib/node.js:154:7)",
[0]       "    at Module.load (module.js:488:32)",
[0]       "    at tryModuleLoad (module.js:447:12)",
[0]       "    at Function.Module._load (module.js:439:3)",
[0]       "    at Module.require (module.js:498:17)",
[0]       "    at require (internal/module.js:20:19)",

Webpack config:

..
      {
        test: /\.svg$/,
        loader: 'svg-sprite-loader',
        include: path.resolve(__dirname, 'front/assets/img/')
      }
..

jsx-1:

import React from 'react'
import '../../../assets/img/sprite.svg'

const Icon = ({ type, fill, size, padded, id }) => (
  <svg ...>
    <use xlinkHref={`#sprite-${type}`} />
  </svg>
)

export default Icon

jsx-2:

import Icon from '../icon.jsx'

<Icon type='customize' size='--medium' />

[NorbertNader]

I know this is an old post but look at the error trace you are getting:
Object.require.extensions.(anonymous function) [as .js] (/node_modules/babel-register/lib/node.js:154:7)",

I had this same issue and what you can do is add an extension to node. It is treating the imported svg as a React component and to it's surprise it does not import React. Try adding:
require.extensions['.svg'] = () => {};
to wherever you are requiring babel-register, so it understands to not treat svgs as React components.

You could also try passing ignore to babel-register (https://babeljs.io/docs/en/babel-register), but for some reason that is not working for me, although under the hood babel-register is also using require.extensions which is deprecated by the way (https://nodejs.org/api/modules.html#modules_require_extensions) seems like an issue with babel.

Also, if you are using any other rules in webpack that would catch your svg, make sure to exclude the path you are storing your svg sprites in, and include only your svg sprites path in the svg-sprites-loader rule.