react app throwing error with node upgraded to 18 and webpack resolve extension

Question

We're in the process of upgrading our React project's Node version from 10 to 18. However, after the upgrade, we are encountering issues with our webpack configuration, specifically with the resolve extensions.

Here is the relevant part of our webpack configuration:

  modules: ['packages', 'verticals', 'node_modules', 'folder1'],
  extensions: [
    isServer ? '.server.tsx' : '.client.tsx',
    isServer ? '.server.jsx' : '.client.jsx',
    isServer ? '.server.ts' : '.client.ts',
    isServer ? '.server.js' : '.client.js',
    '.web.tsx',
    '.web.jsx',
    '.web.ts',
    '.web.js',
    '.tsx',
    '.jsx',
    '.ts',
    '.js',
    '.json',
  ],
}

Since upgrading, we are encountering the following error:

Error: Cannot find module '/Users/Documents/Project/node_modules/logger/src/logger'. Please verify that the package.json has a valid "main" entry.

The issue seems to be related to the different sources for the logger file based on whether it's used on the client or server (server.tsx and client.tsx files).

For context, here are the dependencies listed in our package.json:

"dependencies": {
  "@babel/core": "7.18.9",
  "@types/react": "^17.0.3",
  "array-flat-polyfill": "^1.0.1",
  "babel-jest": "^26.6.3",
  "browserslist-useragent-regexp": "^3.0.2",
  "husky": "^4.2.3",
  "jest": "^26.6.3",
  "jest-svg-transformer": "^1.0.0",
  "lerna": "^4.0.0",
  "lint-staged": "^10.0.8",
  "react": "^17.0.2",
  "react-dom": "^17.0.2",
  "ts-node-dev": "^1.1.8",
  "typesafe-actions": "^5.1.0",
  "typescript": "4.5.5",
  "webpack-bundle-analyzer": "^3.7.0",
  "workbox-webpack-plugin": "^6.5.4"
}

We would appreciate any insights or guidance on resolving this webpack issue after upgrading to Node 18. Thank you!