less.js: Cannot read property 'lineNumber' of undefined - less

When setting dumpLineNumbers: "comments" using less.js, I'm getting a error that reads
Cannot read property 'lineNumber' of undefined in test.less
Here is my code:
<script type="text/javascript">
less = {
env: "development",
dumpLineNumbers: "comments"
};
</script>
<link rel="stylesheet/less" type="text/css" media="all"
href="test.less" />
<script
src="https://cdnjs.cloudflare.com/ajax/libs/less.js/2.5.0/less.js">
</script>
I've tried this with less.js versions 1.7.5 and versions 2.5.0, with the same results. I'm iterating on the less code to see what part it's crashing on, but I was wondering if anyone else had hit this problem?

Related

Esri-leaflet error "Uncaught TypeError: Cannot read properties of undefined"

I have an old esri-leaflet map that queries and displays a feature from a published feature service. I'm migrating the dashboard that uses this map to a new server that requires https. I keep getting this error, and I have no idea what's wrong.
Uncaught TypeError
Old code (works great):
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<script src="json2.js"></script>
<script src="http://cdn-geoweb.s3.amazonaws.com/esri-leaflet/0.0.1-beta.6/esri- leaflet.js"></script>
<script src="http://cdn-geoweb.s3.amazonaws.com/esri-leaflet-renderers/0.0.1-beta.3/esri-leaflet-renderers.js"></script>
New code:
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.3.1/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet#1.3.1/dist/leaflet-src.js"></script>
<script src="https://unpkg.com/esri-leaflet#3"></script>
<script src="https://unpkg.com/esri-leaflet-renderers#3"></script>
This is where it fails, trying to query the feature layer:
q="OBJECTID="+params.objectid;
n=params.name;
project = L.esri.featureLayer(
'https://dmdmaps.cabq.gov/serverext/rest/services/Public/Active_CABQ_Construction_Projects/FeatureServer/1',
{ where:q }
).addTo(map);
Any ideas on how to fix this?
the API signature to instantiate a featureLayer changed at version 1.x of esri leaflet.
L.esri.featureLayer({ url, where })
https://github.com//Esri/esri-leaflet/wiki/FAQ#upgrading-the-version-of-esri-leaflet-used-in-my-app-broke-everything

FAST and BLAZOR - How to change the Color Palette of fluent-design-system-provider with Blazor

