fix: standardize webpack 5 dev server, fix MUI exports, and migrate to ESLint v10 flat config to restore npm run dev

eslint.config.js

@@ -0,0 +1,57 @@
+const pluginReact = require('eslint-plugin-react');
+const pluginJsxA11y = require('eslint-plugin-jsx-a11y');
+const pluginReactHooks = require('eslint-plugin-react-hooks');
+const globals = require('globals');
+
+module.exports = [
+  {
+    ignores: ['dist/**', 'build/**', 'coverage/**', 'docs/**'],
+  },
+  {
+    files: ['src/**/*.{js,jsx}', 'examples/**/*.{js,jsx}', 'test/**/*.{js,jsx}', '*.js'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      sourceType: 'module',
+      parserOptions: {
+        ecmaFeatures: {
+          jsx: true,
+        },
+      },
+      globals: {
+        ...globals.browser,
+        ...globals.node,
+        ...globals.mocha,
+        ...globals.es2020,
+      },
+    },
+    settings: {
+      react: {
+        version: 'latest',
+      },
+    },
+    plugins: {
+      react: pluginReact,
+      'jsx-a11y': pluginJsxA11y,
+      'react-hooks': pluginReactHooks,
+    },
+    rules: {
+      ...pluginJsxA11y.configs.recommended.rules,
+      'no-console': 'off',
+      semi: 2,
+      'no-undef': 2,
+      'no-undef-init': 2,
+      'no-tabs': 2,
+      'react/self-closing-comp': 2,
+      'react/no-typos': 2,
+      'react/jsx-no-duplicate-props': 'warn',
+      'react-hooks/rules-of-hooks': 'error',
+      'react-hooks/exhaustive-deps': 'warn',
+      'jsx-a11y/no-autofocus': [
+        2,
+        {
+          ignoreNonDOM: true,
+        },
+      ],
+    },
+  },
+];

examples/Router/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { createRoot } from 'react-dom/client';
-import { HashRouter as Router, Route, Switch, withRouter } from 'react-router-dom';
+import { HashRouter as Router, Route, Routes, useNavigate, useLocation } from 'react-router-dom';
 import { withStyles } from 'tss-react/mui';
 import ExamplesGrid from './ExamplesGrid';
 import examples from '../examples';
@@ -17,58 +17,52 @@ const styles = {
   },
 };
 
