Webpack bootstrap config issue - module parse failed, You may need an appropriate loader to handle this file type

[Harshit Laddha]

Hi, I am trying to include bootstrap in webpack config with bootstrap-loader here and facing a strange issue -

ERROR in ./front/assets/styles/_bootstrap.yml
Module parse failed: /home/ubuntu/services/front/assets/styles/_bootstrap.yml Unexpected character '#' (2:0)
You may need an appropriate loader to handle this file type.
| ---
| # Output debugging info
| # loglevel: debug
|

This is the webpack configuration that I am using currently -

var path = require('path');
var webpack = require('webpack');

var CleanWebpackPlugin;
var ExtractTextPlugin = require('extract-text-webpack-plugin');

var output = 'static/dist';
var manifest = path.join(output, 'manifest.json');

var build_production = (process.env.NODE_ENV === 'production');
var build_dll_bundle = !build_production && (process.env.BUILD_DLL === 'yes');
var build_dll_consumer = !build_production && !build_dll_bundle;

var bootstrapEntryPoint = 'bootstrap-loader/lib/bootstrap.loader?' +
    'configFilePath='+path.join(__dirname, '/front/assets/styles/_bootstrap.yml') +
    '!bootstrap-loader/no-op.js';

var dll_entry = [
    'font-awesome-loader',
    bootstrapEntryPoint,
    './front/dll_bundle/dll_common.js',
    './front/dll_bundle/dll_dt.js'
]

var entry = {
    common: ['font-awesome-loader', bootstrapEntryPoint, './front/dll_bundle/dll_common.js', './front/common.js'],
    service: './front/service.js',
    billing: './front/billing.js',
    customer: './front/customer.js',
    deployment: './front/deployment.js',
    dt: ['./front/dll_bundle/dll_dt.js', './front/dt.js']
};

if (build_production) {
    console.log("Building for production");
}

if (build_dll_bundle) {
    console.log("Building dll bundle for development");
    entry = {
        dll_bundle: dll_entry
    }
}

if (build_dll_consumer) {
    console.log("Building dll consumer for development");
    entry['common'] = './front/common.js';
    entry['dt'] = './front/dt.js';
}

module.exports = {
    entry: entry,
    output: {
        path: path.join(__dirname, output),
        publicPath: '/static/dist/',
        filename: '[name].[chunkhash].js',
        chunkFilename: '[id].[chunkhash].js'
    },
    plugins: [


    ],
    module: {
        rules: [
            {
                test: /\.(woff2?|ttf|eot|otf|webp|svg|png|jpg|gif|ico)(\?.*)?$/,
                loader: 'file-loader',
                query: {
                    name: 'media/[name].[hash:20].[ext]'
                }
            },
            {
                test: /\.vue$/,
                loader: 'vue-loader',
                options: {
                  loaders: {
                    css: ExtractTextPlugin.extract({
                      use: 'css-loader',
                      fallback: 'vue-style-loader'
                    })
                  }
                }
            },
            {
                test: /datatables\.net.*/,
                loader: 'imports-loader?define=>false'
            },
            {
                test:/bootstrap-sass[\/\\]assets[\/\\]javascripts[\/\\]/,
                loader: 'imports-loader?jQuery=jquery'
            },
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/,
                query: 'cacheDirectory'
            },
            {
                test: /\.css$/,
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: 'css-loader'
                })
            },
            {
                test: /\.scss$/,
                exclude: [
                    '/.*themify-icons\.scss/'
                ],
                use: ['style-loader', 'css-loader', 'sass-loader']
            },
            {
                test: require.resolve('jquery'),
                use: [
                  {
                    loader: 'expose-loader',
                    query: 'jQuery'
                  },
                  {
                    loader: 'expose-loader',
                    query: '$'
                  }
                ]
            },
            {
                test: require.resolve('moment'),
                use: [
                  {
                    loader: 'expose-loader',
                    query: 'moment'
                  }
                ]
            }
        ],
    },
    resolve: {
        alias: {
            'vue$': 'vue/dist/vue.common.js'
        }
    }

}

if (build_production || build_dll_bundle)
    CleanWebpackPlugin = require('clean-webpack-plugin')

if (!build_dll_bundle) {

    var ManifestRevisionPlugin = require('manifest-revision-webpack-plugin');
    var CleanManifestPlugin = require('webpack-clean-manifest-plugin').default;
    var CommonsChunkPlugin = require('webpack/lib/optimize/CommonsChunkPlugin');

    module.exports.plugins = (module.exports.plugins || []).concat([

        // manifest file generator
        new ManifestRevisionPlugin(manifest, {
            rootAssetPath: './front',
            ignorePaths: ['./front/assets', './front/dll_bundle'],
            format: function (data, parsedAssets) {
                var Format = require('manifest-revision-webpack-plugin/format');
                var format = new Format(data, parsedAssets);
                var output = format.general();
                return output.assets;
            }
        }),
        new CleanManifestPlugin(output, {
            manifest: manifest,
            exclude: /manifest.json|media|dll/
        }),
        // share common code between the pages
        new CommonsChunkPlugin({
            filename: "common.[chunkhash].js",
            name: "common",
        }),
        new ExtractTextPlugin({
            filename: 'styles/[name].[hash].css',
            allChunks: true
        })

    ]);
}

