Build fails when loading Roboto typeface

Question

Following Material UI's getting started guide, I have installed typeface-roboto in my repository like so:

npm install typeface-roboto

Index.js is the entry point of my React application:

import React from 'react'
import { render } from 'react-dom'

import 'typeface-roboto'

render(
    (
        <div>
            <h1>Hello world</h1>
        </div>
    ), document.getElementById('app')
)

According to the website, this should do the trick. However, upon running, webpack throws this error at me:

ERROR in ./node_modules/typeface-roboto/index.css
Module build failed: TypeError: text.forEach is not a function
    at /Users/verhage/dev/my_app/node_modules/extract-text-webpack-plugin/dist/loader.js:135:14
    at compile (/Users/verhage/dev/my_app/node_modules/webpack/lib/Compiler.js:304:11)
    at applyPluginsAsync.err (/Users/verhage/dev/my_app/node_modules/webpack/lib/Compiler.js:514:14)
    at next (/Users/verhage/dev/my_app/node_modules/tapable/lib/Tapable.js:202:11)
    at Compiler.<anonymous> (/Users/verhage/dev/my_app/node_modules/extract-text-webpack-plugin/dist/loader.js:112:7)
    at next (/Users/verhage/dev/my_app/node_modules/tapable/lib/Tapable.js:204:14)

The module part of webpack.config.js:

module: {
    rules: [
        {
            test: /\.(js|jsx)$/,
            exclude: /node_modules/,
            use: 'babel-loader'
        },
        {
            test: /\.css$/,
            loader: ExtractTextPlugin.extract({
                use: 'css-loader/locals'
            })
        },
        {
            test: /\.(png|jpg|gif)$/,
            use: [
                'file-loader'
            ]
        }
    ]
}

I have found numerous kind of related questions, with people throwing more or less random 'solutions' at it, but not actually fixing anything or explaining what's happening here.

Used versions:

• webpack 3.7.1
• extract-text-webpack-plugin 3.0.1
• typeface-roboto 0.0.41
• node 8.6.0