Webpack missing loader for bootstrap

Question

I'm trying to use bootstrap through webpack and have installed it using npm. I want to use it in my react project so I've done the below settings but I keep getting the below error:

main.js

import React from 'react'
import 'bootstrap/dist/css/bootstrap.css'
const Main = () => (
    <div className="container">yo</div>
)

Webpack config

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

module.exports = {
  devtool: 'source-map',
  entry: [
    'webpack-hot-middleware/client',
    './client/pokeapp'
  ],
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: '/static/'
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin()
  ],
  module: {
    loaders: [
    // js
    {
      test: /\.js$/,
      loaders: ['babel'],
      include: path.join(__dirname, 'client')
    },
    // CSS
    {
      test: /\.css$/,
      include: path.join(__dirname, 'client'),
      loader: 'style-loader!css-loader'
    },
    { test: /\.(woff|woff2|eot|ttf|svg)$/, loader: 'url'}
    ]
  }
};

Console Error

Module parse failed: /Users/jlei/Desktop/pokeapp/node_modules/bootstrap/dist/css/bootstrap.css Unexpected token (7:5)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (7:5)
    at Parser.pp$4.raise (/Users/jlei/Desktop/pokeapp/node_modules/acorn/dist/acorn.js:2221:15)
    at Parser.pp.unexpected (/Users/jlei/Desktop/pokeapp/node_modules/acorn/dist/acorn.js:603:10)
    at Parser.pp.semicolon (/Users/jlei/Desktop/pokeapp/node_modules/acorn/dist/acorn.js:581:61)
    at Parser.pp$1.parseExpressionStatement (/Users/jlei/Desktop/pokeapp/node_modules/acorn/dist/acorn.js:966:10)
    at Parser.pp$1.parseStatement (/Users/jlei/Desktop/pokeapp/node_modules/acorn/dist/acorn.js:730:24)
    at Parser.pp$1.parseTopLevel (/Users/jlei/Desktop/pokeapp/node_modules/acorn/dist/acorn.js:638:25)
    at Parser.parse (/Users/jlei/Desktop/pokeapp/node_modules/acorn/dist/acorn.js:516:17)
    at Object.parse (/Users/jlei/Desktop/pokeapp/node_modules/acorn/dist/acorn.js:3098:39)
    at Parser.parse (/Users/jlei/Desktop/pokeapp/node_modules/webpack/lib/Parser.js:902:15)
    at DependenciesBlock.<anonymous> (/Users/jlei/Desktop/pokeapp/node_modules/webpack/lib/NormalModule.js:104:16)
 @ ./client/components/Main.js 27:0-43

What's the unexpected token? Is that due to my loader not working?

score 2 · Accepted Answer · edited Jun 20 '20 at 09:12

I tested your code and there is nothing wrong with the loader However this line include: path.join(__dirname, 'client') is causing the issue if you remove it you can see bootstrap bundling just fine with webpack. For getting more from webpack you may want to get a separate css file then you can use ExtractTextPlugin to achieve it.

How it work ?

Installation

npm i extract-text-webpack-plugin

Configure it in webpack

{test: /\.css$/, loader:   ExtractTextPlugin.extract({ fallbackLoader: 'style-loader', loader: 'css-loader' })}

and add it in plugin

 new ExtractTextPlugin('yourStyle.css')

Now you should have a separate css file in browser instead of every css in style tag

How does it work

It moves every require("style.css") in entry chunks into a separate css output file. So your styles are no longer inlined into the javascript, but separate in a css bundle file (styles.css). If your total stylesheet volume is big, it will be faster because the stylesheet bundle is loaded in parallel to the javascript bundle. Hope it help you.

thank you, I was wondering what was `include: path.join(__dirname, 'client') `doing that messed it up? — stackjlei, Aug 31 '16 at 23:49
i really don't know much about that, i never use it but here is a [question and answer on in](http://stackoverflow.com/questions/34623229/webpack-loaders-and-include) — Jorawar Singh, Sep 01 '16 at 12:02

score 0 · Answer 2 · answered Aug 31 '16 at 08:16

you don't have to include bootstrap as an npm module. You can download or use CDN to include bootstrap on your html template. You can then apply it on your component by using 'className' attribute instead of 'class'. Try it.

app.use('/css', express.static(__dirname + '/node_modules/bootstrap/dist/css'));

and in your html file:

<link rel="stylesheet" href="/css/bootstrap.min.css">

This method is the same as downloading the bootstrap files to improve latency.

make sure you include '/node_modules/bootstrap/dist/css' in your webpack config as an entry point — JFAP, Aug 31 '16 at 08:18