Cannot find module 'style!css!less!./bootstrap-styles!./bootstrap.config.js'

[martenzander]

First things first. I am new to webpack, so the origin of this issue might have something to do with the overall setup, but I am not sure about it so I post this issue here, since the error first occured after I tried to install and make use of bootstrap-webpack.

when compiling I get the following error:

Cannot find module 'style!css!less!./bootstrap-styles!./bootstrap.config.js'

this is my webpack.config.js:

'use strict';

const webpack = require( 'webpack' );
const bootstrap = require( 'bootstrap-webpack' );
const path = require( 'path' );
let devHost = 'http://81.14.233.246:8888';
let devPath = '/_clients/marcopolo/mopvmnews/public';

const fs = require('fs');
if (fs.existsSync('./webpack.vars.local.js')) {
    const webpackConfigLocal = require( './webpack.vars.local.js' );
    devHost = webpackConfigLocal.devHost;
    devPath = webpackConfigLocal.devPath;
}

module.exports = {
    devHost,
    devPath,
    debug: true,
    devtool: '#eval-source-map',
    context: path.join( __dirname, 'src', 'jsx' ),

    resolve: {
        extensions: ['', '.js', '.jsx'],
        modulesDirectories: ['src/jsx', 'node_modules'],
    },

    entry: [
        'bootstrap-webpack!./bootstrap.config.js',
        'webpack/hot/dev-server',
        'webpack-hot-middleware/client',
        './index'
    ],

    output: {
        path: path.join( __dirname, 'public', 'assets', 'js' ),
        publicPath: `${devPath}/assets/js/`,
        filename: 'bundle.js'
    },

    plugins: [
        new webpack.optimize.OccurenceOrderPlugin(),
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoErrorsPlugin()
    ],

    module: {
        loaders: [
            {
                test: /\.(woff|woff2)$/,
                loader: 'url-loader?limit=10000&mimetype=application/font-woff'
            },
            {
                test: /\.ttf$/,
                loader: 'file-loader'
            },
            {
                test: /\.eot$/,
                loader: 'file-loader'
            },
            {
                test: /\.svg$/,
                loader: 'file-loader'
            },
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                loaders: [ 'react-hot', 'babel' ]
            },
            {
                test: /\.json$/,
                exclude: /node_modules/,
                loader: 'json-loader'
            }
        ],
        preLoaders: [
            {
                test: /\.jsx$/,
                loader: 'eslint-loader',
                exclude: /node_modules/
            }
        ]
    },

    // REPORT ONLY ERRORS
    eslint: {
        quiet: true
    }
};

Any ideas?

[mhafalir]

Hey @SlimMarten, did you able to figure out the problem or any solution yet? I am having the same issute.

[anonrig]

I'm having the same problem.

[JuanGarassino]

+1

[charlieman]

I'm new with webpack and am having a similar error:

ERROR in ./~/bootstrap-webpack/index.js
Module not found: Error: Can't resolve './bootstrap-styles'  in '/path/node_modules/bootstrap-webpack'
 @ ./~/bootstrap-webpack/index.js 1:0-66
 @ ./js/entry.js

ERROR in ./~/bootstrap-webpack/index.js
Module not found: Error: Can't resolve './bootstrap-scripts'  in '/path/node_modules/bootstrap-webpack'
 @ ./~/bootstrap-webpack/index.js 2:0-52
 @ ./js/entry.js

I'm not sure if it's the same problem or not (I'm using webpack2), so I'm adding it here instead of creating a new issue.

My webpack.config.js looks like this:

module.exports = {
    entry: "./js/entry.js",
    output: {path: "web/js", filename: "bundle.js", publicPath: "/js/"},
    module: {
        rules: [
            {test: /\.(woff|woff2)$/, loader: "url-loader?limit=10000&mimetype=application/font-woff"},
            {test: /\.ttf$/, loader: "file-loader"},
            {test: /\.eot$/, loader: "file-loader"},
            {test: /\.svg$/, loader: "file-loader"}
        ]
    }
};

And the entry.js file is just

require("bootstrap-webpack");

[zhangfu-git]

@charlieman I'm having the same problem. you solve it

[charlieman]

@zhangfu-git I had to add more packages to get it working. See my answer here: http://stackoverflow.com/a/42014474/154762

[mikeerickson]

@zhangfu-git @charlieman @SlimMarten

For more clarification (in this post) you need to add

• css-loader
• style-loader
• less-loader

$ npm i -D css-loader style-loader less-loader

[wolfadex]

This is fixed with the latest release

[alejosv]

Same issue:

module.js:471
    throw err;
    ^

Error: Cannot find module 'style-loader!css-loader!less-loader!./bootstrap-styles.loader!./bootstrap.config.js'
    at Function.Module._resolveFilename (module.js:469:15)
    at Function.Module._load (module.js:417:25)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/lxcshared/vuejs/new.git/cli3/node_modules/bootstrap-webpack/index.js:1:63)
    at Module._compile (module.js:570:32)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! meddyg-cli@1.0.0 dev: `cross-env NODE_ENV=development webpack-dev-server --open --hot`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the meddyg-cli@1.0.0 dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in 

My package.json file

...
  "dependencies": {
    "vue": "^2.3.3"
  },
  "devDependencies": {
    "ajv": "^5.2.2",
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-env": "^1.5.1",
    "bootstrap": "^3.3.7",
    "bootstrap-webpack": "0.0.6",
    "cross-env": "^3.0.0",
    "css-loader": "^0.25.0",
    "exports-loader": "^0.6.4",
    "extract-text-webpack-plugin": "^3.0.0",
    "file-loader": "^0.9.0",
    "imports-loader": "^0.7.1",
    "less": "^2.7.2",
    "less-loader": "^4.0.5",
    "style-loader": "^0.18.2",
    "url-loader": "^0.5.9",
    "vue-loader": "^12.1.0",
    "vue-template-compiler": "^2.3.3",
    "webpack": "^3.1.0",
    "webpack-dev-server": "^2.4.5"
  }
...