Getting error when trying to run my “webpack --config ./webpack.config.js”

Question

I am trying to run the webpack config for an Open Source Library called Quill , which uses Webpack as it's bundler. When I run the command webpack --config ./_develop/webpack.config.js I get the following errors for each .js file the config tries to execute on:

ERROR in ./ui/tooltip.js

C:\Users\rinktacular\Documents\Projects\Quill\ui\tooltip.js
   1:16  error  Expected linebreaks to be 'LF' but found 'CRLF'  linebreak-style
   2:40  error  Expected linebreaks to be 'LF' but found 'CRLF'  linebreak-style
   3:24  error  Expected linebreaks to be 'LF' but found 'CRLF'  linebreak-style
   4:61  error  Expected linebreaks to be 'LF' but found 'CRLF'  linebreak-style
   5:50  error  Expected linebreaks to be 'LF' but found 'CRLF'  linebreak-style
   6:53  error  Expected linebreaks to be 'LF' but found 'CRLF'  linebreak-style
   7:61  error  Expected linebreaks to be 'LF' but found 'CRLF'  linebreak-style
   8:57  error  Expected linebreaks to be 'LF' but found 'CRLF'  linebreak-style
   9:75  error  Expected linebreaks to be 'LF' but found 'CRLF'  linebreak-style
  10:10  error  Expected linebreaks to be 'LF' but found 'CRLF'  linebreak-style
  11:6   error  Expected linebreaks to be 'LF' but found 'CRLF'  linebreak-style
  12:17  error  Expected linebreaks to be 'LF' but found 'CRLF'  linebreak-style
  13:4   error  Expected linebreaks to be 'LF' but found 'CRLF'  linebreak-style
  14:1   error  Expected linebreaks to be 'LF' but found 'CRLF'  linebreak-style
  15:11  error  Expected linebreaks to be 'LF' but found 'CRLF'  linebreak-style
  16:42  error  Expected linebreaks to be 'LF' but found 'CRLF'  linebreak-style
  17:4   error  Expected linebreaks to be 'LF' but found 'CRLF'  linebreak-style
  18:1   error  Expected linebreaks to be 'LF' but found 'CRLF'  linebreak-style
  19:24  error  Expected linebreaks to be 'LF' but found 'CRLF'  linebreak-style
  20:77  error  Expected linebreaks to be 'LF' but found 'CRLF'  linebreak-style
  21:62  error  Expected linebreaks to be 'LF' but found 'CRLF'  linebreak-style
  22:60  error  Expected linebreaks to be 'LF' but found 'CRLF'  linebreak-style
  23:40  error  Expected linebreaks to be 'LF' but found 'CRLF'  linebreak-style
  24:38  error  Expected linebreaks to be 'LF' but found 'CRLF'  linebreak-style
  25:43  error  Expected linebreaks to be 'LF' but found 'CRLF'  linebreak-style
  26:72  error  Expected linebreaks to be 'LF' but found 'CRLF'  linebreak-style
  27:56  error  Expected linebreaks to be 'LF' but found 'CRLF'  linebreak-style
  28:19  error  Expected linebreaks to be 'LF' but found 'CRLF'  linebreak-style
  29:52  error  Expected linebreaks to be 'LF' but found 'CRLF'  linebreak-style
  30:56  error  Expected linebreaks to be 'LF' but found 'CRLF'  linebreak-style
  31:52  error  Expected linebreaks to be 'LF' but found 'CRLF'  linebreak-style
  32:6   error  Expected linebreaks to be 'LF' but found 'CRLF'  linebreak-style
  33:50  error  Expected linebreaks to be 'LF' but found 'CRLF'  linebreak-style
  34:54  error  Expected linebreaks to be 'LF' but found 'CRLF'  linebreak-style
  35:52  error  Expected linebreaks to be 'LF' but found 'CRLF'  linebreak-style
  36:6   error  Expected linebreaks to be 'LF' but found 'CRLF'  linebreak-style
  37:54  error  Expected linebreaks to be 'LF' but found 'CRLF'  linebreak-style
  38:55  error  Expected linebreaks to be 'LF' but found 'CRLF'  linebreak-style
  39:69  error  Expected linebreaks to be 'LF' but found 'CRLF'  linebreak-style
  40:58  error  Expected linebreaks to be 'LF' but found 'CRLF'  linebreak-style
  41:42  error  Expected linebreaks to be 'LF' but found 'CRLF'  linebreak-style
  42:6   error  Expected linebreaks to be 'LF' but found 'CRLF'  linebreak-style
  43:18  error  Expected linebreaks to be 'LF' but found 'CRLF'  linebreak-style
  44:4   error  Expected linebreaks to be 'LF' but found 'CRLF'  linebreak-style
  45:1   error  Expected linebreaks to be 'LF' but found 'CRLF'  linebreak-style
  46:11  error  Expected linebreaks to be 'LF' but found 'CRLF'  linebreak-style
  47:46  error  Expected linebreaks to be 'LF' but found 'CRLF'  linebreak-style
  48:45  error  Expected linebreaks to be 'LF' but found 'CRLF'  linebreak-style
  49:4   error  Expected linebreaks to be 'LF' but found 'CRLF'  linebreak-style
  50:2   error  Expected linebreaks to be 'LF' but found 'CRLF'  linebreak-style
  51:1   error  Expected linebreaks to be 'LF' but found 'CRLF'  linebreak-style
  52:1   error  Expected linebreaks to be 'LF' but found 'CRLF'  linebreak-style
  53:24  error  Expected linebreaks to be 'LF' but found 'CRLF'  linebreak-style

