Eslint9

docs-site/config-overrides.js

@@ -4,25 +4,35 @@ const ModuleScopePlugin = require("react-dev-utils/ModuleScopePlugin");
 module.exports = function override(config, env) {
   config.resolve.alias["react-datepicker"] = path.resolve(__dirname, "..");
   config.resolve.alias["react"] = path.resolve(__dirname, "node_modules/react");
-  //do stuff with the webpack config...
+
+  // Add raw-loader for specific example files
   config.module.rules.push({
     test: /\.js/,
     include: path.resolve(__dirname, "src/examples"),
     use: "raw-loader",
   });
+
+  // Remove ModuleScopePlugin to allow imports outside of 'src'
   config.resolve.plugins = config.resolve.plugins.filter(
     (plugin) => !(plugin instanceof ModuleScopePlugin),
   );
-  // Enable it, so that our custom .eslintrc for the examples will work
-  for (let i = 0; i < config.module.rules.length; i++) {
-    if (Array.isArray(config.module.rules[i].use)) {
-      for (let j = 0; j < config.module.rules[i].use.length; j++) {
-        if (config.module.rules[i].use[j].loader.includes("eslint-loader")) {
-          config.module.rules[i].use[j].options.useEslintrc = true;
-          break;
-        }
+
+  // Remove ESLint plugin if it exists
+  config.plugins = config.plugins.filter(
+    (plugin) => plugin.constructor.name !== "ESLintWebpackPlugin",
+  );
+
+  // Skip ESLint loader by removing the eslint-loader rules
+  config.module.rules = config.module.rules.filter((rule) => {
+    if (rule.use) {
+      if (Array.isArray(rule.use)) {
+        return !rule.use.some(
+          ({ loader }) => loader && loader.includes("eslint-loader"),
+        );
       }
     }
-  }
+    return true;
+  });
+
   return config;
 };

eslint.config.js

@@ -0,0 +1,98 @@
+//@ts-check
+/**
+ * ESlint Configuration
+ * @type {import('eslint').Linter.Config}
+ */
+const eslint = require("@eslint/js");
+const tseslint = require("typescript-eslint");
+const react = require("eslint-plugin-react");
+const reactHooks = require("eslint-plugin-react-hooks");
+const jestPlugin = require("eslint-plugin-jest");
+
+module.exports = [
+  eslint.configs.recommended,
+  ...tseslint.configs.recommended,
+  {
+    files: ["src/**/*.{js,jsx,ts,tsx}"],
+    ignores: ["src/examples/**"],
+    plugins: {
+      "@typescript-eslint": tseslint.plugin,
+      react,
+      "react-hooks": reactHooks,
+    },
+    languageOptions: {
+      parser: tseslint.parser,
+      parserOptions: {
+        ecmaFeatures: {
+          jsx: true,
+        },
+        project: ["./tsconfig.json"],
+      },
+    },
+    settings: {
+      react: {
+        version: "detect",
+      },
+    },
+    rules: {
+      ...react.configs.recommended.rules,
+      ...reactHooks.configs.recommended.rules,
+      "@typescript-eslint/no-empty-object-type": "off",
+      "@typescript-eslint/no-unused-expressions": "off",
+      "@typescript-eslint/no-unused-vars": "off",
+    },
+  },
+  {
+    files: ["src/examples/*.js"],
+    plugins: {
+      react,
+    },
+    rules: {
+      "no-unused-expressions": "off",
+      "react/react-in-jsx-scope": "off",
+      "react/jsx-no-undef": [
+        "error",
+        {
+          allowGlobals: true,
+        },
+      ],
+    },
+    languageOptions: {
+      globals: {
+        useState: "readonly",
+        render: "readonly",
+        DatePicker: "readonly",
+        getHours: "readonly",
+        setHours: "readonly",
+        setSeconds: "readonly",
+        setMinutes: "readonly",
+        getDate: "readonly",
+        addDays: "readonly",
+        subDays: "readonly",
+        addMonths: "readonly",
+        fi: "readonly",
+        getDay: "readonly",
+        isValid: "readonly",
+        format: "readonly",
+        range: "readonly",
+        getYear: "readonly",
+        getMonth: "readonly",
+        PropTypes: "readonly",
+        CalendarContainer: "readonly",
+        subMonths: "readonly",
+        forwardRef: "readonly",
+      },
+    },
+  },
+  // New configuration for test files
+  {
+    files: ["src/**/*.test.{js,jsx,ts,tsx}", "src/**/*.spec.{js,jsx,ts,tsx}"],
+    plugins: {
+      jest: jestPlugin,
+    },
+    rules: {
+      ...jestPlugin.configs.recommended.rules,
+      "jest/expect-expect": "off",
+    },
+  },
+];

examples/hello-world/package.json

@@ -18,11 +18,7 @@
     "extends": "react-app"
   },
   "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
+    "production": [">0.2%", "not dead", "not op_mini all"],
     "development": [
       "last 1 chrome version",
       "last 1 firefox version",

package.json

@@ -30,6 +30,7 @@
     "@babel/preset-env": "^7.25.4",
     "@babel/preset-react": "^7.24.7",
     "@babel/preset-typescript": "^7.24.7",
+    "@eslint/js": "^9.12.0",
     "@react-docgen/cli": "^2.0.3",
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-commonjs": "^28.0.0",
@@ -38,7 +39,7 @@
     "@rollup/plugin-typescript": "^11.1.6",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/react": "^16.0.0",
-    "@types/eslint": "^8.56.10",
+    "@types/eslint": "^9.6.1",
     "@types/jest": "^29.5.12",
     "@types/node": "22",
     "@types/react": "^18.3.4",
@@ -49,11 +50,11 @@
     "babel-jest": "^29.7.0",
     "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
     "core-js": "^3.38.1",
-    "eslint": "^8.57.0",
+    "eslint": "^9.12.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-jest": "^28.8.0",
-    "eslint-plugin-react": "^7.35.0",
+    "eslint-plugin-react": "^7.37.1",
     "eslint-plugin-react-hooks": "^5.0.0",
     "eslint-plugin-unused-imports": "^4.1.3",
     "husky": "9",
@@ -75,7 +76,8 @@
     "stylelint-scss": "^6.5.1",
     "ts-jest": "^29.2.5",
     "tslib": "^2.7.0",
-    "typescript": "^5.5.4"
+    "typescript": "^5.5.4",
+    "typescript-eslint": "^8.9.0"
   },
   "peerDependencies": {
     "react": "^16.9.0 || ^17 || ^18",
@@ -88,7 +90,7 @@
     "prop-types": "^15.8.1"
   },
   "scripts": {
-    "eslint": "eslint --ext .js,.jsx,.ts,.tsx ./src",
+    "eslint": "eslint ./src",
     "precommit": "lint-staged --allow-empty",
     "sass-lint": "stylelint 'src/stylesheets/*.scss'",
     "lint": "yarn run eslint && yarn run sass-lint",

src/month.tsx

@@ -449,7 +449,6 @@ export default class Month extends Component<MonthProps> {
       ? isPreSelected(this.props.preSelection)
       : undefined;
 
-    // eslint-disable-next-line no-constant-condition
     while (true) {
       weeks.push(
         <Week

src/test/calendar_test.test.tsx

@@ -1504,14 +1504,12 @@ describe("Calendar", () => {
       expect(firstHeader?.textContent).toBe(firstWeekDayMin);
     }
 
-    // eslint-disable-next-line jest/expect-expect
     it("should use the 'en' locale by default", () => {
       const selected = newDate();
       const { calendar } = getCalendar({ selected });
       testLocale(calendar, selected);
     });
 
-    // eslint-disable-next-line jest/expect-expect
     it("should use the default locale when set", () => {
       const selected = newDate();
       setDefaultLocale("fi");
@@ -1521,7 +1519,6 @@ describe("Calendar", () => {
       setDefaultLocale("");
     });
 
-    // eslint-disable-next-line jest/expect-expect
     it("should use the locale specified as a prop", () => {
       registerLocale("fi", fi);
       const locale = "fi";
@@ -1530,7 +1527,6 @@ describe("Calendar", () => {
       testLocale(calendar, selected, locale);
     });
 
-    // eslint-disable-next-line jest/expect-expect
     it("should override the default locale with the locale prop", () => {
       const locale = "en";
       const selected = newDate();

src/test/datepicker_test.test.tsx

@@ -931,7 +931,6 @@ describe("DatePicker", () => {
     expect(getSeconds(date!)).toBe(12);
   });
 
-  // eslint-disable-next-line jest/expect-expect
   it("should mount and unmount properly", () => {
     type State = {
       mounted: boolean;