Facing this error while updating Angular: Module Error (from ./node_modules/postcss-loader/dist/cjs.js)

Question

Hi recently I was updating my Angular project from v8 to v17. Here I am facing this issue:

Module ./src/app/shared/components/carousel/carousel.component.scss?ngResource - Error: Module Error (from ./node_modules/postcss-loader/dist/cjs.js):
/home/sysadmin/Downloads/Angular Upgrade/Angular8to17/trooya/src/app/shared/components/carousel/carousel.component.scss:13:19: Can't resolve './src/assets/images/bg-register.png' in '/home/sysadmin/Downloads/Angular Upgrade/Angular8to17/trooya/src/app/shared/components/carousel'

Here is the carousal.component.scss content:

.logo-container {
  width: 100%;
  height: 4rem;
  margin: 0.5rem 0;
  position: absolute;
  justify-content: center;

  img {
    height: 100%;
  }
}

.carousel-container {
  background: url(src/assets/images/bg-register.png) 50% 80% / cover no-repeat;
  height: 100%;
  display: flex;
  align-items: center;

  .oc-container {
    width: 100%;
  }
}

I checked for cjs.js is present or not in node_modules, it is present: enter image description here

Please help resolving the issue!

Answer 1

The error indicates that there was a problem finding the background image specified in the .carousel-container.

A fix might be to use relative import, like so:

url("~src/assets/images/bg-register.png")

Credit to this answer: https://stackoverflow.com/a/62952041/4529555