Carousel Cursor arrow-*.png Error Using Webpack #128

ewwwgiddings · 2018-06-24T06:20:53Z

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 |

The text was updated successfully, but these errors were encountered:

groovemen · 2018-07-03T09:44:41Z

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 · 2018-07-09T11:09:35Z

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 · 2018-07-09T11:24:24Z

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 · 2018-10-15T15:13:35Z

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: a9f784e#diff-8302e6b7374cf560f39375b317bcdb9d

jasminetracey · 2018-11-03T00:52:54Z

This issue still exists.

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

kusmayadi · 2018-12-11T09:37:59Z

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 · 2018-12-11T09:40:47Z

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

weogrim · 2019-03-06T18:25:47Z

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 · 2019-03-24T17:44:19Z

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 · 2019-03-25T10:20:10Z

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 · 2019-03-25T11:02:20Z

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

mhrabiee · 2019-07-07T08:18:54Z

@groovemen Why this simple bug is still not resolved?

robertnenciu · 2019-12-02T23:01:18Z

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 · 2020-02-04T08:30:35Z

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 · 2020-06-02T15:35:07Z

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

ewwwgiddings · 2020-06-04T02:40:29Z

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

jospol95 · 2020-08-15T03:31:57Z

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

groovemen closed this as completed Jul 3, 2018

groovemen reopened this Feb 4, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Carousel Cursor arrow-*.png Error Using Webpack #128

Carousel Cursor arrow-*.png Error Using Webpack #128

ewwwgiddings commented Jun 24, 2018

groovemen commented Jul 3, 2018

KgotsoK commented Jul 9, 2018 •

edited

Loading

KgotsoK commented Jul 9, 2018

jtreminio commented Oct 15, 2018 •

edited

Loading

jasminetracey commented Nov 3, 2018

kusmayadi commented Dec 11, 2018

KgotsoK commented Dec 11, 2018

weogrim commented Mar 6, 2019 •

edited

Loading

perriard commented Mar 24, 2019

groovemen commented Mar 25, 2019

perriard commented Mar 25, 2019

mhrabiee commented Jul 7, 2019

robertnenciu commented Dec 2, 2019

ttskch commented Feb 4, 2020

elitemike commented Jun 2, 2020

ewwwgiddings commented Jun 4, 2020

jospol95 commented Aug 15, 2020

Carousel Cursor arrow-*.png Error Using Webpack #128

Carousel Cursor arrow-*.png Error Using Webpack #128

Comments

ewwwgiddings commented Jun 24, 2018

groovemen commented Jul 3, 2018

KgotsoK commented Jul 9, 2018 • edited Loading

KgotsoK commented Jul 9, 2018

jtreminio commented Oct 15, 2018 • edited Loading

jasminetracey commented Nov 3, 2018

kusmayadi commented Dec 11, 2018

KgotsoK commented Dec 11, 2018

weogrim commented Mar 6, 2019 • edited Loading

perriard commented Mar 24, 2019

groovemen commented Mar 25, 2019

perriard commented Mar 25, 2019

mhrabiee commented Jul 7, 2019

robertnenciu commented Dec 2, 2019

ttskch commented Feb 4, 2020

elitemike commented Jun 2, 2020

ewwwgiddings commented Jun 4, 2020

jospol95 commented Aug 15, 2020

KgotsoK commented Jul 9, 2018 •

edited

Loading

jtreminio commented Oct 15, 2018 •

edited

Loading

weogrim commented Mar 6, 2019 •

edited

Loading