Dojo RequireJS 404 error handling from thirdparty URL - javascript

I have a dojo require as
window.config= {
async: false,
paths: {
'thirdParty' : 'https://s3.amazonaws.com/thirdPartyJSSrc'
}
};
In Page Javascript I am using thirdParty as
require([
'thirdParty'
], function(){ });
Now if my thirdPartyJSSrc returns 404 the other buttons handlers from JS is not working..It is showing the following error
Failed to load resource: the server responded with a status of 404 (Not Found)
Error {src: "dojoLoader", info: Array[2], stack: (...), message: "scriptError"}
Because of this error no JS is working on other elements of page..
I don't want to include the JS if particular JS returns 404 on the page..Anyway to do this?

I suggest config your dojo with dojoConfig, see documentation here.
e.g
dojoConfig = {
baseUrl: "js/",
packages:[
{ name:"dojo",location:"//ajax.googleapis.com/ajax/libs/dojo/1.10.0/dojo/"},
{ name:"dijit", location:"//ajax.googleapis.com/ajax/libs/dojo/1.10.0/dijit/"},
{ name:"dojox", location:"//ajax.googleapis.com/ajax/libs/dojo/1.10.0/dojox/"},
{ name:"thirdParty",location:"https://s3.amazonaws.com/thirdPartyJSSrc"}],
parseOnLoad : true,
async : false,
isDebug: true,
locale: 'en'
};
I should you to use "dojo/has" for test if exist your "thirdParty" JS. The dojo/has module is Dojo’s feature-detection API. It provides a simple, consistent, and easily extensible approach for evaluating existing feature tests, and for creating your own custom feature tests. dojo/has also implements the AMD loader plugin API, which allows you to use it to conditionally load modules. See "Dojo FAQ: How can I conditionally load AMD modules?" for more detail.

Related

(Gatsby-Strapi) Error: Request failed with status code 404

I want to follow the instruction :https://strapi.io/blog/building-a-static-website-using-gatsby-and-strapi#allowaccess
But encounter Error: Request failed with status code 404
Node.js version:
v10.13.0
npm version:
6.14.6
Strapi version:
3.1.0-alpha.5
Operating system:
mac
Which example is causing problem?
strapi.io/blog/building-a-static-website-using-gatsby-and-strapi#allowaccess
What is the current behavior?
Graphql Query doesn't work.
the steps to reproduce the problem:
$ gatsby develop
success open and validate gatsby-configs
success load plugins - 2.011s
success onPreInit - 0.004s
success initialize cache - 0.018s
success copy gatsby files - 0.102s
success onPreBootstrap - 0.017s
success createSchemaCustomization -
info Starting to fetch data from Strapi
info Starting to fetch data from Strapi
info Starting to fetch data from Strapi
ERROR #11321 PLUGIN
"gatsby-source-strapi" threw an error while running the sourceNodes lifecycle:
Request failed with status code 404
Error: Request failed with status code 404
createError.js:16 createError
[portfolio_v4]/[gatsby-source-strapi ]/[axios]/lib/core/createError.js:16 :15
settle.js:18 settle
[portfolio_v4]/[gatsby-source-strapi ]/[axios]/lib/core/settle.js:18:12
http.js:202 IncomingMessage.handleSt reamEnd
[portfolio_v4]/[gatsby-source-strapi ]/[axios]/lib/adapters/http.js:202:1 1
task_queues.js:84 processTicksAndRej ections
internal/process/task_queues.js:84:2 1
What is the expected behavior?
What is the expected behavior?
Doesn't work when I try to get from gatsby
http://localhost:8000/___graphql
There is no method allStrapiblogs on http://localhost:8000/___graphql
Please share your gatsby-config.js screen, the gatsby-source-strapi section.
this could be caused by the collectionTypes/singleTypes in the gatsby-source-strapi, or your USERS & PERMISSIONS PLUGIN (roles) in strapi is not set
I've changed contentTypes to collectionTypes
Also there is a new version (v4) of strapi and to make gatsby work with this new version, you need to use the following gatsby-source plugin.
npm install --save gatsby-source-strapi#relate-app/gatsby-source-strapi
This plugin wants a token which you can create at http://localhost:1337/admin/settings/api-tokens
before testing the new plugin make sure to clean out your gatsby cache by using the following command:
gatsby clean
{
resolve: "gatsby-source-strapi",
options: {
apiURL: "http://localhost:1337",
collectionTypes: ["Article", "User", 'Test'],
// Extract images from markdown fields.
markdownImages: {
typesToParse: {
Article: ["body"],
ComponentBlockBody: ["text"],
},
},
// Only include specific locale.
locale: "en", // default to all
// Include drafts in build.
preview: true, // defaults to false
// Use application token.
token:
'Your-strapi-api-token',
// Add additional headers.
headers: {},
},
},
There has also been a article about a new plugin, but this refers to another one which didn't work for me.
https://strapi.io/blog/introducing-the-new-gatsby-source-strapi-plugin
When added "${DOMAIN}/api" on apiURL it worked for me with strapi v4
apiURL: "http://localhost:1337/api",
{
resolve: "gatsby-source-strapi",
options: {
apiURL: "http://localhost:1337/api",
collectionTypes: [`messages`],
// Extract images from markdown fields.
markdownImages: {
typesToParse: {
Article: ["body"],
ComponentBlockBody: ["text"],
},
},
// Only include specific locale.
locale: "en", // default to all
// Include drafts in build.
preview: true, // defaults to false
// Use application token.
token: "token",
// Add additional headers.
headers: {},
},
},
This code solved my problem.
{
resolve:'gatsby-source-strapi',
options:{
apiURL:'*http://localhost:1337/admin/content-manager/collectionType/api::*',
collectionTypes: ['propiedads','paginas','categorias'],
queryLimit:1000
}
}

