$().spectrum is not a function

[michellechild]

I've installed spectrum as a package npm, and required it into my file like so: var spectrumColorpicker = require("spectrum-colorpicker");

Then I called the basic funciton: $('.track-form__color').spectrum({ color: "aaa" });

In browsers where <input type="color"> is accepted, <input type="color"> works, which is great:

In browsers where <input type="color"> is not accepted, the spectrum color box appears, which is also great:

However, I'm consistently getting 'Uncaught TypeError: $(...).spectrum is not a function' in my console, meaning I cannot customize the plugin at all. I've tried using import as well - same results.

I did have success when linking to the cdn instead of including the npm package.. however, that's not a sustainable solution for my project.

Any advice/insight as to why this isn't working?

*I'm not sure if this will be relevant, but I'm requiring tinycolor by bgrins in the same way and it works great.

[michellechild]

Determined this is specific to this project - will post a fix if it's relevant.

[mcandocia]

I am having this issue as well. Several of my applications that previously worked are now broken.

[moseskamau338]

In case anyone might be going through this, I just added defer to my script tag like so: <script defer src="{{ url('/vendor/devdojo/chatter/assets/vendor/spectrum/spectrum.js') }}"></script> And it works great!

[EricCronje]

Trying to use the color picker in an .net core application.

If I use the CDN link in a plain html file to test and included the css it works fine.

Then trying to implement it in asp.net.core in the razor page it kept saying "$().spectrum is not a function". Added the links in the _Layout.cshtml.

Used the links below:

Then this in my @section Scripts {

}

Having the same issue. It just shows as an input box.

Any advice/insight as to why this isn't working?