Empty Element Renders

Following the directions on your README and this blog, I keep getting an empty element that doesn’t show the svg. Any ideas?

My svg file is proper. webpack.config.js (or at least the one that matters, I have configs for each environment but they webpack-merge with this one):

// webpack config
const webpack = require('webpack');
const path = require('path');

module.exports = function() {
  return {
    context: path.join(__dirname, '..', '..'),
    entry: './src/index.jsx',
    output: {
      path: './build/',
      filename: 'bundle.js',
      sourceMapFilename: 'map',
    },
    module: {
      rules: [
        {
          test: /\.(js|jsx)$/,
          exclude: /node_modules/,
          use: 'babel-loader',
        }, {
          test: /\.svg$/,
          include: /assets/,
          use: ['babel-loader', 'svg-react-loader'],
        }
      ]
    },
    resolve: {
      modules: [
        'node_modules',
      ],
    },
  };
};

chatBubble.jsx:

import React from 'react';
import ReactDOM from 'react-dom';
import bubbleIcon from '../assets/bubble.svg'; // TODO: doesn't show properly yet

const buttonStyle = {
  width: 500,
  height: 500,
  position: 'absolute',
  bottom: 3,
  right: 3
};

const bubbleButton = () => (
  <button style={buttonStyle}>
    <bubbleIcon />
    <span>bubble</span>
  </button>
);

export default bubbleButton;

index.jsx (mainly for HMR):

import React from 'react';
import ReactDOM from 'react-dom';
// AppContainer is a necessary wrapper component for HMR
import { AppContainer } from 'react-hot-loader';
import chatBubble from './chatBubble.jsx';

const render = (Component) => {
  ReactDOM.render(
    <AppContainer>
      <Component/>
    </AppContainer>,
    document.getElementById('root')
  );
};

render(chatBubble);

// Hot Module Replacement API
if (module.hot) {
  module.hot.accept('./chatBubble.jsx', () => {
    render(chatBubble)
  });
}

[gibson]

your problem in import bubbleIcon from '../assets/bubble.svg'; component name))) Please read react docs

Caveat: Always start component names with a capital letter. For example, <div /> represents a DOM tag, but <Welcome /> represents a component and requires Welcome to be in scope.

[RomainGoncalves]

Thanks @gibson I had the same issue