CODEWITHSUNDEEP
reactjswebpacksemantic-ui
Imesh Chandrasiri
Imesh Chandrasiri

Reputation: 5679

Cannot import semantic-ui-css

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?

Upvotes: 3

Views: 3553

Answers (1)

Jayce444
Jayce444

Reputation: 9063

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)

Upvotes: 11

Related Questions