Error: You may need an appropriate loader to handle this file type

Question

Trying to set up a react web app but keep running into this error after trying to implement semantic-UI by putting import "semantic-ui-css/semantic.min.css"; in index.jsx.

I npm installed css-loader and style-loader as thats the error I was getting prior to this new error.

My guess is a webpack.config needs to be adjusted to handle the loaders differently but I'm unsure on how to proceed with this.

ERROR in ./node_modules/semantic-ui-css/themes/default/assets/fonts/outline-icons.woff
Module parse failed: C:\Users\Shawn\Documents\GitHub\Galavue\Galavue\node_modules\semantic-ui-css\themes\default\assets\fonts\outline-icons.woff Unexpected character ' ' (1:4)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
 @ ./node_modules/css-loader/dist/cjs.js!./node_modules/semantic-ui-css/semantic.min.css 15:42-101
 @ ./node_modules/semantic-ui-css/semantic.min.css
 @ ./react-client/src/index.jsx

Package.json

 { "name": "galavue", "version": "0.0.0", "description": "Galavue", "main": "server.js", "author": "Shawn", "scripts": { "dev": "webpack -d --watch", "start": "node ./server/index.js", "build": "webpack -p", "react-dev": "webpack -d --watch", "server-dev": "nodemon server/index.js" }, "repository": { "type": "git", "url": "git+https://github.com/www.github.com/shawnSFU.git" }, "license": "ISC", "bugs": { "url": "https://github.com/www.github.com/shawnSFU/issues" }, "homepage": "https://github.com/www.github.com/shawnSFU#readme", "dependencies": { "babel-core": "^6.25.0", "babel-loader": "^7.1.1", "babel-preset-es2015": "^6.24.1", "babel-preset-react": "^6.24.1", "body-parser": "^1.17.2", "express": "^4.15.3", "react": "^15.6.1", "react-dom": "^15.6.1", "react-router": "^4.1.2", "react-router-dom": "^4.1.2", "semantic-ui-css": "^2.4.1", "semantic-ui-react": "^0.85.0", "webpack": "^3.4.1" }, "devDependencies": { "css-loader": "^2.1.0", "style-loader": "^0.23.1" } }

webpack.config.js

 //defines the entry and output points for our application const path = require('path'); const SRC_DIR = path.join(__dirname, '/react-client/src'); const DIST_DIR = path.join(__dirname, '/react-client/dist'); const webpack = require('webpack'); module.exports = { entry: `${SRC_DIR}/index.jsx`, output: { path: DIST_DIR, filename: 'bundle.js', }, resolve: { extensions: ['.js', '.jsx', '.json', '.css'], }, module: { rules: [ { test: /\\.css$/, loader: 'style-loader!css-loader' }, { test: /\\.png$/, loader: 'url-loader?limit=100000&minetype=image/png' }, { test: /\\.jpg/, loader: 'file-loader' }, { test: /\\.jsx?/, include: SRC_DIR, loader: 'babel-loader', query: { presets: ['react', 'es2015'] } } ] }, plugins: [ new webpack.DefinePlugin({ 'process.env.NODE_ENV': JSON.stringify('production') }) ] };

Answer 1

There are a few things you need to do. Ensure that you have use ~ for CSS imports from node_modules like:

import '~semantic-ui-css/semantic.min.css';

Second, this CSS file semantic.min.css also references *.woff files. I believe it is used for referencing external font files. You would need either url-loader or file-loader to handle those types of files. Sample loader configuration for url-loader would look like:

{
    test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
    loader: 'url-loader',
    options: {
        limit: 10000,
    },
}

Further documentation: url-loader file-loader