How to add a JS library and a JS script that makes use of that library?

Question

I'm trying to use Chroma library in Magento and so far I did the following two things:

1. Created a app/design/frontend/Vendor/Theme/requirejs-config.js with the following content:

var config = {
deps: [
'js/chroma.min',
'js/_sample',
]
};

and a _sample.js file in app/design/frontend/Vendor/Theme/web/js/_sample.js with the following code:

chromaColor = chroma.random();

A pretty straightforward and simple thing to do, but in the browser while both scripts load just fine, _sample.js throws this error: Can't find variable: chroma.

Somehow my _sample.js just doesn't seem to have access to the Chroma library? Or is it something else? Am I including those files wrong?

Answer 1

Try

var config = {
 paths: {
 "chroma": "js/chroma.min",
 "sampleJs": "js/_sample"
 },
 shim: {
 sampleJs: {
 deps: ['chroma']
 }
 }
};

• Захар Joe: No, same thing. I did setup:upgrade and Magento's seeing the changes. Still can't find that "variable".
• Захар Joe: Wait, chroma.min isn't being loaded, at least I don't see it in the browser. _sample.js however does get loaded. Weird.
• MagePal Extensions: do you have minification enabled? you may want to double-check your error console for 'chroma.min'
• Захар Joe: Not sure about what you mean by "minification enabled", chroma itself is minified... But the console is totally silent about chroma.min.js, I've seen errors before that it can't load it for some reason (path wrong for example) but now it appears that it's not trying to load at all. It also stopped appearing in Sources (in Safari) that list all the js files for the page.
• MagePal Extensions: What mode is your Magento store in default, developer, or production?