Uncaught (in promise) RangeError: Invalid language tag

I'm seeing the following error with arcgis js api
Uncaught (in promise) RangeError: Invalid language tag
I've posted in the GIS community, but opening up to broader SO audience.
https://gis.stackexchange.com/questions/356538/uncaught-in-promise-rangeerror-invalid-language-tag
NB The same error is visible on the official arcgis website (see screenshots in post).
Issue seems to be with arcgis' use of dojo.js library. I'm not seeing docs on how to set dojo config in context of arcgis (without custom build).
Anyone got pointers on setting dojo config?
I think setting the locale in dojoConfig could solve your problem, something like this,
<script type="text/javascript">
var dojoConfig = {
parseOnLoad: true,
isDebug: true,
locale: 'en-us'
};
</script>
dojotoolkit - config
UPDATE:
You can use loadModules of esri-loader, to pass dojoConfig options, like this
import { loadModules } from 'esri-loader';
const options = {
dojoConfig: {
async: true,
locale: 'en-us'
}
};
loadModules(['esri/map'], options)
.then(([Map]) => {
// here you create Map
})
.catch(err => {
// handle any errors
console.error(err);
});
esri-loader - without setdefaultoptions

plyr.js instantiation causing 503 error in production

I'm instantiating plyr.js using their beta (3.0.0) in elixir/phoenix and I'm getting these errors
"Failed to load resource: the server responded with a status of 503 (Service Unavailable)"
This prevents me from scrolling on the page at all
for whatever reason if I don't include the Plyr instantiation in the JS files, the 503 error goes away. Anyone have any idea why this occurs?
Here is the JS code:
import Plyr from 'plyr';
(function() {
document.addEventListener('DOMContentLoaded', function() {
const plyr = new Plyr('#player', {
autoplay: true,
controls: [''],
fullscreen: {
enabeled: false
},
loop: {
active: true }
});
});
})()
Looks like the fact that this is in beta makes this a legitimate bug. It has been filed to Github.
For now the developers of Plyr recommend using v2 for production

Defining dependencies between jQuery and jQuery UI does not prevent loading UI before jQuery itself

