Carousel Cursor arrow-*.png Error Using Webpack

[ewwwgiddings]

When compiling a project using this library the following error is shown and the build fails. This image is also not included in the assets path in this repository. Note: I removed the call to the .cur in the original version of this file. These images are also not located in the dev tools on the preview you provide.

Is there a resolution to this other than omitting the call to arrow-right and arrow-left?

ERROR in ./node_modules/raw-loader!./node_modules/postcss-loader/lib??embedded!./src/assets/css/material-kit.css
(Emitted value instead of an instance of Error) CssSyntaxError: C:\mypath\src\assets\css\material-kit.css:11815:16: Can't resolve 'assets/img/arrow-right.png' in 'C:\mypath\src\assets\css'

  11813 |
  11814 | .carousel.carousel-full-nagivation .right {
  11815 |   cursor: url("assets/img/arrow-right.png"), default !important;
        |                ^
  11816 | }
  11817 |

[groovemen]

Hello @ewwwgiddings,

Thank you for your interest in working with our products, this issue is solved in the latest version (v2.0.4).

All the best, Stefan

[KgotsoK]

Hi @groovemen This issue is not resolved in my case.

Using the latest version (2.0.4)

I am using this library in an Angular app and am pulling the package using npm. I had a look in the material-kit folder and there are no arrow-right / arrow-left .cur and .png files. I have to download them myself but of course they get deleted next time I update.

I get them from here https://cdnjs.com/libraries/material-kit And note that thats version 1 of the lib.

[KgotsoK]

One more thing, Lines 18 to 24 of material-kit.css should be

.carousel.carousel-full-nagivation .left {
  cursor: url("../img/arrow-left.png"), url("../img/arrow-left.cur"), default !important;
}

.carousel.carousel-full-nagivation .right {
  cursor: url("../img/arrow-right.png"), url("../img/arrow-right.cur"), default !important;
}

Note that in each of the four paths we go up one directory, not two.

[jtreminio]

Hello @ewwwgiddings,

Thank you for your interest in working with our products, this issue is solved in the latest version (v2.0.4).

All the best, Stefan

Stefan,

Issue still not resolved. No arrow-* files in this location : https://github.com/creativetimofficial/material-kit/commits/master/assets/img

They were removed in this commit: https://github.com/creativetimofficial/material-kit/commit/a9f784e0d0384c7507c872fbcf1ccef7744dc8fd#diff-8302e6b7374cf560f39375b317bcdb9d

[jasminetracey]

This issue still exists.

Module build failed: ModuleNotFoundError: Module not found: Error: Can't resolve '../../img/arrow-left.cur'

[kusmayadi]

This issue still exists in version 2.0.5.

As @jtreminio said: No arrow-* files in this location : https://github.com/creativetimofficial/material-kit/commits/master/assets/img

[KgotsoK]

Yeah, it's still there... This needs to be solved.

[weogrim]

Bug is still alive. There are no files arrow-right.png and arrow-left.png in the package npm package or package downloaded from site.

[perriard]

This is still a bug. The files does not exist in the free version. Also, you use !important in the variables/_carousel.scss so I can't overwrite it in my own variables. If the carousel is only a part of the pro package, the scss files should be removed from the free version. Hope to see a fix soon - it should be pretty straightforward :-)

[groovemen]

Hello there,

Until the next update, I will ask you to erase the code from variables/_carousel.scss

.carousel{
  &.carousel-full-nagivation{
    .left{
      cursor: url("../../img/arrow-left.png"), url("../../img/arrow-left.cur"), default !important;
    }
    .right{
      cursor: url("../../img/arrow-right.png"), url("../../img/arrow-right.cur"), default !important;
    }
  }
}

or you can integrate the files into your project (you can find them in the archive attached below) images.zip

Hope that information helps you. Please let us know if we can help you with anything else.

All the best, Stefan

[perriard]

Thank you for your quick reply! :-) I will do so.

[mhrabiee]

@groovemen Why this simple bug is still not resolved?

[robertnenciu]

issue still persists on v2.0.4, neither css/scss fails to compile due to ./img/arrow-left.cur missing asset. Since overriding in vendor is a crap & total illegitimate fix, the only solution seems to be forking and self fixing.

[ttskch]

I also have the same issue. Would you please reopen it.

FYI, my workaround for now is this...

