Cannot import semantic-ui-css

Question

when I import the semantic ui react css module in my index.js file I get the following error.

ERROR in ./~/semantic-ui-css/themes/default/assets/fonts/brand-icons.svg
Module parse failed: C:\Users\dimal\Documents\Work\sample-app\node_modules\semantic-ui-css\themes\default\assets\fonts\brand-icons.svg Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| <?xml version="1.0" standalone="no"?>
| <!--
| Font Awesome Free 5.0.8 by @fontawesome - https://fontawesome.com
 @ ./~/css-loader!./~/semantic-ui-css/semantic.min.css 7:196806-196862
 @ ./~/semantic-ui-css/semantic.min.css
 @ ./src/index.js

My webpack config is as following

var path = require('path');
module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'build'),
        filename: 'index.js',
        libraryTarget: 'commonjs2'
    },
    module: {
        rules: [{
            test: /\.js$/,
            include: path.resolve(__dirname, 'src'),
            exclude: /(node_modules|bower_components|build)/,
            use: {
                loader: 'babel-loader',
                options: {
                    presets: ['env']
                }
            }
        },{
            test: /\.(css|less)$/,
            use: ["style-loader", "css-loader", "less-loader"]
        }]
    },
    externals: {
        'react': 'commonjs react'
    }
};

What am I doing wrong in this?

Jayce444 · Accepted Answer · 2018-08-08 06:40:20Z

11

The semantic UI CSS file has references to other files like images and fonts, so webpack has to have loaders for those types of files as well.

Ensure you have url-loader and file-loader packages installed and add these loaders to your webpack config:

        {
            test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
            loader: require.resolve("url-loader"),
            options: {
                limit: 10000,
                name: "static/media/[name].[hash:8].[ext]",
            },
        },
        {
            test: [/\.eot$/, /\.ttf$/, /\.svg$/, /\.woff$/, /\.woff2$/],
            loader: require.resolve("file-loader"),
            options: {
                name: "/static/media/[name].[hash:8].[ext]",
            },
        }

(you can change the folder path as you desire)

answered Aug 8, 2018 at 6:40

Jayce444

9,1234 gold badges35 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Cannot import semantic-ui-css

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related