Comments (7)
Same thing here, tons of errors being thrown about modules not found. Shouldn't the modules bootstrap-webpack relies on be dependencies of it and get installed automatically?
from bootstrap-webpack.
I get the same issue too, see below:
ERROR in .//bootstrap/js/tab.js/bootstrap-webpack/bootstrap-scripts.loader.js!./bootstrap.config.js 11:0-27
Module build failed: Error: Final loader didn't return a Buffer or String
at DependenciesBlock.onModuleBuild (/Users/jorgejcastillo/saweb/src/main/webapp/node_modules/webpack-core/lib/NormalModuleMixin.js:299:42)
at nextLoader (/Users/jorgejcastillo/saweb/src/main/webapp/node_modules/webpack-core/lib/NormalModuleMixin.js:275:25)
at /Users/jorgejcastillo/saweb/src/main/webapp/node_modules/webpack-core/lib/NormalModuleMixin.js:292:15
at runSyncOrAsync (/Users/jorgejcastillo/saweb/src/main/webapp/node_modules/webpack-core/lib/NormalModuleMixin.js:160:12)
at nextLoader (/Users/jorgejcastillo/saweb/src/main/webapp/node_modules/webpack-core/lib/NormalModuleMixin.js:290:3)
at /Users/jorgejcastillo/saweb/src/main/webapp/node_modules/webpack-core/lib/NormalModuleMixin.js:259:5
at Storage.finished (/Users/jorgejcastillo/saweb/src/main/webapp/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:38:16)
at /Users/jorgejcastillo/saweb/src/main/webapp/node_modules/graceful-fs/graceful-fs.js:76:16
at FSReqWrap.readFileAfterClose as oncomplete
@ ./
Do Bootstrap plugin Js files needs to be listed in package.json under dependencies too?
from bootstrap-webpack.
Solution A:
You don't need this line 'bootstrap-webpack!./bootstrap.config.js' in your entry section of webpack.config.js you can simply 'import' the plugin(s) you need through your app.js or index.js (whichever file you execute first). i.e.:
import 'bootstrap/js/tab.js';
Solution B:
Leave this line in your entry section of webpack.config.js:
'bootstrap-webpack!./bootstrap.config.js'
no need to import anything.
In order for you to get rid of your red (errors) while compiling, simply install the imports-loader like this:
npm install imports-loader --save-dev
You should be able to build now without any errors.
from bootstrap-webpack.
Doesnt work at all for me.
/**
* React Starter Kit (https://www.reactstarterkit.com/)
*
* Copyright © 2014-2016 Kriasoft, LLC. All rights reserved.
*
* This source code is licensed under the MIT license found in the
* LICENSE.txt file in the root directory of this source tree.
*/
import path from 'path';
import webpack from 'webpack';
import merge from 'lodash.merge';
import AssetsPlugin from 'assets-webpack-plugin';
const DEBUG = !process.argv.includes('--release');
const VERBOSE = process.argv.includes('--verbose');
const AUTOPREFIXER_BROWSERS = [
'Android 2.3',
'Android >= 4',
'Chrome >= 35',
'Firefox >= 31',
'Explorer >= 9',
'iOS >= 7',
'Opera >= 12',
'Safari >= 7.1',
];
const GLOBALS = {
'process.env.NODE_ENV': DEBUG ? '"development"' : '"production"',
__DEV__: DEBUG,
};
//
// Common configuration chunk to be used for both
// client-side (client.js) and server-side (server.js) bundles
// -----------------------------------------------------------------------------
const config = {
entry: [
"bootstrap-webpack!./bootstrap.config.js",
],
output: {
publicPath: '/',
sourcePrefix: ' ',
},
cache: DEBUG,
debug: DEBUG,
stats: {
colors: true,
reasons: DEBUG,
hash: VERBOSE,
version: VERBOSE,
timings: true,
chunks: VERBOSE,
chunkModules: VERBOSE,
cached: VERBOSE,
cachedAssets: VERBOSE,
},
plugins: [
new webpack.optimize.OccurenceOrderPlugin(),
],
resolve: {
extensions: ['', '.webpack.js', '.web.js', '.js', '.jsx', '.json', 'css'],
},
module: {
loaders: [
{
test: /\.css$/,
loader: "style-loader!css-loader"
},
// **IMPORTANT** This is needed so that each bootstrap js file required by
// bootstrap-webpack has access to the jQuery object
{test: /bootstrap\/js\//, loader: 'imports?jQuery=jquery'},
// Needed for the css-loader when [bootstrap-webpack](https://github.com/bline/bootstrap-webpack)
// loads bootstrap's css.
{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: /\.jsx?$/,
include: [
path.resolve(__dirname, '../node_modules/react-routing/src'),
path.resolve(__dirname, '../src'),
],
loader: 'babel-loader',
}, {
test: /\.scss$/,
loaders: [
'isomorphic-style-loader',
'css-loader?' + (DEBUG ? 'sourceMap&' : 'minimize&') +
'modules&localIdentName=[name]_[local]_[hash:base64:3]',
'postcss-loader',
],
}, {
test: /\.json$/,
loader: 'json-loader',
}, {
test: /\.txt$/,
loader: 'raw-loader',
}, {
test: /\.(png|jpg|jpeg|gif|svg|woff|woff2)$/,
loader: 'url-loader?limit=10000',
}, {
test: /\.(eot|ttf|wav|mp3)$/,
loader: 'file-loader',
},
],
},
postcss: function plugins(bundler) {
return [
require('postcss-import')({addDependencyTo: bundler}),
require('precss')(),
require('autoprefixer')({browsers: AUTOPREFIXER_BROWSERS}),
];
},
};
//
// Configuration for the client-side bundle (client.js)
// -----------------------------------------------------------------------------
const clientConfig = merge({}, config, {
entry: './src/client.js',
output: {
path: path.join(__dirname, '../build/public'),
filename: DEBUG ? '[name].js?[hash]' : '[name].[hash].js',
},
// Choose a developer tool to enhance debugging
// http://webpack.github.io/docs/configuration.html#devtool
devtool: DEBUG ? 'cheap-module-eval-source-map' : false,
plugins: [
new webpack.DefinePlugin(GLOBALS),
new AssetsPlugin({
path: path.join(__dirname, '../build'),
filename: 'assets.js',
processOutput: x => `module.exports = ${JSON.stringify(x)};`,
}),
...(!DEBUG ? [
new webpack.optimize.DedupePlugin(),
new webpack.optimize.UglifyJsPlugin({
compress: {
// jscs:disable requireCamelCaseOrUpperCaseIdentifiers
screw_ie8: true,
// jscs:enable requireCamelCaseOrUpperCaseIdentifiers
warnings: VERBOSE,
},
}),
new webpack.optimize.AggressiveMergingPlugin(),
] : []),
],
});
//
// Configuration for the server-side bundle (server.js)
// -----------------------------------------------------------------------------
const serverConfig = merge({}, config, {
entry: './src/server.js',
output: {
path: './build',
filename: 'server.js',
libraryTarget: 'commonjs2',
},
target: 'node',
externals: [
/^\.\/assets$/,
function filter(context, request, cb) {
const isExternal =
request.match(/^[@a-z][a-z\/\.\-0-9]*$/i) && !request.match(/^react-routing/) && !context.match(/[\\/]react-routing/);
cb(null, Boolean(isExternal));
},
],
node: {
console: false,
global: false,
process: false,
Buffer: false,
__filename: false,
__dirname: false,
},
devtool: 'source-map',
plugins: [
new webpack.DefinePlugin(GLOBALS),
new webpack.BannerPlugin('require("source-map-support").install();',
{raw: true, entryOnly: false}),
],
});
export default [clientConfig, serverConfig];
from bootstrap-webpack.
So the important lines are :
...
const config = {
entry: [
"bootstrap-webpack!./bootstrap.config.js",
],
...
But this, doesnt load anything. I dont see any bootstrap.css loaded in Chrome Dev Tools for example and neither i see the style on the screen with an html like this
<button type="button" class="btn btn-primary" data-reactid=".gnt59td91c.0.0.0.0">Primary</button>
from bootstrap-webpack.
And i dont have any loading errors on anything in the console. Its pretty confusing.
from bootstrap-webpack.
I created a basic template that is framework agnostic. You can use Angular or React or whatever. You can get it here: https://github.com/jorgecas99/webpack-bootstrap-fontawesome
from bootstrap-webpack.
Related Issues (18)
- need help HOT 1
- Usage example should use 'mimetype' HOT 1
- Not allowed to load local resource
- Use custom css with react bootstrap [help wanted]
- We use webpack or gulp?
- ERROR in ./~/bootstrap/fonts/glyphicons-halflings-regular.woff2 HOT 1
- Source updates for 0.0.3 HOT 7
- Failed to decode downloaded font HOT 1
- publish 1.0.0 to npm
- how to compile .less to /dist ?
- How to extract to the separate css file in production mode?
- Cannot resolve module 'bootstrap/js/transition' HOT 1
- Cannot use extract-text-webpack-plugin. HOT 2
- Setting this up so that the version of bootstrap is dynamic HOT 1
- Error: Cannot resolve module 'imports' HOT 4
- include glyphicons earlier in include order HOT 3
- Issues with script loading HOT 4
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from bootstrap-webpack.