Giter VIP home page Giter VIP logo

Comments (7)

tehfailsafe avatar tehfailsafe commented on May 26, 2024

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.

jorgecas99 avatar jorgecas99 commented on May 26, 2024

I get the same issue too, see below:

ERROR in .//bootstrap/js/tab.js
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
@ ./
/bootstrap-webpack/bootstrap-scripts.loader.js!./bootstrap.config.js 11:0-27

Do Bootstrap plugin Js files needs to be listed in package.json under dependencies too?

from bootstrap-webpack.

jorgecas99 avatar jorgecas99 commented on May 26, 2024

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.

manodupont avatar manodupont commented on May 26, 2024

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.

manodupont avatar manodupont commented on May 26, 2024

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.

manodupont avatar manodupont commented on May 26, 2024

And i dont have any loading errors on anything in the console. Its pretty confusing.

from bootstrap-webpack.

jorgecas99 avatar jorgecas99 commented on May 26, 2024

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)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.