Update snapshots, add Chrome to browser test, remove linting JS, bump dependencies - replace deprecated eslint-loader

.github/workflows/browsers.yml

@@ -18,12 +18,10 @@ jobs:
       fail-fast: false
       matrix:
         os: [windows-latest, macos-latest]
-        browser: [edge, firefox, safari]
+        browser: [edge, firefox, safari, chrome]
         exclude:
-          # On Windows, run tests with Edge only
           - os: windows-latest
             browser: safari
-          # On macOS, run tests with only on safari
           - os: macos-latest
             browser: edge
           - os: macos-latest

.github/workflows/lint.yml

@@ -32,7 +32,10 @@ jobs:
           echo $CHANGED_TS
           node node_modules/eslint/bin/eslint.js $CHANGED_TS
 
-      - name: Lint JS bundle
-        run: |
-          npm run js:build
-          npx eslint --no-ignore ./public/assets/scripts/*.js
+      ## Can't use same eslint config for TypeScript and JavaScript
+      ## TypeScript rules cause rule definition not found errors
+      ## Can be re-enabled if this is resolved: https://github.com/eslint/eslint/issues/14851
+      # - name: Lint JS bundle
+      #   run: |
+      #     npm run js:build
+      #     npx eslint --no-ignore ./public/assets/scripts/*.js

package.json

@@ -73,16 +73,16 @@
     "eslint-config-airbnb-base": "^15.0.0",
     "eslint-config-airbnb-typescript": "^16.1.0",
     "eslint-config-prettier": "^8.3.0",
-    "eslint-loader": "^3.0.2",
     "eslint-plugin-compat": "4.0.0",
     "eslint-plugin-cypress": "^2.12.1",
     "eslint-plugin-import": "^2.25.3",
     "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-sort-class-members": "^1.14.1",
-    "express": "^4.17.1",
+    "eslint-webpack-plugin": "^3.1.1",
+    "express": "^4.17.2",
     "husky": "^7.0.4",
     "jsdom": "^19.0.0",
-    "lint-staged": "^12.1.2",
+    "lint-staged": "^12.1.3",
     "mocha": "^9.1.3",
     "node-sass": "^7.0.0",
     "nodemon": "^2.0.15",
@@ -98,7 +98,7 @@
     "typescript": "^4.5.4",
     "webpack": "^5.65.0",
     "webpack-cli": "^4.9.1",
-    "webpack-dev-middleware": "^5.2.2",
+    "webpack-dev-middleware": "^5.3.0",
     "webpack-hot-middleware": "^2.25.1"
   },
   "dependencies": {

webpack.config.base.js

@@ -1,3 +1,4 @@
+const ESLintPlugin = require('eslint-webpack-plugin');
 const path = require('path');
 
 const include = path.resolve(__dirname, './src/scripts');
@@ -10,16 +11,6 @@ module.exports = {
   entry: ['./src/scripts/choices'],
   module: {
     rules: [
-      {
-        enforce: 'pre',
-        loader: 'eslint-loader',
-        test: /\.js?$/,
-        include,
-        exclude,
-        options: {
-          quiet: true,
-        },
-      },
       {
         loader: 'babel-loader',
         test: /\.ts?$/,
@@ -40,6 +31,12 @@ module.exports = {
   resolve: {
     extensions: [".ts", ".js"]
   },
+  plugins: [new ESLintPlugin({
+    context: include,
+    files: '**/*.js',
+    exclude: 'node_modules',
+    quiet: true
+  })],
   output: {
     library: 'Choices',
     libraryTarget: 'window',