Maybe somebody was able to fix such issue?
Questions :
Case # 1 - why IE loads jQuery UI before jQuery even though shim
dependencies in Require JS forbid this?
This question looks similar to mine - Angular UI slider with Require JS fires before jQuery UI
Case # 2 - if i load jQuery, jQuery UI and Require JS modules
separately and specific module is dependent on jQuery UI why this
module does not know that jQuery UI was already loaded before Require
JS?
Here goes long description of the issue.
Case # 1 - everything is a module of Require JS.
In HTML i have :
<script
src="/scripts/libs/require.min.js"
data-main="/scripts/application.js">
</script>
In application.js i have :
require.config({
paths: {
libsJQ: 'libs/jquery.min',
libsUI: 'libs/jquery.ui.min',
libsMouse: 'libs/jquery.mousewheel.min',
modulesVideo: 'modules/video'
},
shim: {
libsUI: { deps: ['libsJQ'] },
libsMouse: { deps: ['libsUI'] },
modulesVideo: { deps: ['libsUI'] }
});
In modules/video.js i have :
define(function(require) {
return {
setup: function() {
var s = this;
s.link = $('.content-link');
s.popup = $('.video');
s.popup.dialog({
autoOpen: false,
show: { effect: 'fade', duration: 500 },
hide: { effect: 'fade', duration: 500 }
});
s.link.bind('click', function() {
s.popup.dialog('open');
});
}
});
1) I am having Require JS that includes jQuery, jQuery UI and several modules dependent on them.
2) Some modules depend exactly on jQuery UI e.g. module that displays video in popup
3) If i try to load everything as modules of Require JS then in all browsers everything seems to be working fine, dependencies working but from time to time in IE i get such errors
SCRIPT438: Object doesn't support property or method 'dialog'
SCRIPT438: Object doesn't support property or method 'easeOutQuad'
Which means that independently of shim dependencies sometimes in IE jQuery UI loads faster then jQuery
Case # 2 - jQuery and jQuery UI need to be included before Require JS.
In HTML i have :
<script type="text/javascript" src="/themes/sonifi/scripts/libs/jquery.min.js"></script>
<script type="text/javascript" src="/themes/sonifi/scripts/libs/jquery.ui.min.js"></script>
<script
src="<?php print sonifi_assets() ?>/scripts/libs/require.min.js"
data-main="<?php print sonifi_assets() ?>/scripts/application.js">
</script>
In application.js i have :
require.config({
paths: {
libsMouse: 'libs/jquery.mousewheel.min',
modulesVideo: 'modules/video'
});
Now i get this error in all browsers :
NetworkError: 404 Not Found - http://sonifi.web/themes/sonifi/scripts/jquery.js
Error: Script error for: jquery http://requirejs.org/docs/errors.html#scripterror
Error: Load timeout for modules: modulesVideo
Which seems that Require JS wants to include jQuery as its module otherwise if it does not have config for jQuery but it has modules that depend on jQuery it tries to find it in absolutely wrong directory and of course cannot find it there.
Seems that in my case i simply needed to increase timeout to give script a chance to load itself and only after this proceed to loading of its dependencies. If timeout is short enough Require JS simply stops loading of this script and goes to the next one.
http://requirejs.org/docs/api.html#config-waitSeconds

How to import dojo javascript file into worklight application?

When creating a new project, I have selected to include the dojo toolkit. I can import dojo.js using src="dojo/dojo.js". However when I try importing some other modules such as dijit.js using
require(["dijit/dijit"], function(){})
...I always get an error in the web console (ie the resource is not found). The problem is not applied when I import dojo modules. How can I fix this?
Make sure, you have configured Dojo correctly, kindly find the Dojo configuration which I have been using in my Hybrid App.
<script>
var dojoConfig = {
baseUrl: "js",
packages: [
{ name: "dojo", location: "dojo/dojo"},
{ name: "dijit", location: "dojo/dijit"},
{ name: "dojox", location: "dojo/dojox"}
],
isDebug: false,
async: true,
parseOnLoad: true,
deps:['app/main']
}
</script>
If you still not able to resolve it, try to make a sample use case or jsfiddle, would look into it further.
You made simple mistake of syntax:-
To require js file instead of require[("dojo/parser")]
you have use require(["dojo/parser"],function(parser){})

Categories