React.semantic ui's Icones are not loading with webpack middle ware

Question

I am trying to build a react application using React Semantic. I am using webpack-dev-server, webpack-hot-middleware and webpack-dev-middleware to automating the tasks.

I installed react semantic ui through npm.

npm install --save semantic-ui-css semantic-ui-react

however, webpack seems to not loading ./node_modules/semantic-ui-css/themes/assets/fonts/ icons and it is not accessabile for the html page. there is no errors in console, it just does not show the icon.

If I do not import semantic-ui-css in react app and includ in with CDN, it works fine.

App.js

import React from 'react';
import 'semantic-ui-css/semantic.min.css';
import { Container, Icon } from 'semantic-ui-react';

class App extends React.Component{
    render(){
    return (
        <Container fluid>
            <h1 id='test'>ReactJs</h1>
            <hr/>
            <Icon name='search' />
        </Container>

    )
    }

}
export default App;

webpack.config.dev.js

import path from 'path';
import webpack from 'webpack';

export default {
    devtool: 'eval-source-map',
    entry: [
        'webpack-hot-middleware/client',
        path.join(__dirname, '/client/index.js')

    ],
    output:{
        path: '/',
        publicPath: '/',
        filename: 'bundle.js'
    },
    plugins: [
        new webpack.NoEmitOnErrorsPlugin,
        new webpack.optimize.OccurrenceOrderPlugin(),

        new webpack.HotModuleReplacementPlugin()
    ],

    module:{
        loaders: [
            {
                test: /\.js$/,
                include: path.join(__dirname, 'client'),
                loaders: ['react-hot-loader', 'babel-loader']
            },
            {
                test: /\.css$/,
                use: [ 'style-loader', 'css-loader','sass-loader'],
            },
            {
                test: /\.scss$/,
                exclude: /node_modules/,
                loaders: ['raw-loader', 'sass-loader'] // sass-loader not scss-loader
            },
            {
                test: /\.sass$/,                
                loaders: ["style-loader", "css-loader", "sass-loader"]
            },

            {
                 test: /\.svg$/,
                  loader: 'svg-loader' 
            },
            { test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader?limit=10000&mimetype=application/font-woff" },
            { test: /\.(ttf|eot|svg|png)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file-loader" }

        ]
    },
    resolve:{
        extensions: ['.js']
    }
}

Is there any loader or package to include icons from semantic ui package?

Answer 1

I am also using SUI-React with webpack. I was having a similar problem, however for me the icon files were 'packed' by webpack, but weren't being loaded correctly. Are you sure that webpack isn't finding them at all?

I eventually found that the source of my issue was the webpack configuration: my output path was a dist subdirectory, from which the index.html loaded bundle.js. This meant that webpack (and file-loader) made the urls relative to that directory. Once I changed my output path to the parent directory, and changed the output file to be dist/bundle.js, everything worked as expected.

My webpack.config.js specifies the entrypoint as yours does (although only one entrypoint, I'm not using webpack-hot-middleware), and my loaders are:

loaders: [
  {
    test: /\.jsx?/,
    include: SRC_DIR,
    loader: 'babel'
  },
  {
    test: /\.(png|woff|woff2|eot|ttf|svg)$/,
    loader: 'file-loader'
  }
]

I'm loading the css using

require("!style-loader!css-loader!semantic-ui-css/semantic.min.css")

in the index file rather than using webpack loaders, however I think that should be equivalent to what you're doing.

Maybe your .css loader rule shouldn't include the sass-loader?

Also, the loader configuration option use seems to have been added in webpack v2, so if you're using webpack v1, that should be loaders as you have for the other rules.

Hope you can figure it out!