TypeError: Cannot read properties of undefined (reading 'D:\projects\my-project\frontend\craco.config.js')

[agnel]

What's happening
(clearly describe what's going wrong)

I have a project created using CRA 5 and I'm using CRACO 7.0.0 with node 16.14.2
Things were fine, I decided to upgrade to Node 20.12.1 and I get the below error when trying to start the project.

(node:6396) ExperimentalWarning: Importing JSON modules is an experimental feature and might change at any time
(Use `node --trace-warnings ...` to show where the warning was created)
D:\projects\my-project\frontend\.yarn\cache\import-fresh-npm-3.3.0-3e34265ca9-2cacfad06e.zip\node_modules\import-fresh\index.js:16
        const oldModule = require.cache[filePath];
                                       ^

TypeError: Cannot read properties of undefined (reading 'D:\projects\my-project\frontend\craco.config.js')
    at module.exports (D:\projects\my-project\frontend\.yarn\cache\import-fresh-npm-3.3.0-3e34265ca9-2cacfad06e.zip\node_modules\import-fresh\index.js:16:33)
    at loadJs (D:\projects\my-project\frontend\.yarn\cache\cosmiconfig-npm-7.1.0-13a5090bcd-c53bf7befc.zip\node_modules\cosmiconfig\dist\loaders.js:16:18)
    at ExplorerSync.loadFileContentSync (D:\projects\my-project\frontend\.yarn\cache\cosmiconfig-npm-7.1.0-13a5090bcd-c53bf7befc.zip\node_modules\cosmiconfig\dist\ExplorerSync.js:84:26)
    at ExplorerSync.createCosmiconfigResultSync (D:\projects\my-project\frontend\.yarn\cache\cosmiconfig-npm-7.1.0-13a5090bcd-c53bf7befc.zip\node_modules\cosmiconfig\dist\ExplorerSync.js:89:30)
    at ExplorerSync.loadSearchPlaceSync (D:\projects\my-project\frontend\.yarn\cache\cosmiconfig-npm-7.1.0-13a5090bcd-c53bf7befc.zip\node_modules\cosmiconfig\dist\ExplorerSync.js:70:25)
    at ExplorerSync.searchDirectorySync (D:\projects\my-project\frontend\.yarn\cache\cosmiconfig-npm-7.1.0-13a5090bcd-c53bf7befc.zip\node_modules\cosmiconfig\dist\ExplorerSync.js:55:32)
    at run (D:\projects\my-project\frontend\.yarn\cache\cosmiconfig-npm-7.1.0-13a5090bcd-c53bf7befc.zip\node_modules\cosmiconfig\dist\ExplorerSync.js:35:27)
    at cacheWrapperSync (D:\projects\my-project\frontend\.yarn\cache\cosmiconfig-npm-7.1.0-13a5090bcd-c53bf7befc.zip\node_modules\cosmiconfig\dist\cacheWrapper.js:28:18)
    at ExplorerSync.searchFromDirectorySync (D:\projects\my-project\frontend\.yarn\cache\cosmiconfig-npm-7.1.0-13a5090bcd-c53bf7befc.zip\node_modules\cosmiconfig\dist\ExplorerSync.js:47:49)
    at ExplorerSync.searchSync (D:\projects\my-project\frontend\.yarn\cache\cosmiconfig-npm-7.1.0-13a5090bcd-c53bf7befc.zip\node_modules\cosmiconfig\dist\ExplorerSync.js:27:25)

Node.js v20.12.1

What should happen
(clearly describe what should happen instead)

I shouldn't have got the error

To reproduce
(list the steps to reproduce this behavior)

CRACO version
7.0.0

CRACO config

// craco.config.js

const { CracoAliasPlugin } = require('react-app-alias');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const WebpackBar = require('webpackbar');
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
const path = require('path');
const webpackMerge = require('webpack-merge');
const packageJson = require('./package.json');

const paths = {
  src: path.join(__dirname, 'src'),
  public: path.join(__dirname, 'public'),
};

const cracoAlias = () => ({
  plugins: [
    {
      plugin: CracoAliasPlugin,
      options: {},
    },
  ],
});

const copyTranslations = () => ({
  plugin: CopyWebpackPlugin,
  options: {
    patterns: [
      {
        from: path.join(paths.src, 'i18n', 'locales', '**', '*'),
        to: path.join(paths.public, 'locales'),
      },
    ],
  },
});

const production = () => {
  return webpackMerge.merge(copyTranslations(), cracoAlias());
};

// module.exports = () => production();
module.exports = {
  // https://stackoverflow.com/a/70391506
  typescript: {
    // Visual Studio Code does type checking, so CRA doesn't need to:
    enableTypeChecking: false,
  },
  babel: {
    loaderOptions: {
      // Enable babel-loader cache:
      cacheDirectory: true, // This is the correct location for cacheDirectory (it was wrong in the question)
      // Compress cache which improves launch speed at the expense of disk space:
      cacheCompression: false,
    },

    // https://mui.com/material-ui/guides/minimizing-bundle-size/
    plugins: [
      ['babel-plugin-direct-import', { modules: ['@mui/icons-material'] }],
    ],
  },
  eslint: {
    enable: false,
  },
  webpack: {
    configure: {
      cache: {
        // Enable Webpack cache:
        type: 'filesystem',
        // This have any effect until Craco updates to CRA v5
        // which has support for Webpack v5 (see notes below)
      },
    },
    plugins: [
      new WebpackBar({
        name: `${packageJson.name}@${packageJson.version}`,
        reporters:
          process.env.NODE_ENV === 'development'
            ? [
                // Enable default progress bar:
                'fancy',
                // Display time for compile steps after compilation:
                'profile',
                // (Optional) Display launch time and chunck size:
                'stats',
              ]
            : [
                // Hide fancy progress bar and profiling for production build:
                'basic',
              ],
      }),
      new BundleAnalyzerPlugin({
        openAnalyzer: false,
        analyzerMode: 'static',
        reportFilename: path.join(__dirname, 'build', 'bundle_analysis.html'),
      }),
    ],
  },
  plugins: [
    {
      plugin: CopyWebpackPlugin,
      options: {
        patterns: [
          {
            from: path.join(paths.src, 'i18n', 'locales', '**', '*'),
            to: path.join(paths.public, 'locales'),
          },
        ],
      },
    },
    {
      plugin: CracoAliasPlugin,
      options: {},
    },
  ],
};

package.json

// paste your package.json (or at least your project dependencies) here
{
  "name": "my-project",
  "version": "0.1.0",
  "private": true,
  "packageManager": "[email protected]",
  "dependencies": {
    "@emotion/react": "^11.11.3",
    "@emotion/styled": "^11.11.0",
    "@fontsource/roboto": "^4.5.8",
    "@hookform/error-message": "^2.0.1",
    "@hookform/resolvers": "^3.1.1",
    "@mui/base": "^5.0.0-beta.30",
    "@mui/icons-material": "^5.15.3",
    "@mui/lab": "^5.0.0-alpha.159",
    "@mui/material": "^5.15.3",
    "@mui/system": "^5.15.3",
    "@mui/x-charts": "^6.18.7",
    "@mui/x-data-grid": "^6.18.7",
    "@mui/x-date-pickers": "^6.18.7",
    "@mui/x-tree-view": "^6.17.0",
    "@uidotdev/usehooks": "^2.4.1",
    "axios": "^1.2.1",
    "date-fns": "^2.30.0",
    "google-sans": "github:agnel/google-sans",
    "http-status-codes": "^2.3.0",
    "i18next": "^22.5.1",
    "i18next-browser-languagedetector": "^7.0.2",
    "i18next-http-backend": "^2.2.1",
    "js-cookie": "^3.0.5",
    "lodash": "^4.17.21",
    "match-sorter": "^6.3.1",
    "mdi-material-ui": "^7.6.0",
    "mobx": "^6.9.0",
    "mobx-react": "^7.6.0",
    "mousetrap": "^1.6.5",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-highlight-words": "^0.20.0",
    "react-hook-form": "^7.49.3",
    "react-i18next": "^12.3.1",
    "react-redux": "^8.0.5",
    "react-router-dom": "^6.4.4",
    "redux": "^4.2.0",
    "rxjs": "^7.6.0",
    "rxjs-hooks": "^0.8.0-alpha.0",
    "web-vitals": "^2.1.0",
    "yup": "^1.2.0"
  },
  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "craco eject",
    "lint": "eslint src",
    "prettier:fix": "prettier --write",
    "prepare": "husky install"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@babel/core": "^7.20.5",
    "@babel/eslint-parser": "^7.19.1",
    "@babel/plugin-syntax-flow": "^7.18.6",
    "@babel/plugin-transform-react-jsx": "^7.19.0",
    "@commitlint/cli": "^18.4.4",
    "@commitlint/config-conventional": "^18.4.4",
    "@craco/craco": "7.1.0",
    "@testing-library/dom": "^8.19.0",
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^13.0.0",
    "@testing-library/user-event": "^13.2.1",
    "@types/jest": "^27.0.1",
    "@types/js-cookie": "^3.0.3",
    "@types/lodash": "^4.14.191",
    "@types/mousetrap": "^1.6.11",
    "@types/node": "^16.7.13",
    "@types/react": "^18.0.0",
    "@types/react-dom": "^18.0.0",
    "@types/react-highlight-words": "^0.16.4",
    "@types/webpackbar": "^4.0.6",
    "@typescript-eslint/eslint-plugin": "^5.45.1",
    "@typescript-eslint/parser": "^5.45.1",
    "babel-plugin-direct-import": "^1.0.0",
    "copy-webpack-plugin": "^11.0.0",
    "eslint": "^8.29.0",
    "eslint-config-airbnb": "^19.0.4",
    "eslint-config-airbnb-typescript": "^17.0.0",
    "eslint-config-prettier": "^8.5.0",
    "eslint-plugin-import": "^2.26.0",
    "eslint-plugin-jsx-a11y": "^6.6.1",
    "eslint-plugin-react": "^7.31.11",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-webpack-plugin": "^4.0.1",
    "husky": "^8.0.2",
    "lint-staged": "^13.1.0",
    "postcss": "^8.4.19",
    "prettier": "^2.8.0",
    "prettier-eslint": "^15.0.1",
    "react-app-alias": "^2.2.2",
    "react-dev-utils": "^12.0.1",
    "react-scripts": "5.0.1",
    "typescript": "^4.4.2",
    "webpack-bundle-analyzer": "^4.10.1",
    "webpack-merge": "^5.9.0",
    "webpackbar": "^5.0.2"
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.{js,json,yml,yaml,css,scss,ts,tsx,md}": [
      "yarn prettier:fix",
      "yarn lint"
    ]
  },
  "resolutions": {
    "react-scripts/eslint-webpack-plugin": "4.0.1"
  },
  "type": "module"
}

Additional information
(anything else that could be useful for us to help you solve your problem)

I even tried to upgrade CRACO from 7.0.0 to 7.1.0 But the error still persists. I difficult to understand what could be cause.
Also, I'm using yarn for my project.