I am trying to upgrade node js version. after upgrading node, when i try to run npm install i am facing some peer dependancies issues (The project builds and runs okay when i do npm install –legacy-peer-deps but i wanted to solve the peer dependancies).

So to start with i upgraded css-loader to 6.0.0 which previously was 1.0.0. This was asking for old webpack but i already have higher version of [email protected]

I now started to get this error

ERROR in ./react/src/styles/app.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleNotFoundError: Module not found: Error: Can't resolve 'path("behaviors/icons.htc", "appicons"' in '/Users/test/Project/test-project/ui/react/src/styles'

This is my package.json dependancies

{
  "devDependencies": {
    "@babel/cli": "^7.0.0",
    "@babel/core": "^7.0.0",
    "@babel/plugin-proposal-class-properties": "^7.0.0",
    "@babel/plugin-proposal-object-rest-spread": "^7.0.0",
    "@babel/preset-env": "~7.18.10",
    "@babel/preset-react": "^7.0.0",
    "@babel/register": "^7.0.0",
    "babel-eslint": "^9.0.0",
    "babel-loader": "^8.0.0",
    "babel-plugin-es6-promise": "~1.1.1",
    "babel-plugin-react-display-name": "2.0.0",
    "babel-preset-react-hmre": "1.1.1",
    "clean-webpack-plugin": "~0.1.19",
    "connect-history-api-fallback": "~1.5.0",
    "copy-webpack-plugin": "6.4.1",
    "core-js": "~3.25.0",
    "css-loader": "~6.0.0",
    "del": "^7.0.0",
    "eslint": "~5.4.0",
    "eslint-plugin-import": "~2.26.0",
    "eslint-plugin-react": "~7.31.2",
    "eslint-plugin-react-hooks": "~4.6.0",
    "express": "~4.18.1",
    "file-loader": "~2.0.0",
    "html-webpack-plugin": "5.6.0",
    "mini-css-extract-plugin": "~1.0.0",
    "npm-run-all": "~4.1.3",
    "open": "~6.4.0",
    "postcss-loader": "~2.1.5",
    "raw-loader": "~1.0.0",
    "redux-immutable-state-invariant": "~2.1.0",
    "sass": "^1.49.9",
    "sass-loader": "~7.2.0",
    "style-loader": "~2.0.0",
    "webpack": "5.88.2",
    "webpack-bundle-analyzer": "~4.6.1",
    "webpack-cli": "~3.3.12",
    "webpack-dev-middleware": "~3.1.3",
    "webpack-hot-middleware": "~2.25.2",
    "yargs": "^3.7.2"
  },
  "resolutions": {
    "glob-parent": "5.1.2",
    "postcss": "7.0.36",
    "loader-utils": "2.0.3",
    "fsevents": "2.3.3"
  }
}

Here is webpack config where rules for css processing is defined.

module: {
    rules: [
      {test: /.css$/, use: ['style-loader', 'css-loader']},
      {
        test: /.scss$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              // Included this publicPath option to override the webpack.output.publicPath value for all the
              // url and assets included in scss files
              publicPath: '/resources/static/'
            }
          },
          {
            loader: 'css-loader',
            options: {
              modules: {
                mode: 'global',
                localIdentName: '[local]',
              },
              // 0 => no loaders (default); 1 => postcss-loader; 2 => postcss-loader, sass-loader
              // To fix the relative path issue when using css class from different scss files in compose
              importLoaders: 2
            }
          },
          {
            loader: `postcss-loader`,
            options: {
              options: {}, // require empty options because of a bug in postcss-loader
            }
          },
          {
            loader: 'sass-loader',
            options: {
              includePaths: [
                CONSTANTS.STYLES,
                ...CONSTANTS.SASS_ENTRIES
              ]
            }
          }
        ]
      },
      {
        test: /.(ttf|eot|woff|woff2)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].[ext]',
              outputPath: 'fonts/'
            }
          }
        ]
      },
      {
        test: /.(svg|png)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].[ext]',
              outputPath: 'images/'
            }
          }
        ]
      }
    ]
  },

I tried many options to upgrade other packages like mini-css-extract-plugin, style-loader, sass-loader. Add additional loaders like resolve-url-loader but it still gives the error.

Could someone guide me in the correct direction.
Thanks.