<!DOCTYPE html>
<html>
<head>
<title>App with Bootstrap</title>
<meta charset="utf-8">
</head>
<body>
<h3>App with Bootstrap loaded by StealJS ?</h3>
<div class="alert alert-primary" role="alert">
<code style="background-color: #00ffbf;">var theTheme = steal.loader.fetch(load);</code>
</div>
Error:
<div style="background-color: coral;">Potentially unhandled rejection [1] TypeError: Cannot read property 'build' of undefined</div>
<div><code></code></div>
<script src="https://cdn.jsdelivr.net/npm/steal@1.6.2/steal.js" config="config.js" main="index">
</script>
</body>
</html>
/* Styles go here */
# Adding bootstrap with module loader StealJS ?
### Currenlty this is a demonstration of how it is failing
I would however, like to prove that it does work.
// file: index.js
console.log("In file index.js");
/** Dependencies to import at top level */
import $ from "jQuery";
console.log(" $.fn.jquery: " + $.fn.jquery);
import stealCSS from "stealCSS";
import popper from "popper";
import bootstrap from "bootstrapjs";
// ref: https://stealjs.com/docs/steal-css.html
import bootstrapCSS from "bootstrapCSS";//error
/*
steal.js:7324 Error: Error loading "bootstrapCSS" at https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css
Error loading "bootstrapCSS" from "index" at https://run.plnkr.co/IODN1bQkbtwZEBMF/index.js
SyntaxError: Unexpected token :
at new Function (<anonymous>)
Evaluating https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css
*/
//import "./style.css"; // VM10096 steal.js:7324 Error: Error loading "style.css" at https://run.plnkr.co/IODN1bQkbtwZEBMF/style.css.js
steal.done().then(function() {
steal.dev.log(" In steal.done()" );
//console.dir(steal);
//* https://stealjs.com/docs/steal.hooks.locate.html
//* with promises ?
//console.log(" steal.loader.locate({'name':bootstrapCSS}): "+ steal.loader.locate({"name":"bootstrapCSS"}) );// returns a Promise
//console.dir( steal.loader.locate( {"name":"bootstrapCSS"})._handler );
//var theURL = steal.loader.locate({"name":"bootstrapCSS"}).then( res => {console.log(res)} );
//console.dir(theURL);
//by reading the code at https://github.com/stealjs/steal/blob/master/src/config.js
steal.dev.log(" System.paths.bootstrapCSS: "+System.paths.bootstrapCSS);
// ref: https://stealjs.com/docs/load.html
var load = {
"name": "bootstrapCSS",
"address": System.paths.bootstrapCSS
};
console.dir(load);
var theTheme = steal.loader.fetch(load);//error here
console.log(theTheme);
// ref https://stealjs.com/docs/load.html
// ref: https://stealjs.com/docs/steal-css.CSSModule.html
//console.dir(stealCSS); //see that this object is available
var css = new stealCSS.CSSModule(load); //error here
console.dir(css); //see that the css object is available
// ref: https://stealjs.com/docs/steal-css.CSSModule.prototype.injectStyle.html
css.injectStyle();
}); // end of steal.done()
// file: config.js
steal.config( {
"meta": {
"popper": {
"exports": "Popper"
}
,"jQuery": {
"exports": "$"
}
}
,"plugins": ["steal-css"]
,"cssOptions": {
timeout: 15
}
,"paths": {
"stealCSS": "https://cdn.jsdelivr.net/npm/steal-css@1.3.1/css.js"
,"jQuery": "https://code.jquery.com/jquery-3.2.1.slim.min.js"
,"popper": "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"
,"bootstrapCSS": "maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"
,"bootstrapjs": "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"
}
// ,"ext": {
// "css": "cdn.jsdelivr.net/npm/steal-css@1.3.1/css.js"
// }
} );