✖ 53 problems (53 errors, 0 warnings)
  53 errors, 0 warnings potentially fixable with the `--fix` option.

 @ ./quill.js 101:15-38
 @ multi ./quill.js

Here is the config:

var path = require('path');
var pkg = require('../package.json');
var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');

var bannerPack = new webpack.BannerPlugin({
  banner:
    'Quill Editor v' + pkg.version + '\n' +
    'https://quilljs.com/\n' +
    'Copyright (c) 2014, Jason Chen\n' +
    'Copyright (c) 2013, salesforce.com',
  entryOnly: true
});
var constantPack = new webpack.DefinePlugin({
  QUILL_VERSION: JSON.stringify(pkg.version)
});

var source = [
  'quill.js',
  'core.js',
  'blots',
  'core',
  'formats',
  'modules',
  'test',
  'themes',
  'ui'
].map(function(file) {
  return path.resolve(__dirname, '..', file);
});


module.exports = function(env) {
  let config = {
    context: path.resolve(__dirname, '..'),
    entry: {
      'quill.js': ['./quill.js'],
      'quill.core.js': ['./core.js'],
      'quill.core': './assets/core.styl',
      'quill.bubble': './assets/bubble.styl',
      'quill.snow': './assets/snow.styl',
      'unit.js': './test/unit.js'
    },
    output: {
      filename: '[name]',
      library: 'Quill',
      libraryExport: 'default',
      libraryTarget: 'umd',
      path: path.resolve(__dirname, '../dist/')
    },
    resolve: {
      alias: {
        'parchment': path.resolve(__dirname, '../node_modules/parchment/src/parchment')
      },
      extensions: ['.js', '.styl', '.ts']
    },
    module: {
      rules: [{
        test: /\.js$/,
        use: ['eslint-loader'],
        include: source,
        enforce: 'pre'
      }, {
        test: /\.ts$/,
        use: [{
          loader: 'ts-loader',
          options: {
            compilerOptions: {
              declaration: false,
              target: 'es5',
              module: 'commonjs'
            },
            transpileOnly: true
          }
        }]
      }, {
        test: /\.styl$/,
        include: [
          path.resolve(__dirname, '../assets')
        ],
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: [
            'css-loader',
            'stylus-loader'
          ]
        })
      }, {
        test: /\.svg$/,
        include: [
          path.resolve(__dirname, '../assets/icons')
        ],
        use: [{
          loader: 'html-loader',
          options: {
            minimize: true
          }
        }]
      }, {
        test: /\.js$/,
        include: source,
        use: [{
          loader: 'babel-loader',
          options: {
            presets: ['es2015']
          }
        }]
      }],
      noParse: [
        /\/node_modules\/clone\/clone\.js$/,
        /\/node_modules\/eventemitter3\/index\.js$/,
        /\/node_modules\/extend\/index\.js$/
      ]
    },
    plugins: [
      bannerPack,
      constantPack,
      new ExtractTextPlugin({
        filename: '[name].css',
        allChunks: true
      })
    ],
    devServer: {
      contentBase: path.resolve(__dirname, '../dist'),
      hot: false,
      port: process.env.npm_package_config_ports_webpack,
      stats: 'minimal',
      disableHostCheck: true
    }
  };

  if (env && env.dev) {
    config.module.rules = config.module.rules.slice(1);   // Remove linter
    config.module.rules[3].use[0].options = {
      plugins: ['transform-es2015-modules-commonjs']
    };
  }

  if (env && env.minimize) {
    config.entry = {
      'quill.min.js': './quill.js'
    };
    config.plugins.push(
      new webpack.optimize.UglifyJsPlugin({
        sourceMap: true
      })
    );
    config.devtool = 'source-map';
  }

  if (env && env.coverage) {
    config.module.rules[4].use[0].options = {
      plugins: ['istanbul', 'transform-es2015-modules-commonjs']
    };
  }

  return config;
};

Granted this is all Open Source and I have not changed a thing on my end, so this is a fresh install following their directions on Local Development . As such, I really am not too sure on how webpack's config works, what is wrong with my config file, and what I can do to change it.

Answer 1

You have a rule inside your webpack that tells to use a loader to load js file. This loader is 'eslint-loader' and this loader is used to lint your js file. And this is this loader that tells you that the linebreak is not correct. There are 2 ways to fix that:

• Use an editor that use the correct linebreak
• Remove or change the rule in the .eslintc

LF (\\n) is the linebreack used in Linux whereas the CRLF if the linebreak used in windows (\\r\\n)

You can also use the "eslint --fix" to try fixing this issue

./node_modules/.bin/eslint --fix yourFileThatHaserrors

But if you use an editor that convert linebreak, it will happend each time you'll save the file.

To sum up:

• Your config file is good
• Your editor is not