I am evaluating the new Microsoft fast.design https://www.fast.design/ with fluent-design-system-provider and trying to customize the accent color for Blazor project but no luck...
This is what I did so far as per the official documentation (https://www.fast.design/docs/design-systems/fast-frame):
In my asp.net core Blazor Server Project's _Host.cshtml
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Title </title>
<base href="~/" />
<link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
<link href="css/site.css" rel="stylesheet" />
<link href="Test.Main.styles.css" rel="stylesheet" />
</head>
<body>
<fluent-design-system-provider use-defaults>
<component type="typeof(App)" render-mode="ServerPrerendered" />
<div id="blazor-error-ui">
<environment include="Staging,Production">
An error has occurred. This application may no longer respond until reloaded.
</environment>
<environment include="Development">
An unhandled exception has occurred. See browser dev tools for details.
</environment>
Reload
<a class="dismiss">🗙</a>
</div>
</fluent-design-system-provider>
<script src="_framework/blazor.server.js"></script>
<script type="module" src="https://unpkg.com/##microsoft/fast-components"></script>
<script type="module" src="https://unpkg.com/##fluentui/web-components"></script>
<script type="module" src="~/script/site.js"></script>
</body>
</html>
After this in my site.js I am trying to generate and replace the color pallete as mentioned in the documentation https://www.fast.design/docs/design-systems/fast-frame#generating-and-replacing-palettes
import { parseColorHexRGB } from "#microsoft/fast-colors";
import { createColorPalette } from "#microsoft/fast-components";
// Initialization
(function () {
const palette = createColorPalette(parseColorHexRGB("#28EBD7"));
const provider = document.querySelector("fluent-design-system-provider");
// change the neutral color pallete
provider.neutralPalette = palette;
})();
I get the following error,
Uncaught TypeError: Failed to resolve module specifier "#microsoft/fast-colors". Relative references must start with either "/", "./", or "../".
How do i resolve this ?
As far as I know, the import is used in the client application (such as Angular, Teactjs), instead of Asp.net Core Blazor. If you are create a Client application, you could check the Fast Integrations.
To integrate Fast with Asp.net Core Blazor, after installing the Fast using the following command:
npm install --save #microsoft/fast-components
You can locate the single file script build in the following location:
node_modules/#microsoft/fast-components/dist/fast-components.min.js
Copy this to your wwwroot/script folder and reference it with a script tag as described above. Code in the Razor page like this:
<script type="module" src="script/fast-components.min.js"></script>
More detail information, see Fast Integrations for Asp.net Core Blazor.
I missed to add the complete path to the fluent components js files, referencing the correct path works well!
import { neutralLayerL1Behavior, parseColorString } from "https://unpkg.com/#fluentui/web-components";
import { createColorPalette } from "https://unpkg.com/#microsoft/fast-components";
export function initDesignSystemProvider() {
const designSystemProvider = document.querySelector("fluent-design-system-provider");
var accentBaseColor = "#204320";
const accentPalette = createColorPalette(parseColorString(accentBaseColor));
designSystemProvider.accentBaseColor = accentBaseColor;
designSystemProvider.accentPalette = accentPalette;
}

VideoJS IMA Setup

I'm trying to follow the GettingStarted instructions on https://github.com/googleads/videojs-ima to setup videojs with ima. But, am getting stuck on the part "In player.js, load the ads library"; nothing has been changed in the local player.js file so it still looks exactly the same as here https://github.com/videojs/video.js/blob/master/src/js/player.js.
Bellow is the current code I have, but when it's ran in IE11, the console reports a warning and two errors:
Warning: "VIDEOJS: WARN: videojs.plugin() is deprecated; use videojs.registerPlugin() instead" in video.js (489,5)
Error: "SCRIPT1002: Syntax error" in player.js (5,1)
Error: "CSS3120: No fonts available for #font-face rule" in video-js.css (12,7)
Any input very much appreciated.
Thank you.
<!DOCTYPE html>
<html>
<head>
<!-- Load dependent stylesheets. -->
<link rel="stylesheet" href="http://vjs.zencdn.net/6.2.0/video-js.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-ads/5.0.2/videojs.ads.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/videojs-ima/0.6.0/videojs.ima.css" />
</head>
<body>
<video id="content_video" class="video-js vjs-default-skin"
controls preload="auto" width="440" height="260">
<source src="//vjs.zencdn.net/v/oceans.mp4" type="video/mp4" />
</video>
<!-- Load dependent scripts -->
<script src="http://vjs.zencdn.net/6.2.0/video.js"></script>
<script src="//imasdk.googleapis.com/js/sdkloader/ima3.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-ads/5.0.2/videojs.ads.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-ima/0.6.0/videojs.ima.js"></script>
<script src="src/js/player.js"></script>
<script>
var player = videojs('content_video');
var options = {
id: 'content_video',
adTagUrl: 'https://pubads.g.doubleclick.net/gampad/ads?sz=640x480&iu=/124319096/external/single_ad_samples&ciu_szs=440x260&impl=s&gdfp_req=1&env=vp&output=vast&unviewed_position_start=1&cust_params=deployment%3Ddevsite%26sample_ct%3Dlinear&correlator='
};
// This must be called before player.play() below.
player.ima(options);
player.ima.requestAds();
// On mobile devices, you must call initializeAdDisplayContainer as the result
// of a user action (e.g. button click). If you do not make this call, the SDK
// will make it for you, but not as the result of a user action. For more info
// see our examples, all of which are set up to work on mobile devices.
// player.ima.initializeAdDisplayContainer();
// This must be called after player.ima(...) above.
player.play();
</script>
</body>
</html>

jQuery not loaded from src in IE10

I have recently got stuck in the following situation.
I have a script which works perfectly in FF and GC,but not in IE10.
The IE is not loading the jQuery src files,so therefore it triggers the error '$' is undefined.The loading part looks like this:
<script type="text/javascript" src="/RequestCenter/modules/resources/dist/jquery.js"></script>
<script type="text/javascript" src="/RequestCenter/modules/resources/dist/jquery.jqplot.js"></script>
<script type="text/javascript" src="/RequestCenter/modules/resources/dist/plugins/jqplot.canvasTextRenderer.js"></script>
<script type="text/javascript" src="/RequestCenter/modules/resources/dist/plugins/jqplot.canvasAxisLabelRenderer.js"></script>
<link rel="stylesheet" type="text/css" hrf="/RequestCenter/modules/resources/dist/jquery.jqplot.css" />
<script type="text/javascript" src="/RequestCenter/modules/resources/dist/plugins/jqplot.highlighter.min.js"></script>
my function is simple:
$(document).ready(function() { .... });
so,the IE10 doesn't load the jQuery and triggers the error on this line.
Any ideas how to find a work around would be really appreciated.
Thanks
It might be a browser mode or document mode compatibility issue, press F12 in IE and change your document mode to highest standard

single layer dojo build results in "undefined./resources/blank.gif" for dijit.Menu

It seems that dijit.Menu is dependent on dojo/resources/blank.gif which is found when we perform a dojo build and leave it in the release directory. We are building a single layer - our build profile is as follows:
dependencies = {
layers: [{
name: "dojo.js",
dependencies: ["core.bootstrap.dojo_deps"]
}],
prefixes: [
["core", "../../../core"],
["dijit", "../dijit"],
["dojox", "../dojox"]
]
};
Our problem arises when we attempt to rename dojo.js to something else. When we do that, dojo can no longer find the dojo/resources directory. Here is an example:
<html>
<head>
<script type="text/javascript" src="dojo_release_140_src/release/dojo/dojo/complete-build.js"></script>
<link rel="stylesheet" type="text/css" href="dojo_release_140_src/dijit/themes/dijit.css" />
<link rel="stylesheet" type="text/css" href="dojo_release_140_src/dijit/themes/tundra/Menu.css" />
<script type="text/javascript">
dojo.require("dijit.Menu");
dojo.ready(function(){
pMenu = new dijit.Menu({
targetNodeIds: ["menu"],
leftClickToOpen: true
});
pMenu.addChild(new dijit.PopupMenuItem({
label: "Clocks"
}));
});
</script>
</head>
<body class="tundra">
<a id="menu">menu</a>
</body>
</html>
As shown, the browser will attempt to fetch undefined./resources/blank.gif; however, if we change complete-build.js to dojo.js it finds it successfully at dojo_release_140_src/release/dojo/dojo/resources/blank.gif. We can't keep the name as dojo.js - right now we are working around it by actually creating an undefined. directory at the base of our domain and sticking the image in there.
Help!
I believe the bootstrap looks for the script tag containing 'dojo.js' in order to determine the path for loading resources. If you must rename dojo.js, try defining djConfig.baseUrl prior to the SCRIPT tag which loads your renamed Dojo.