bootstrap-sass-loader-example icon indicating copy to clipboard operation
bootstrap-sass-loader-example copied to clipboard

Never compiles except in this demo app.

Open snown opened this issue 9 years ago • 3 comments

I've tried numerous ways to add bootstrap-sass-loader to my react-webpack-node project, but no matter what I do it fails with a "Error: Cannot find module". The example app works fine, I cannot see where the important difference is between my attempt, and the example.

The full error I get is:

ERROR in ./~/bootstrap-sass-loader/bootstrap-sass-scripts.loader.js!./bootstrap-sass.config.js
    Module build failed: Error: Cannot find module '/Users/snown/Downloads/react-webpack-node-master/node_modules/eslint-loader/index.js!/Users/snown/Downloads/react-webpack-node-master/node_modules/jscs-loader/index.js!/Users/snown/Downloads/react-webpack-node-master/bootstrap-sass.config.js'
        at Function.Module._resolveFilename (module.js:336:15)
        at Function.Module._load (module.js:278:25)
        at Module.require (module.js:365:17)
        at require (module.js:384:17)
        at Object.module.exports.pitch (/Users/snown/Downloads/react-webpack-node-master/node_modules/bootstrap-sass-loader/bootstrap-sass-scripts.loader.js:26:16)
     @ ./~/bootstrap-sass-loader/index.loader.js!./bootstrap-sass.config.js 2:0-205

Any hints as to how I could integrate Bootstrap properly?

Thanks.

snown avatar May 28 '15 18:05 snown

Sometimes it's super useful to simply use the debugger and use some print statements. It's very easy to setup:

https://github.com/justin808/bootstrap-sass-loader#testing-changes-in-the-bootstrap-sass-loader

justin808 avatar May 28 '15 22:05 justin808

I ran into the same problem a few days ago. The issue is caused by the preLoaders in your webpack.config.js:

Change:

  module: {
    preLoaders: [{
      test: /\.(js|jsx)$/,
      exclude: /node_modules/,
      loader: 'jsxhint'
    }],
    loaders: [
      // snip ....

to

  module: {
    preLoaders: [{
      test: /\.(js|jsx)$/,
      exclude: /(node_modules|bootstrap-sass\.config)/,
      loader: 'jsxhint'
    }],
    loaders: [
      // snip ....

to exclude the config file from it. I did not dig further into this as I don't need preprocessing for this file.

spiderpug avatar May 30 '15 18:05 spiderpug

I'd recommend not using jsxhint inside of webpack. I did this before. It's way better to setup linting for the project like this: https://github.com/justin808/react-webpack-rails-tutorial.

justin808 avatar May 31 '15 04:05 justin808