Encountering a problem during the transition from webpack 1.x to webpack 2.x, specifically related to the absence of an

Currently in the process of transitioning a project from Webpack 1 to Webpack 2, I've hit a snag with integrating eslint. In my existing Webpack 1 configuration, eslint is set up as follows:

eslint: {
    configFile: path.join(__dirname, "eslint.core.js"),
    useEslintrc: false
}

This setup has been functioning properly. However, in Webpack 2, it needs to be included within the plugins property like this:

plugins: [

    new LoaderOptionsPlugin({

        options: {

            eslint: {

                configFile: path.join(__dirname, "eslint.core.js"),

                useEslintrc: false

            }

        }

    }
)
]

Upon running commands in the terminal, an error message stating 

Module build failed: Error: No ESLint configuration found
keeps appearing. Can anyone point out what might be incorrect in how I'm approaching this? Any guidance will be greatly appreciated.

The versions I'm utilizing are: 


"webpack": "2.2.0-rc.3"
"eslint": "3.5.0"
"eslint-loader": "1.5.0"
"eslint-plugin-mocha": "4.5.1"
"eslint-plugin-react": "6.2.2"

javascriptconfigurationwebpackwebpack-2

Answer №1

I encountered the same issue of 

Module build failed: Error: No ESLint configuration found
. Thankfully, I found a solution by moving all the eslint-loader options from LoaderOptionsPlugin directly into rules section in my webpack.config.js file. Here is how my configuration looks:

// webpack.config.js
var webpack = require('webpack');
var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
    context: __dirname + "/src",
    entry: './app.js',
    output: {
        path: path.join(__dirname, 'dist'),
        publicPath: '',
        filename: 'bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                enforce: 'pre',
                loader: 'eslint-loader',
                exclude: /node_modules/,
                options: {
                    emitWarning: true,
                    emitError: true,
                    //failOnWarning: false,
                    //failOnError: true,
                    useEslintrc: false,
                    // configFile: path.join(__dirname, "eslint_conf.js")
                    configFile: "eslint_conf.js"
                }
            },
            { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" },
            { test: /\.(png|jpg)$/, loader: 'file-loader?name=[path][name].[ext]&outputPath=../dist/' },
            {
                test: /\.(scss|sass|css)$/,
                loader: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: [{
                            loader: "css-loader",
                            options: {
                                autoprefixer: true,
                                sourceMap: true,
                                importLoaders: true
                            }
                        },
                        {
                            loader: "fast-sass-loader",
                            options: {
                                // sourceMap: true
                            }
                        }
                    ]
                })
            }
        ]
    },

    plugins: [
        new HtmlWebpackPlugin({
            template: './index.html'
        }),
        new ExtractTextPlugin('style.css'),
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery",
            'window.jQuery': 'jquery',
            'window.$': 'jquery'
        })

    ]
};

To run eslint using npm run lintjs, I added scripts to my package.json like this:

    "scripts": {
    "dev": "nodemon --watch webpack.config.js --exec \"webpack-dev-server --env development\"",
    "lintjs": "eslint src --cache --no-eslintrc -c eslint_conf.js",
    "build": "webpack --env production"
  }

The devDependencies I am utilizing are:

"devDependencies": {
    "autoprefixer": "^6.7.6",
    "babel-core": "^6.23.1",
    "babel-eslint": "^7.1.1",
    "babel-loader": "^6.3.2",
    "babel-preset-es2015": "^6.22.0",
    "css-loader": "^0.26.2",
    "eslint": "^3.17.1",
    "eslint-loader": "^1.6.3",
    "extract-text-webpack-plugin": "^2.1.0",
    "fast-sass-loader": "^1.0.7",
    "file-loader": "^0.10.1",
    "html-loader": "^0.4.5",
    "html-webpack-plugin": "^2.28.0",
    "inuitcss": "^6.0.0-beta.4",
    "node-sass": "^4.5.0",
    "postcss-cssnext": "^2.9.0",
    "postcss-import": "^9.1.0",
    "postcss-loader": "^1.3.3",
    "style-loader": "^0.13.2",
    "webpack": "^2.2.1"
  }

Answer №2

execute eslint --init at the project's main directory
By doing so, you will create a configuration file automatically
simply include the code snippet below in the webpack configuration

