React-redux-universal-hot-example: How can I include bootstrap css & js from node_modules?

[hank7444]

I try like this example
webpack module config

dev.config.js

  module: {
    loaders: [
      { test: /\.js$/, exclude: /node_modules/, loaders: ['react-hot', 'babel?stage=0&optional=runtime&plugins=typecheck']},
      { test: /\.css$/, loader: 'style-loader!css-loader' },
      { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "file" },
      { test: /\.(woff|woff2)$/, loader:"url?prefix=font/&limit=5000" },
      { test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/octet-stream" },
      { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=image/svg+xml" },
      { test: /\.json$/, loader: 'json-loader'},
      { test: /\.scss$/, exclude: /node_modules/, loader: 'style!css?modules&importLoaders=2&sourceMap&localIdentName=[local]___[hash:base64:5]!autoprefixer?browsers=last 2 version!sass?outputStyle=expanded&sourceMap&includePaths[]=node_modules/compass-mixins/lib'},
      { test: webpackIsomorphicToolsPlugin.regular_expression('images'), loader: 'url-loader?limit=10240'}
    ]
  },

Html.js

import 'bootstrap/dist/css/bootstrap.css';

but CLI show error repeat again and agian as follows:

/Users/hank7444/Documents/github/react-rocket2/node_modules/bootstrap/dist/css/bootstrap.css:7
[1] html {
[1]
[1] ^

thx a lot!

[wmertens]

try using require() instead of import?

[kwoon]

You need to add add this line

import 'bootstrap/dist/css/bootstrap.css';

only to the client.js. Why? See here.

[hank7444]

@kwoon I tried but it doesn't seem to be working. the error code as follows:

[hank7444]

@wmertens your solution is not working also :(

[wmertens]

Are you sure it is reading your config?

If you look closely at the webpack output, you will see the loaders it is applying. What is the line that webpack shows for bootstrap.css?

[hank7444]

I modified my webpack config, it is working now, thanks!

[wmertens]

So what was the problem?

On Mon, Sep 14, 2015, 06:48 Cheng-Han Kuo(hank) [email protected]
wrote:

I modified my webpack config, it is working now, thanks!

[image: image]
https://cloud.githubusercontent.com/assets/4727090/9842301/d437160e-5ade-11e5-9833-4942d1c60b8a.png

—
Reply to this email directly or view it on GitHub
https://github.com/erikras/react-redux-universal-hot-example/issues/171#issuecomment-139960685
.

Wout.
(typed on mobile, excuse terseness)

[yomolify]

For future viewers of this issue, please let us know what the problem was and how you solved it?

[hank7444]

hi all:
I solved this issue by changing the webpack loaders orders like this:

{ test: /\.scss/, exclude: /node_modules/, loader: 'style!css?modules&importLoaders=2&sourceMap&localIdentName=[local]___[hash:base64:5]!autoprefixer?browsers=last 2 version!sass?outputStyle=expanded&sourceMap&includePaths[]=node_modules/compass-mixins/lib'},
{ test: /\.css$/, loader: 'style-loader!css-loader' },

[eduardonunesp]

Sorry to comment in this closed thread, but the same problem still occurring with me:

'use strict';

import 'bootstrap/dist/css/bootstrap.css';

import angular from 'angular';
import config from './config';
import uirouter from 'angular-ui-router';
import main from './modules/main';

angular.module('app', [
  uirouter,
  main
]).config(config);

ERROR in ../~/bootstrap/dist/css/bootstrap.css
Module parse failed: /Users/eduardonunesp/Enterprises/FAPL/browser/node_modules/bootstrap/dist/css/bootstrap.css Line 7: Unexpected token {
You may need an appropriate loader to handle this file type.
|  */
| /*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
| html {
|   font-family: sans-serif;
|   -webkit-text-size-adjust: 100%;
 @ ./index.js 3:0-43

Conf

var path = require('path');

module.exports = {
  context: path.resolve('js'),
  entry: "./index",
  output: {
    path: path.resolve('build/js/'),
    publicPath: '/public/assets/js/',
    filename: "bundle.js"
  },

  devServer: {
    contentBase: "public",
  },

  module: {
    loaders: [
      {test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/, query: {
          presets: ['es2015']
        }
      },
      {test: /\.css$/, loaders: 'style-loader!css-loader' , exclude: /node_modules/},
      {test: /bootstrap\/js\//, loader: 'imports?jQuery=jquery' },
      {test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/font-woff" },
      {test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/octet-stream" },
      {test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "file" },
      {test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=image/svg+xml" },
      {test: /\.html$/, loader: 'raw',exclude: /node_modules/},
      {test: /^((?!config).)*\.js?$/, exclude: /node_modules/, loader: 'babel?cacheDirectory'},
      {test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)$/, loader: 'file', exclude: /node_modules/}
    ]
  }
};

[wmertens]

You are excluding node_modules in your css loader…

On Thu, Nov 12, 2015, 1:20 AM Eduardo Nunes Pereira <
[email protected]> wrote:

Sorry to comment in this closed thread, but the same problem still
occurring with me:

ERROR in ../~/bootstrap/dist/css/bootstrap.css
Module parse failed: /Users/eduardonunesp/Enterprises/FAPL/browser/node_modules/bootstrap/dist/css/bootstrap.css Line 7: Unexpected token {
You may need an appropriate loader to handle this file type.
| _/
| /_! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
| html {
| font-family: sans-serif;
| -webkit-text-size-adjust: 100%;
@ ./index.js 3:0-43

Conf

var path = require('path');

module.exports = {
context: path.resolve('js'),
entry: "./index",
output: {
path: path.resolve('build/js/'),
publicPath: '/public/assets/js/',
filename: "bundle.js"
},

devServer: {
contentBase: "public",
},

module: {
loaders: [
{test: /.js$/, loader: 'babel-loader', exclude: /node_modules/, query: {
presets: ['es2015']
}
},
{test: /.css$/, loaders: 'style-loader!css-loader' , exclude: /node_modules/},
{test: /bootstrap\/js\//, loader: 'imports?jQuery=jquery' },
{test: /.woff(\?v=\d+.\d+.\d+)?$/, loader: "url?limit=10000&mimetype=application/font-woff" },
{test: /.ttf(\?v=\d+.\d+.\d+)?$/, loader: "url?limit=10000&mimetype=application/octet-stream" },
{test: /.eot(\?v=\d+.\d+.\d+)?$/, loader: "file" },
{test: /.svg(\?v=\d+.\d+.\d+)?$/, loader: "url?limit=10000&mimetype=image/svg+xml" },
{test: /.html$/, loader: 'raw',exclude: /node_modules/},
{test: /^((?!config).)*.js?$/, exclude: /node_modules/, loader: 'babel?cacheDirectory'},
{test: /.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)$/, loader: 'file', exclude: /node_modules/}
]
}
};

—
Reply to this email directly or view it on GitHub
https://github.com/erikras/react-redux-universal-hot-example/issues/171#issuecomment-155954963
.

Wout.
(typed on mobile, excuse terseness)

[sunkant]

@hank7444 Hi Hank, I do not understand why the order of the loaders matters..

[hank7444]

@lukeqi the order's problem is gone after I update my relative modules

[sunkant]

Got it :+1:

[pgiragossian]

You can add a webpack config for the css-loader

Take a look at : http://stackoverflow.com/questions/35398733/css-modules-how-do-i-disable-local-scope-for-a-file

[sushil4u2]

npm install bootstrap worked for me. It installs bootstrap inside node_modules folder.

[trandaison]

This save the day https://www.gurustop.net/blog/2016/11/18/3821/jquery-angular2-angularcli-how-to

[huoxudong125]

Is there a way to sovle it using bower install bootstrap

 module: {
    rules: [
      {
        test: /\.(js|vue)$/,
        loader: 'eslint-loader',
        enforce: 'pre',
        include: [resolve('src'), resolve('test')],
        options: {
          formatter: require('eslint-friendly-formatter')
        }
      },
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: vueLoaderConfig
      },
      {
        test: /\.css$/,
        loaders: ['style-loader', 'css-loader']
      }

[ma3310]

Add after last import statement

window.jQuery = window.$ = require('jquery');
require('bootstrap');

[mbabauer]

For future people finding this issue and looking for a solution.

My issue was that I was including only a path inside my root:

        {
            test: /\.css$/,
            loader: "style-loader!css-loader",
            include: [
                path.join(__dirname, "/src/main/js")
            ]
        }

In my case the fix was to simply add the bootstrap path like so:

        {
            test: /\.css$/,
            loader: "style-loader!css-loader",
            include: [
                path.join(__dirname, "/src/main/js"),
                /node_modules\/bootstrap/
            ]
        }

So moral of the story is: An implicit include means that everything outside the include is excluded.

[tommck]

@mbabauer s/implicit/explicit/

[tonnoz]

For future people finding this issue and looking for a solution.

My issue was that I was including only a path inside my root:

      {
          test: /\.css$/,
          loader: "style-loader!css-loader",
          include: [
              path.join(__dirname, "/src/main/js")
          ]
      }

In my case the fix was to simply add the bootstrap path like so:

      {
          test: /\.css$/,
          loader: "style-loader!css-loader",
          include: [
              path.join(__dirname, "/src/main/js"),
              /node_modules\/bootstrap/
          ]
      }

So moral of the story is: An implicit include means that everything outside the include is excluded.

you saved my webpack noob booty man, thanks.