Bootstrapjs not loading by StealJS

I see in the forum and github issues there have been some comments about how to load bootstrap and the difficulties? So I put together a plunkr to test so I could use it in a how-to-presentation at our next meetup, and if it works okay continue to use it as a development tool. First I started on an Ubuntu server but the code is not shareable from there. I am getting the same errors in the plunkr that I was getting on the server.

Here is the plunkr link: :link:
and the error message from the console:

Error: Error loading "bootstrapjs" at https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js
Error loading "bootstrapjs" from "index" at http://run.plnkr.co/pzIBFljL1gIdu3Ex/index.js
anonymous@https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js:8:5
	
	Evaluating https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js

Note that jQuery is imported just a couple of lines before bootstrap and it loads fine, if you comment out the bootstrap line.

My questions:

  • Should I even be trying to load Bootstrap with StealJS at all? It is not mandatory for me, I just was trying to understand how StealJS functions.
  • It seems like there should be a clear way to import the Bootstrap CSS as well since that is the other important part of Bootstrap.
  • Some frameworks (like Jasmine and QUnit) seem to have some boot loader function affecting window.onload. Does StealJS compete with the loading mechanism of Bootstrap?
  • Bootstrap is expecting jQuery to be available, passed in as an argument, how to configure StealJS for that?
  • If not Bootstrap, then is there another UI framework that will work better with Steal-JS.

Donejs guides show using bootstrap:

https://donejs.com/Guide.html

Progressive loading guide does too:

https://stealjs.com/docs/StealJS.guides.progressive_loading.html

Somehow I don’t think stealjs is geared toward using external references; but rather local ones within your project.

It would be interesting to know whether external references would actually work…

Hi @northdecoder, I think your example just needs a little more configuration!

When I loaded your example in Chrome, I got a little more info from the error: ReferenceError: Popper is not defined

When I went to that line and clicked the {} button to pretty-print the source, I saw it was trying to load $ and Popper from the global scope. I think jQuery automatically sets window.$ when you load it from a CDN, but Popper doesn’t.

You can configure globals with StealJS by adding a little more to your config call:

steal.config( {
  "meta": {
     "popper": {
       "exports": "Popper"
     }
   },
  "paths": {
     "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",
     "bootstrapjs": "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js",
   }
} );

I think this Plunkr should work: https://plnkr.co/edit/uuOtP8mETBspFwVYlwnX

So to answer your questions:

  1. Definitely load Bootstrap with StealJS, and any other global/CDN dependencies.
  2. Use steal-css and the plugins config to load CSS.
  3. I’m not 100% sure what Bootstrap does with onload, but StealJS shouldn’t be competing with anything else. Depending on the module, you might need to use steal.done() to run code once all the dependencies have been loaded.
  4. See above, I think jQuery does this automatically, but you could also set jQuery’s export to $.
  5. You should be able to use any (well-formed) module with StealJS, so we like hearing about stuff not working. :blush:

Well spotted Chasen!

Also good to know that one can load any module :slight_smile:

I don’t think the current guides actually have anything on bootstrap v4. It does seem to be a bit tricky.

1 Like

Hi @chasen,

Thank you for the tips. I added your recommended configurations and that fixed loading Bootstrapjs, now I have moved on to attempting to load the Bootstrap css. According to the guides I have added steal-css as a plugin in the file config.js, and the path to the css from the CDN.

According to the guide^ I should be able to import in file index.js with this line of code:

import bootstrapCSS from "bootstrapCSS";

however it causes the error:

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/YzGmAgFMXSjR8rdc/index.js
...
originalErr: SyntaxError: expected expression, got ':'

After trying several things to divide and conquer the error, like importing directly from the plunkr css link rather than CDN, I am opening the question again to the forum.

I have updated the original plunker at :link:

I don’t think import bootstrapCSS from "bootstrapCSS"; makes sense; what are you expecting the value bootstrapCSS to be? I’m guessing you’ll want just ``import “bootstrapCSS”;`

Also, I’m not 100% sure whether steal-css requires the dependency to have .css in the name, but if it does then I would set up the path to be bootstrap.css

Edit: sorry, I just saw the update Punker. I’m not sure if you can load plugins via a CDN; @matthewp or @m-mujica will be able to help.

Are you working up to a more complicated use of plugins via CDNs? If not, is there a reason not to just use <link> to load the stylesheet?

Hi @Chasen,

Yes. Exactly! I am trying prove what I think I see in the StealJS marketing paragraphs; that Steal is a client side loader that will allow rapid user interface prototyping in a development environment that leads to a simple transition to production builds.

An artists sketch starts with a light pencil drawing that helps determine shape and proportion. It can be quickly changed without too much rework. As you have suggested I could within a matter of seconds copy and paste the starter Bootstrap template into the html, add some custom components as proof of concept, and have a rough sketch. Right away however the issues of controlling asynchronous module availability and scope will need to be addressed to continue working with the sketch in the browser. My vision is that the sketch templates can essentially be serverless mostly functional examples. For example using rawgit dot com to serve an index.html of the template would be enough to demonstrate the look and feel. Obviously not a production solution.

Separation of Concerns is the key word I think I am after here.

It seems like the browsers do not care where the resources come from as long as the CORS requirements are adhered to. Basically load, wait and then run. The casual browser user interface observer has no need of all the development tooling details, such as linting, version control, precompilers, build tools, documentation etc. They just want to see and test the look and feel of the re-usable components. Some of the online IDE’s such as Plunkr, Codepen, and others like that sort-of achieve that ease of sharing, but dowloading a zip of the files leads to a complete rework to really start the project toward production. Starting with that kind of online IDE with production in mind is counterproductive (to be kind).

For example a developer wants to show off three pretty nearly functional user interface alternatives internally within the work group to three other reviewers, the example links powered by the StealJS loader would be provided and each developer/reviewer could click on the link within a couple of minutes each times three. Total demo time six minutes. At two dollars a minute that would cost $12 for the review.

Consider the powerful developer alternative npm install. Yes, you have to be a pretty well aqcuainted power developer to do this. You cannot take a quick look until you have achieved power developer status. All there? Great! (Not a developer, sorry you cannot participate…) Depending on your setup it could take a while to get everything downloaded. Okay now you have the full install on your laptop, type the magic build and run commands, copy the provided URL, open that up in a browser. Each super smart power developer experienced no installation errors and they are now able to proceed with the review. Let say a minimum of seven minutes to install and review each times three developers totaling twenty one minutes. At two dollars a minute that would cost $42 for the review. That only cost three and a half times as much as the above example to get a quick glimpse of the template. Now multiply that cost times hundreds or thousands of interested developers on an open source project. Now remember to delete all those files just downloaded, it was a temporary sketch after all.

Hopefully you see the cost saving perspective from these two narratives and why I am excited about the prospects of applying StealJS to create quick starting point templates.

I have assumed that to switch from the development template to production project the steal configuration object used client side can simply be copy and pasted into the server side package.json along with copying the config.json. Very slick (if it works)!

If I am delusional, please just tell me to stop thinking about doing it this way, I will bark up a different tree :smiley:

Progress in plunkr v19 noted above … ?

in config.js added (but not sure it helped or changed anything)

   ,"ext": {
        "css": "https://cdn.jsdelivr.net/npm/steal-css@1.3.1/css.js"
    }

in index.js added

  // ref: https://stealjs.com/docs/load.html
  var load = {
    "name": "bootstrapCSS",
    "address": System.paths.bootstrapCSS
  };

  // ref:  https://stealjs.com/docs/steal.hooks.fetch.html
  var theTheme = steal.loader.fetch(load);//error here
  /* steal.js:140 Potentially unhandled rejection [1]
     TypeError: Cannot read property 'build' of undefined 
*/

Tried to add properties to load according to docs, however it appears the load object is not correct.

Hi @northdecoder, sorry it took me so long to respond.

I don’t think what you’re trying to do (load plugins via a CDN) is possible with steal right now, so using Plunkr + steal to load other asset types is fighting an uphill battle.

We have this Glitch made for DoneJS, which might be a better starting point for what you’re building: https://glitch.com/edit/#!/donejs-helloworld

BTW, you’re definitely not delusional, and we love seeing steal being used to build new stuff like this. :smiley: