Errors using Webpack and Bootstrap together

Question

I've been pounding my head against this one for a few days, so apologies if this is a simple fix. I'm new to Webpack.

I'm looking to import Bootstrap into my project instead of using a CDN or any other method. But I have two issues occurring:

Bootstrap isn't rendering on the page
I keep having issues trying to load the .woff and .woff2 glyphicons

I'll have my code below and that will show you where I'm at. Thanks for the help in advance!

File Tree (Left files out for clarity):

-node_modules
-src
--index.html
--app
---vendor.jsx
--build
---app.js
---vendor.js
-webpack.config.js

index.html

<body>
    <!-- Insert other Body code here -->

    <!-- Webpack Bundle -->
    <script src="build/vendor.js"></script>
    <script src="build/app.js"></script>
</body>

vendor.jsx

// JS dependencies
const $ = require('jquery');
const bootstrap = require('bootstrap');
import React from 'react';
import ReactDOM from 'react-dom';

// CSS files
import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap/dist/css/bootstrap-theme.css';

webpack.config.js

var webpack = require('webpack');
var path = require('path');

var BUILD_DIR = path.resolve(__dirname, './src/build');
var APP_DIR = path.resolve(__dirname, './src/app');

var config = {
    entry: {
        app: APP_DIR + '/app.jsx',
        vendor: APP_DIR + '/vendor.jsx'
    },
    output: {
        path: BUILD_DIR,
        filename: '[name].js'
    },
    module: {
        rules: [
            {
                test: /\.jsx?/,
                include: APP_DIR,
                loader: 'babel-loader',
                exclude: /node_modules/,
                query: {
                    presets: ['es2015', 'react']
                }
            },
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            },
            {
                test: /\.png$/,
                use: 'url-loader?limit=100000'
            },
            {
                test: /\.jpg$/,
                use: 'file-loader'
            },
            {
                test: /\.(woff|woff2) (\?v=\d+\.\d+\.\d+)?$/,
                use: 'url-loader?limit=10000&mimetype=application/font-woff'
            },
            {
                test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
                use: 'url-loader?limit=10000&mimetype=application/octet-stream'
            },
            {
                test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, 
                use: 'file-loader'
            },
            {
                test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, 
                use: 'url-loader?limit=10000&mimetype=image/svg+xml'
            }
        ]
    }
};

module.exports = config;

EDIT:

@InfiniteStack asked for error logs, so they are included below:

Chrome Debug Error:

Uncaught Error: Module parse failed: C:\Users\{user}\Code\ref-data-mapper\node_modules\bootstrap\dist\fonts\glyphicons-halflings-regular.woff2 Unexpected character '

Webpack Error:

ERROR in ./~/bootstrap/dist/fonts/glyphicons-halflings-regular.woff Module parse failed: C:\Users\{user}\Code\ref-data-mapper\node_modules\bootstrap\dist\fonts\glyphicons-halflings-regula r.woff Unexpected character ' ' (1:4) You may need an appropriate loader to handle this file type. (Source code omitted for this binary file) @ ./~/css-loader!./~/bootstrap/dist/css/bootstrap.css 6:4707-4760 @ ./~/bootstrap/dist/css/bootstrap.css @ ./src/app/vendor.jsx

ERROR in ./~/bootstrap/dist/fonts/glyphicons-halflings-regular.woff2 Module parse failed: C:\Users\{user}\Code\ref-data-mapper\node_modules\bootstrap\dist\fonts\glyphicons-halflings-regula r.woff2 Unexpected character ' ' (1:4) You may need an appropriate loader to handle this file type. (Source code omitted for this binary file) @ ./~/css-loader!./~/bootstrap/dist/css/bootstrap.css 6:4622-4676 @ ./~/bootstrap/dist/css/bootstrap.css @ ./src/app/vendor.jsx

LinkChef LinkChef · Accepted Answer · 2017-06-16T18:11:25

Thanks to @InfiniteStack and the Gitter crew at webpack/webpack, I now have a full answer.

In webpack.config.js, a reference to the url-loader with just url-loader?limit100000 is necessary before modifying them further.

As well, jQuery needed to be defined as a plugin within webpack near the bottom. All changes needed to be made in webpack.config.js. My completed file will be below:

var webpack = require('webpack');
var path = require('path');

var BUILD_DIR = path.resolve(__dirname, './src/build');
var APP_DIR = path.resolve(__dirname, './src/app');

var config = {
    entry: {
        app: APP_DIR + '/app.jsx',
        vendor: APP_DIR + '/vendor.jsx'
    },
    output: {
        path: BUILD_DIR,
        filename: '[name].js'
    },
    module: {
        rules: [
            {
                test: /\.jsx?/,
                include: APP_DIR,
                loader: 'babel-loader',
                exclude: /node_modules/,
                query: {
                    presets: ['es2015', 'react']
                }
            },
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            },
            {
                test: /\.(png|woff|woff2|eot|ttf|svg)$/,
                use: 'url-loader?limit=100000'
            },
            {
                test: /\.png$/,
                use: 'url-loader?limit=100000'
            },
            {
                test: /\.jpg$/,
                use: 'file-loader'
            },
            {
                test: /\.(woff|woff2) (\?v=\d+\.\d+\.\d+)?$/,
                use: 'url-loader?limit=10000&mimetype=application/font-woff'
            },
            {
                test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
                use: 'url-loader?limit=10000&mimetype=application/octet-stream'
            },
            {
                test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, 
                use: 'file-loader'
            },
            {
                test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, 
                use: 'url-loader?limit=10000&mimetype=image/svg+xml'
            }
        ]
    },
    plugins: [
        new webpack.ProvidePlugin({
            jQuery: 'jquery',
            $: 'jquery',
            jquery: 'jquery'
        })
    ]
};

module.exports = config;

So TL;DR: Define jQuery as a plugin Define all your non-js assets with url-loader before adding extras

If anyone else has more answers as to WHY this works, I'm open to it if you want to PM/message me.

Thank you again!

Errors using Webpack and Bootstrap together

1 Answers