if (build_dll_bundle) {

    // dll/dll_bundle.js
    module.exports.output.filename = 'dll/[name].js';

    module.exports.plugins = (module.exports.plugins || []).concat([

        // clean static/dist/media
        new CleanWebpackPlugin([path.join(output, 'media')]),

        // dll/dll_bundle.css
        new ExtractTextPlugin({
            filename: 'dll/[name].css',
            allChunks: true
        }),
/*
        // we are using simple entry, not a library!

        new webpack.DllPlugin({
            // The manifest we will use to reference the libraries
            path: path.join(__dirname, output, 'dll/[name]-manifest.json'),
            name: '[name]_[hash]'
        })
*/
    ])

    // module.exports.output.library = '[name]_[hash]';
}

if (build_dll_consumer) {

    module.exports.plugins = (module.exports.plugins || []).concat([

        //new webpack.PrefetchPlugin('./front/assets/styles/service.scss'),
        //new webpack.PrefetchPlugin('./front/assets/styles/customer.scss'),
        //new webpack.PrefetchPlugin('./front/assets/styles/dt.scss'),

/*
        // we are using simple entry, not a library!

        new webpack.DllReferencePlugin({
            manifest: require(path.join(__dirname, output, 'dll/dll_bundle-manifest.json'))
        })
*/
    ])

}

if (!build_production) {
    module.exports.devtool = 'eval'
}

if (build_production) {

    var OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');

    module.exports.devtool = 'cheap-module-source-map'

    // http://vue-loader.vuejs.org/en/workflow/production.html
    module.exports.plugins = (module.exports.plugins || []).concat([

        // clean static/dist
        new CleanWebpackPlugin([output]),

        new webpack.DefinePlugin({
            'process.env': {
                NODE_ENV: '"production"'
            }
        }),

        new webpack.optimize.UglifyJsPlugin({
            sourceMap: true,
            output: {
                comments: false
            }
        }),

        new webpack.LoaderOptionsPlugin({
            minimize: true
        }),

        new OptimizeCssAssetsPlugin({
          cssProcessor: require('cssnano'),
          cssProcessorOptions: {
              zindex: false
          },
          canPrint: true
        })
    ])
}

and this is the bootstrap.yml config that I am using with webpack build -

---
# Output debugging info
# loglevel: debug

# Major version of Bootstrap: 3 or 4
bootstrapVersion: 3

# If Bootstrap version 3 is used - turn on/off custom icon font path
useCustomIconFontPath: false

# Webpack loaders, order matters
styleLoaders:
  - style-loader
  - css-loader
  - sass-loader

# Extract styles to stand-alone css file
# Different settings for different environments can be used,
# It depends on value of NODE_ENV environment variable
# This param can also be set in webpack config:
#   entry: 'bootstrap-loader/extractStyles'

extractStyles: true

# env:
#   development:
#     extractStyles: false
#   production:
#     extractStyles: true


# Customize Bootstrap variables that get imported before the original Bootstrap variables.
# Thus, derived Bootstrap variables can depend on values from here.
# See the Bootstrap _variables.scss file for examples of derived Bootstrap variables.
#
preBootstrapCustomizations: ./_bootstrap-pre.scss


# This gets loaded after bootstrap/variables is loaded
# Thus, you may customize Bootstrap variables
# based on the values established in the Bootstrap _variables.scss file
#
bootstrapCustomizations: ./_bootstrap-post.scss


# Import your custom styles here
# Usually this endpoint-file contains list of @imports of your application styles
#
appStyles: ./app.scss


### Bootstrap styles
styles:

  # Mixins
  mixins: true

  # Reset and dependencies
  normalize: true
  print: true
  glyphicons: true

  # Core CSS
  scaffolding: true
  type: true
  code: true
  grid: true
  tables: true
  forms: true
  buttons: true

  # Components
  component-animations: true
  dropdowns: true
  button-groups: true
  input-groups: true
  navs: true
  navbar: true
  breadcrumbs: true
  pagination: true
  pager: true
  labels: true
  badges: true
  jumbotron: true
  thumbnails: true
  alerts: true
  progress-bars: true
  media: true
  list-group: true
  panels: true
  wells: true
  responsive-embed: true
  close: true

  # Components w/ JavaScript
  modals: true
  tooltip: true
  popovers: true
  carousel: true

  # Utility classes
  utilities: true
  responsive-utilities: true

### Bootstrap scripts
scripts:
  transition: true
  alert: true
  button: true
  carousel: true
  collapse: true
  dropdown: true
  modal: true
  tooltip: true
  popover: true
  scrollspy: true
  tab: true
  affix: true

now even when I strip out all the comments from this config file I still get this error -

ERROR in ./front/assets/styles/_bootstrap.yml
Module parse failed: /home/harshit/Desktop/current/roman-billing-app/services/front/assets/styles/_bootstrap.yml Unexpected token (12:28)
You may need an appropriate loader to handle this file type.
| extractStyles: true
| 
| preBootstrapCustomizations: ./_bootstrap-pre.scss
| 
| bootstrapCustomizations: ./_bootstrap-post.scss
Child extract-text-webpack-plugin:

So, can someone please help me find out what am I missing in the config here or how to resolve this issue ? Please let me know if there is any more information I can provide in order to help debug / resolve this issue.