-class Examples extends React.Component {
-  returnHome = () => {
-    this.props.history.push('/');
-  };
+function Examples({ classes }) {
+  const navigate = useNavigate();
+  const location = useLocation();
 
-  render() {
-    const { classes } = this.props;
+  const defaultTheme = createTheme();
+  const returnHomeStyle = { padding: '0px', margin: '20px 0 20px 0' };
 
-    var returnHomeStyle = { padding: '0px', margin: '20px 0 20px 0' };
-
-    const defaultTheme = createTheme();
-
-    return (
-      <ThemeProvider theme={defaultTheme}>
-        <main className={classes.root}>
-          <div className={classes.contentWrapper}>
-            <Switch>
-              <Route path="/" exact render={() => <ExamplesGrid examples={examples} />} />
-              {Object.keys(examples).map((label, index) => (
-                <Route
-                  key={index}
-                  path={`/${label.replace(/\s+/g, '-').toLowerCase()}`}
-                  exact
-                  component={examples[label]}
-                />
-              ))}
-            </Switch>
-            <div>
-              {this.props.location.pathname !== '/' && (
-                <div style={returnHomeStyle}>
-                  <Button color="primary" onClick={this.returnHome}>
-                    Back to Example Index
-                  </Button>
-                </div>
-              )}
-            </div>
+  return (
+    <ThemeProvider theme={defaultTheme}>
+      <main className={classes.root}>
+        <div className={classes.contentWrapper}>
+          <Routes>
+            <Route path="/" element={<ExamplesGrid examples={examples} />} />
+            {Object.keys(examples).map((label, index) => (
+              <Route
+                key={index}
+                path={`/${label.replace(/\s+/g, '-').toLowerCase()}`}
+                element={React.createElement(examples[label])}
+              />
+            ))}
+          </Routes>
+          <div>
+            {location.pathname !== '/' && (
+              <div style={returnHomeStyle}>
+                <Button color="primary" onClick={() => navigate('/')}>
+                  Back to Example Index
+                </Button>
+              </div>
+            )}
           </div>
-        </main>
-      </ThemeProvider>
-    );
-  }
+        </div>
+      </main>
+    </ThemeProvider>
+  );
 }
 
-const StyledExamples = withRouter(withStyles(Examples, styles));
+const StyledExamples = withStyles(Examples, styles);
 
 function App() {
   return (
-    <Router hashType="noslash">
+    <Router>
       <StyledExamples />
     </Router>
   );
 }
+
 const container = document.getElementById('app-root');
 const root = createRoot(container);
 root.render(<App />);

package.json

@@ -7,7 +7,7 @@
     "dist"
   ],
   "scripts": {
-    "dev": "cross-env NODE_ENV=development webpack-dev-server -d --progress --colors",
+    "dev": "cross-env NODE_ENV=development webpack-dev-server --progress --color",
     "test": "cross-env NODE_ENV=test mocha --require ./test/babel-register.js --extensions js,jsx test/**/*.test.js",
     "docs:dev": "next docs",
     "docs:build": "cross-env NODE_ENV=production next build docs",
@@ -38,12 +38,13 @@
   "homepage": "https://github.com/layer5io/mui-datatables#readme",
   "devDependencies": {
     "@babel/core": "^7.29.0",
+    "@babel/eslint-parser": "^7.27.1",
     "@babel/plugin-external-helpers": "^7.27.1",
+    "@babel/plugin-transform-async-to-generator": "^7.28.6",
     "@babel/plugin-transform-class-properties": "^7.25.9",
     "@babel/plugin-transform-nullish-coalescing-operator": "^7.26.6",
     "@babel/plugin-transform-object-rest-spread": "^7.25.9",
     "@babel/plugin-transform-optional-chaining": "^7.25.9",
-    "@babel/plugin-transform-async-to-generator": "^7.28.6",
     "@babel/plugin-transform-runtime": "^7.29.0",
     "@babel/preset-env": "^7.29.2",
     "@babel/preset-react": "^7.28.5",
@@ -58,7 +59,6 @@
     "@rollup/plugin-commonjs": "^29.0.2",
     "@rollup/plugin-node-resolve": "^16.0.3",
     "@rollup/plugin-replace": "^6.0.3",
-    "@babel/eslint-parser": "^7.27.1",
     "babel-loader": "^10.1.1",
     "babel-plugin-istanbul": "^7.0.1",
     "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
@@ -68,12 +68,13 @@
     "css-loader": "^7.1.4",
     "enzyme": "^3.11.0",
     "eslint": "^10.1.0",
-    "eslint-webpack-plugin": "^5.0.3",
     "eslint-plugin-filenames": "^1.3.2",
     "eslint-plugin-import": "^2.32.0",
     "eslint-plugin-jsx-a11y": "^6.10.2",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-webpack-plugin": "^5.0.3",
+    "globals": "^17.4.0",
     "html-webpack-plugin": "^5.6.6",
     "ignore-styles": "^5.0.1",
     "jsdom": "^29.0.1",

webpack.config.js

@@ -1,28 +1,23 @@
 const path = require('path');
 const webpack = require('webpack');
-const HtmlWebpackPlugin = require('html-webpack-plugin');
-const ESLintPlugin = require('eslint-webpack-plugin');
 
 module.exports = {
+  mode: process.env.NODE_ENV === 'production' ? 'production' : 'development',
   entry: {
     app: ['core-js/stable', 'regenerator-runtime/runtime', './examples/Router/index.js'],
   },
-  stats: 'verbose',
+  stats: 'errors-warnings',
   context: __dirname,
   output: {
     filename: 'bundle.js',
   },
   devtool: 'source-map',
-  resolve: {
-    mainFields: ['browser', 'module', 'main'],
-  },
   devServer: {
-    disableHostCheck: true,
+    static: { directory: path.resolve(__dirname) },
+    allowedHosts: 'all',
     host: 'localhost',
     hot: true,
-    inline: true,
     port: process.env.PORT || 5050,
-    stats: 'errors-warnings',
   },
   module: {
     rules: [
@@ -31,37 +26,15 @@ module.exports = {
         exclude: /node_modules/,
         use: ['babel-loader'],
       },
-      {
-        test: /\.(js|jsx)$/,
-        include: /node_modules\/(@mui|@emotion)\//,
-        use: {
-          loader: 'babel-loader',
-          options: {
-            presets: [
-              ['@babel/preset-env', { modules: 'commonjs' }],
-              '@babel/preset-react',
-            ],
-            plugins: [
-              '@babel/plugin-transform-optional-chaining',
-              '@babel/plugin-transform-nullish-coalescing-operator',
-            ],
-          },
-        },
-      },
       {
         test: /\.css$/i,
         use: ['style-loader', 'css-loader'],
       },
     ],
   },
   plugins: [
-    new ESLintPlugin({ extensions: ['js', 'jsx'] }),
-    new webpack.HotModuleReplacementPlugin(),
-    new webpack.NamedModulesPlugin(),
     new webpack.DefinePlugin({
-      'process.env': {
-        NODE_ENV: JSON.stringify('development'),
-      },
+      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development'),
     }),
   ],
 };