Script error for: webjars

[danielkhan]

When trying to use webjars I get the following error:

´´´ "NetworkError: 404 Not Found - http://localhost:9000/assets/javascripts/webjars.js" Error: Script error for: webjars http://requirejs.org/docs/errors.html#scripterror ´´´

Shortest code to reproduce:

(function(requirejs) {
    define(["webjars!jquery.js"], function() {
        // $ can be accessed within here as jquery.js declares it as a global.
    });
})(requirejs);

build.sbt:

"org.webjars" %% "webjars-play" % "2.2.1",
  "org.webjars" % "jquery" % "2.1.0-2",
  "org.webjars" % "bootstrap" % "3.1.1",
  "org.webjars" % "angularjs" % "1.2.13",
  "org.webjars" % "requirejs" % "2.1.10"

I'm sure this is some simple stupid mistake but I'm really lost.

[jamesward]

Sorry for the hassle. I think this is due to the recent WebJars RequireJS changes. Can you try to first bump to webjars-play version 2.2.1-2 and then you will need to setup RequireJS either manually:

<script>
    @Html(org.webjars.RequireJS.getSetupJavaScript("/webjars/"))
</script>
<script data-main="@routes.Assets.at("index")" src="@routes.WebJarAssets.at(WebJarAssets.locate("require.min.js"))"></script>

Or using the new webjars-play helper (that does all this for you):

@Html(org.webjars.play.RequireJS.setup("index"))

Once you get that setup you can use RequireJS normally, like:

require(["jquery"], function(jquery) {
    console.log(jquery)
});

Let me know how it goes!

[danielkhan]

Thank you so much - this works much better. One thing is left: How does a shim config look now as 'webjars!' doesn't work for me and only using 'jquery' result in a 404.

Thank you again!

[jamesward]

You should be able to view source on the page you are doing the RequireJS setup in. There you should see the shim being included which should have:

requirejs.config({
    paths: { "jquery": webjars.path("jquery", "jquery") },
    shim: { "jquery": { "exports": "$" } }
});

The paths setups up the RequireJS module path for jquery.

Does that help?

[danielkhan]

O.K. so if I understand the html source correctly webjars-play already brings in the shim config that is needed for all installed modules. What does the 'webjars!' exactly do?

webjarsAngularjsChildren.forEach(function(child) {
    webjarsAngularjsPaths[child] = webjars.path("angularjs", child);
    webjarsAngularjsShim[child] = ["angular", "webjars!angular.js"];
});

Thank you for your patience!

[jamesward]

The webjars! loader plugin is now legacy. It was the old way of setting up RequireJS for WebJars.

[danielkhan]

Thank you very much vor helping me out. I got a full require.js - angular stack running now. Looks great!

[jamesward]

Fantastic! Sorry about the hassle in the midst of this transition.

[danielkhan]

No problem - I am happy that it wasn't completely my fault :)