{
    loaders: [
      {
        test: /\.js$/,
        loaders: eslint-loader
       }
     ]
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What are the reasons for passing a global variable to a function?

Is there a difference between the two ways of writing this code? First Method: (function(i) { // Manipulate i here }(global_variable)) Second Method: (function() { // Manipulate global_variable here }()) What's the reason for passing a gl ...

javascriptscopees5-shim

Disable hover effects in CSS with JavaScript

I am looking for a way to deactivate CSS hover functionality using JavaScript. Within a form, there is a button that sends data to the database server. By utilizing OnClientClick() of an ASP.NET Button control, my goal is to modify the text of the element ...

javascriptcssasp.net

Express routes are malfunctioning

I have a situation with two different routes: /emails and /eamils/:id: function createRouter() { let router = express.Router(); router.route('/emails/:id').get((req, res) => { console.log('Route for get /emails/id'); }); ...

javascriptnode.jsexpressparametersroutes

How come I am receiving a null value for isMatch from bcrypt compare even though the two password strings match exactly?

Currently, I am attempting to authenticate a user based on a password. My approach involves using bcrypt compare to check if the user's requested password matches one stored in a MongoDB database. Despite the passwords being identical, I keep receivin ...

javascriptnode.jsmongodbnpmbcrypt

Angular 6 - detecting clicks outside of a menu

Currently, I am working on implementing a click event to close my aside menu. I have already created an example using jQuery, but I want to achieve the same result without using jQuery and without direct access to the 'menu' variable. Can someon ...

javascriptjqueryangularhtmltypescript

Navigate through the page and once you reach a specific point, scroll the element

I'm feeling a bit stuck on how to achieve this particular effect. Imagine a web page where, as a user scrolls down, a specific element responds to the mouse scroll input by appearing to move along with the scrolling motion. Once that element reaches ...

javascripthtmlcss

Confirming the information in two sections of a form

Could someone assist me with validating my form? Specifically, I need help ensuring that the house number field only accepts two numbers and the postcode field only allows 5 characters. I have implemented a pattern attribute for validation and I am curiou ...

javascripthtmlformsvalidation

Samsung browser encounters an international error

After developing my web application using Angular2 Rc1, I noticed that it functions perfectly on Safari, Firefox, and Chrome browsers. However, when trying to access the application on my Galaxy S6 using the default browser, an error pops up: https://i.s ...

javascriptbrowserangular

Enhancing the data picker by incorporating date formatting for improved usability

I have a datepicker set up to display the current date in this format: $(".final-date").text($.datepicker.formatDate('dd.mm.yy', new Date())); This is being used in my loan calculator. I need to figure out how to add days to the current date. F ...

javascriptjqueryjquery-ui-datepicker

JavaScript seems to have difficulty correctly parsing objects from JSON

Having trouble populating a Repeat Box with objects from a JSON document. Despite my efforts, it keeps duplicating the first item instead of adding each one individually. Any ideas on what might be causing this issue? Below is the code I am currently usin ...

javascriptjsonsmartface.io

Short-circuiting async flows on non-error events in Node.js

Node implements the CPS convention for callbacks. Typically, when a function encounters an error, it is common practice to either handle the error or callback the error to the parent function by utilizing something like return cb(err). One challenge I fac ...

javascriptnode.jsasynchronous

Upon removing an element, the button click event fails to trigger

I recently created a div that looks like this <div id="hidden"> <img src="photos/Close-2-icon.png" width="16" height="16"> <input id="add" value="Add field" type="button" > <input type='button' id=&a ...

javascriptjqueryhtml

ag-Grid - Automatically adjusting the height of detail section when data updates

I have implemented a table with a Master/Detail setup and I am utilizing the getRowHeight callback. Initially, the row height is set correctly. I expect that when the table data is updated, the row height for rows containing a detail grid should be recalc ...

javascriptreactjsag-gridag-grid-react

Issue: The provider "tProvider" is not recognized in the Rails application using angularJS

Having trouble with AngularJS? I encountered an error when minifying my javascript that reads "Error: Unknown provider: tProvider <- t". Interestingly, disabling the minification fixes the issue. I've followed all the tips provided in http://docs.a ...

javascriptruby-on-railsangularjs

SmoothDivScroll jQuery Plugin may encounter issues when JavaScript files are loaded asynchronously

I recently encountered an issue with SmoothDivScroll when I attempted to load all the JS files asynchronously. I implemented my own async loading pattern using Lazyload.js by Ryan Grove. I also experimented with Modernizr's load/complete pattern, but ...

javascriptjquerypluginsasynchronoussmooth-scrolling

Should a checkbox be added prior to the hyperlink?

html tags <ul class="navmore"> <li><a href="link-1">Link 1</a></li> <li><a href="link-2">Link 2</a></li> </ul> Jquery Implementation in the footer $(".navmore li a").each(function(){ v ...

javascriptjquery

Jest and Enzyme failing to trigger `onload` callback for an image

I'm having trouble testing the onload function of an instance of the ImageLoader class component. The ImageLoader works fine, but my tests won't run properly. Here's an example of the class component: export default class ImageLoader extend ...

javascriptreactjsjestjsenzymejsdom

AngularJS not displaying loader during AJAX request

While utilizing ajax requests with $http, there seems to be a delay due to the server operation taking longer than expected. I have implemented a loader to display while processing the request, but unfortunately it is not showing up on the page. Even after ...

javascriptangularjsajax

The Angular2 Observable fails to be activated by the async pipe

Take a look at this simple code snippet using angular2/rxjs/typescript public rooms: Observable<Room[]>; constructor ( ... ) { this.rooms = this.inspectShipSubject .do(() => console.log('foo')) .switchMap(shi ...

javascriptangulartypescriptrxjs

JQuery: Issues with attaching .on handlers to dynamically added elements

I'm currently developing a comment system. Upon loading the page, users will see a box to create a new comment, along with existing comments that have reply buttons. Clicking on a reply button will duplicate and add the comment text box like this: $( ...

javascriptjqueryajax