- @import "~material-kit/assets/scss/material-kit";
+ @import "~material-kit/assets/scss/material-kit/variables/colors";
+ @import "~material-kit/assets/scss/material-kit/variables/shadow";
+ @import "~material-kit/assets/scss/material-kit/variables/bootstrap-material-design-base";
+ @import "~material-kit/assets/scss/material-kit/variables/custom-forms";
+ @import "~material-kit/assets/scss/material-kit/variables/spacing";
+ @import "~material-kit/assets/scss/material-kit/variables/body";
+ @import "~material-kit/assets/scss/material-kit/variables/brand";
+ @import "~material-kit/assets/scss/material-kit/variables/buttons";
+ @import "~material-kit/assets/scss/material-kit/variables/card";
+ @import "~material-kit/assets/scss/material-kit/variables/code";
+ @import "~material-kit/assets/scss/material-kit/variables/dropdown";
+ @import "~material-kit/assets/scss/material-kit/variables/forms";
+ @import "~material-kit/assets/scss/material-kit/variables/list-group";
+ @import "~material-kit/assets/scss/material-kit/variables/nav";
+ @import "~material-kit/assets/scss/material-kit/variables/pagination";
+ @import "~material-kit/assets/scss/material-kit/variables/state";
+ @import "~material-kit/assets/scss/material-kit/variables/tables";
+ @import "~material-kit/assets/scss/material-kit/variables/tooltip";
+ @import "~material-kit/assets/scss/material-kit/variables/type";
+ @import "~material-kit/assets/scss/material-kit/variables/modals";
+ //@import "~material-kit/assets/scss/material-kit/variables/carousel";
+ $enable-flex: true;
+ $enable-shadows: true;
+ @import "~material-kit/assets/scss/material-kit/bootstrap/scss/functions";
+ @import "~material-kit/assets/scss/material-kit/bootstrap/scss/variables";
+ @import "~material-kit/assets/scss/material-kit/variables/layout";
+ @import "~material-kit/assets/scss/material-kit/variables/menu";
+ @import "~material-kit/assets/scss/material-kit/variables/drawer";
+ @import "~material-kit/assets/scss/material-kit/variables/snackbar";
+ @import "~material-kit/assets/scss/material-kit/variables/bootstrap-material-design";
+ @import "~material-kit/assets/scss/material-kit/mixins";
+ @import "~material-kit/assets/scss/material-kit/core-bootstrap";
+ @import "~material-kit/assets/scss/material-kit/reboot";
+ @import "~material-kit/assets/scss/material-kit/layout";
+ @import "~material-kit/assets/scss/material-kit/buttons";
+ @import "~material-kit/assets/scss/material-kit/misc";
+ @import "~material-kit/assets/scss/material-kit/checkboxes";
+ @import "~material-kit/assets/scss/material-kit/custom-forms";
+ @import "~material-kit/assets/scss/material-kit/switches";
+ @import "~material-kit/assets/scss/material-kit/radios";
+ @import "~material-kit/assets/scss/material-kit/carousel";
+ @import "~material-kit/assets/scss/material-kit/forms";
+ @import "~material-kit/assets/scss/material-kit/input-group";
+ @import "~material-kit/assets/scss/material-kit/list-group";
+ @import "~material-kit/assets/scss/material-kit/nav";
+ @import "~material-kit/assets/scss/material-kit/images";
+ @import "~material-kit/assets/scss/material-kit/navbar";
+ @import "~material-kit/assets/scss/material-kit/badges";
+ @import "~material-kit/assets/scss/material-kit/alerts";
+ @import "~material-kit/assets/scss/material-kit/pagination";
+ @import "~material-kit/assets/scss/material-kit/pills";
+ @import "~material-kit/assets/scss/material-kit/info-areas";
+ @import "~material-kit/assets/scss/material-kit/type";
+ @import "~material-kit/assets/scss/material-kit/tabs";
+ @import "~material-kit/assets/scss/material-kit/tooltip";
+ @import "~material-kit/assets/scss/material-kit/popover";
+ @import "~material-kit/assets/scss/material-kit/modal";
+ @import "~material-kit/assets/scss/material-kit/dropdown";
+ @import "~material-kit/assets/scss/material-kit/drawer";
+ @import "~material-kit/assets/scss/material-kit/progress";
+ @import "~material-kit/assets/scss/material-kit/togglebutton";
+ @import "~material-kit/assets/scss/material-kit/ripples";
+ @import "~material-kit/assets/scss/material-kit/headers";
+ @import "~material-kit/assets/scss/material-kit/footers";
+ @import '~material-kit/assets/scss/material-kit/cards';
+ @import '~material-kit/assets/scss/material-kit/cards/card-carousel';
+ @import '~material-kit/assets/scss/material-kit/cards/card-login';
+ @import '~material-kit/assets/scss/material-kit/cards/card-plain';
+ @import '~material-kit/assets/scss/material-kit/plugins/plugin-datetime-picker';
+ @import '~material-kit/assets/scss/material-kit/plugins/plugin-nouislider';
+ @import "~material-kit/assets/scss/material-kit/example-pages";
+ @import "~material-kit/assets/scss/material-kit/responsive";

[elitemike]

It looks like the 2 PRs will fix this, why have those not been accepted yet?

[ewwwgiddings]

Tbh this has gotten comedic at this point how it keeps showing up in my inbox...

[jospol95]

Still an issue, editing the file and removing the class/variables works though as an alternative solution. But it needs to be fixed.