Develop Reference

Why is jsfiddle saying the reference is undefined

I'm quite new to javascript and jsfiddle. I've been able to toy around with other fiddles that I find, but setting one up myself has proved difficult.
I'm attempting to use a library from npm to get a proof of concept for how it might work. I'm not sure why my import of the module is not working with jsfiddle.
What am I missing to get my fiddle working?
used the resourced bar to import the unpkg script
https://unpkg.com/browse/json-query#2.2.2/index.js
tried using the method outlined in the package readme
var json = [...]
jsonQuery('[DisplayText]', json)

When I follow the unpkg link I see that it has requires such as:
var State = require('./lib/state')
The problem is not only can the browser not understand require, it doesn't have files like ./lib/state available.
I think the problem here is that you are trying to download the raw source, which needs to be built with something like webpack before it can be used in the browser.

How to import Material Components Web Select Menu JS component

Trying to get a Material Web Component Select Menu to behave according to its demo but it seems the documentation does not include which JS components to import.
I have tried import {MDCSelect} from '#material/select';, following convention with its other Web components but I get an uncaught reference error: ReferenceError: mdc is not defined.
I seem to be missing a base class or I'm importing the wrong JS component but am not sure which to include.
Does anybody have knowledge about this?
Update - 10/26/2018
I posted this question on Github and received a response. I believe it is the correct implementation as it hasn't thrown any errors but a previous bug has kept me from fully testing of this approach.
I will return to this question as soon as I can test the suggested answer in the above link.

Checkout this example,it will help. It need just mdc instance to initiate the mdc-select.
> https://codepen.io/cubetastic/pen/ZoPNKK

Using an external React component on Rails application

I am trying to use the rc-slider React component on a existing Rails application that is using react-rails gem and it already have some other components that were built within the application that work just fine.
Based on this blog post I've been able to follow its first 3 steps, I've found the minified and browser-ready version of it here, added the file to the suggested path and required it on the application.js as recommended but even seeing the code within the Sprockets generated application javascript file that is rendered on the browser I can't see or use the supposed global variable it would provide according to step 4.
In the component's examples page it uses a const Slider = require('rc-slider'); statement in order to get that available. I've tried that but without luck as it throws: Uncaught ReferenceError: require is not defined. The same happens when I try the README usage's section approach: import Slider, { Range } from 'rc-slider';. I've tried both from an existing JS where I load other React components and also from the browser's Dev Tools Console window.
Am I using the wrong approach to the problem or maybe missing/overseeing any concept or basics here?

If you want to use Sprockets, you can get a pre-compiled version of rc-slider from unpkg:
https://unpkg.com/rc-slider#6.0.0/dist/rc-slider.js
Taking a look at the source, I see it exports the library as rc-slider:
So you can access it as window["rc-slider"] and use it from there, for example:
var RCSlider = window["rc-slider"]
var container = document.getElementById("container")
ReactDOM.render(
<div>
<RCSlider />
<RCSlider.Range />
</div>,
container
);
jsfiddle
That way, if you put rc-slider.js in the asset pipeline, you can use RCSlider in your javascripts.

Making compiled typescript code globally accessible

I've been working on a little project recently, and ran into this issue of actually having my project me accessible in the rest of the page.
Here's the deal:
It's a javascript router. Doing this just for the sake of interest. I've already set up my typescript compiler via grunt and my module loading and concatenation via grunt-requirejs.
Here's the grunt file: https://github.com/Forestdev/jsRoute/blob/master/gruntfile.js
The output, however, doesn't seem to generate any export to window. I have been googling as to how to export my code to window or anywhere really so that other javascript files could access it.
Could this be the problem with wrapper? Do I need to insert a custom wrapper for all of this? What's the general rule of thumb of making your typescript project global?
Edit:
Forgot to list the index file: https://github.com/Forestdev/jsRoute/blob/master/src/index.ts
Ignore the line with the new instance of an object. I want to export this object so that anyone else could create a new instance of it themselves.

Found a way to handle exposing to the global scope.
Within grunt build requirejs script I added a custom wrapper, which is:
wrap: {
start: '(function(global) {',
end: 'global.JSRoute = global.JSRoute || require("index").Router; }(window));'
}
This seems to fix the issue I had of exporting my script to a global scope. This also correctly loads the script on window load as well, so other scripts have access to it right away.
Hope this makes sense. Hopefully this is the correct way of doing it as well.

Error 1 Could not find symbol '$'

When I use Visual Studio to edit an external Javascript file and use Javascript within the page, it unsurprisingly is unaware of JQuery, because the web page that owns it hasn't loaded the Javascript file.
//test.js:
$(document).ready(function () {
alert("If you really need a code example");
});
As a result, I get this error:
Error 1 Could not find symbol '$'
Again, this is a design time error, not a runtime error.
Is there a way to make the Visual Studio Editor a little smarter or at least suppress these errors?
Update:
I think it was the Typescript editor that I was in that just complained that there was an error, no error is shown when editing the rresulting javascript file.
Modified Question:
How can I make the TypeScript file editor happy? I think the "editor" may be Web Essentials add in and that there may be a directive to make it ignore the $, perhaps. Or am I thinking of JSLint?
I''m new to all of this...

Try:
jQuery(document).ready(function(){
});
or maybe you are missing the ); after the }

In TypeScript, all variables must be declared.
You can declare it with declare var $; at the beginning of the file.
Or you can use a definition file for jQuery:
Download it ;
Then, in your .ts file, include the definition file:
/// <reference path='jquery.d.ts' />
// here the compiler known jQuery
$(document).ready(/* ... */);