Include a JavaScript library from npm as a dependency in your Play 2.0 application

I'm currently working on integrating react-grid-layout into my play 2.0 web application. To begin, I came across the web jar for this library and added it to my build.sbt file. Here is how my sbt configuration looks like:

libraryDependencies ++= Seq(
  jdbc,
  cache,
  ws,
  specs2 % Test,
  "org.webjars" %% "webjars-play" % "2.4.0-1",
  "org.webjars" % "react" % "0.14.0",
  "org.webjars" % "marked" % "0.3.2",
  "org.webjars" % "jquery" % "2.1.4",
  "org.webjars.npm" % "react-grid-layout" % "0.9.1"
  )

In my routes file, I have included:

GET     /webjars/*file              controllers.WebJarAssets.at(file)

All the libraries except for react-grid-layout were successfully installed in the target/web/web-modules directory. It seems that there might be an issue with npm org.webjars.npm.

How do I ensure accurate installation of all JavaScript libraries?

javascriptplayframeworknpmsbtwebjars

Answer №1

James provides an explanation in the linked GitHub thread.

Manual deployment is necessary for all libraries and their dependencies, a task achievable using NPM & Bower WebJars. A suggestion he makes is presenting a list of missing transitive dependencies post-deployment to facilitate manual deployment through the dependency tree.

In a subsequent update, James mentions:

If you encounter issues with a WebJar due to absent transitive dependencies, it could be because of inadequate metadata preventing import into Maven Central. While this can pose challenges, he recommends exploring Classic WebJars as an alternative solution. More details on creating Classic WebJars can be found here.

For further insights, refer to the complete discussion on GitHub highlighted in the link provided above.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Error: The call stack has reached its maximum size while running an npm install

Attempting to execute npm install, encountered the following console output: npm ERR! Linux 4.8.0-27-generic npm ERR! argv "/usr/bin/nodejs" "/usr/bin/npm" "install" npm ERR! node v6.9.1 npm ERR! npm v3.10.8 npm ERR! Maximum call stack size exceeded npm ...

javascriptnode.jsnpm

Using PHP to globally access a JavaScript object named

I have a collection of CSS attributes stored in a MySQL database that are accessed using PHP. These attributes need to be accessible to JavaScript once the page has finished loading. To achieve this, I loop through each row and create a JavaScript object ...

javascriptphpjquerymysql

Tips for dynamically populating JSON data using a dropdown selection?

I am currently exploring HTML forms as a new web developer. I have been experimenting with displaying JSON data in a div based on a selection from a dropdown menu using jQuery in Chrome. However, my code does not seem to be functioning properly. Even tho ...

javascriptjqueryjsonforms

What are the steps for creating a grid layout with a logo header displayed at the top?

Hello everyone, I am new to using react native and I have a specific layout in mind that I would like to achieve. However, the code I currently have places the logo inside a grid. Here is the layout I am aiming for: https://i.sstatic.net/zkJcK.png impor ...

javascriptandroidioscssreact-native

Are you looking for a jQuery image carousel?

We've been grappling with the challenge of creating an image slider for the past few days. Essentially, all we're looking for is a list of images, like this: <ul id="images"> <li id="1">http://www.site.com/image1.jpg</li> < ...

javascriptjqueryajaxjson

HTML list with clickable elements for querying the database and displaying the results in a <div> element

Patience please; I am a newcomer to StackOverflow and this is my inaugural question. Struggling with writing an effective algorithm, I wonder if my attempts to "push" it forward are causing me to complicate what should be a straightforward concept, or if i ...

javascriptphphtmlmysqlajax

Avoiding HTML (JSX) tag duplication in React Component

Having the same code in my React component multiple times is becoming repetitive and inefficient. Is there a way to follow the DRY principle and avoid repeating this code? While creating a landing page with Sass styling, I noticed that I am duplicating t ...

javascripthtmlreactjsjsx

Uncertain about the request path that is being transmitted to my Express server via AJAX

I have a simple Node.js Express server setup My goal is to serve html files by using res.sendFile with this route handler: router.get('/:run_id/:test_num',function(req,res,next){ var runId = req.params.run_id; var testNum = req.params. ...

javascriptjquerynode.jsexpressweb

What is the best method for passing page props in Next.JS?

One example is using the React Context API to pass props from the _app file to pages. Another scenario involves refactoring a ReactJS routing, where state is passed from app.js to pages through the route definition as shown below: <Route><Compon ...

javascriptnext.js

Enhancing the presentation of AngularJs applications through packaging

As someone who has been building Angular Apps using 1.x for quite some time now, I have developed a strong preference for using Bower to install Angular and its various packages. Along with tools like Shivs, JQuery, ChartJs, and others, Bower allows me to ...

javascriptangularjsnpmbowerbrowserify

Effortlessly submit form data in Codeigniter without the need for page refreshing using jQuery ajax

I've been working on submitting form data in the codeigniter framework using ajax and jQuery to prevent page refreshing, but I keep getting a fail message. Since I'm new to ajax, can someone help me troubleshoot this error? This is my Controlle ...

javascriptphpjqueryajaxcodeigniter

Implementing an onclick function to execute a search operation

Utilizing PHP, I am dynamically populating a dropdown submenu with rows from a database. If the user wishes to edit a specific record listed in the menu, I want to enable them to do so without requiring any additional clicks. My goal is to accomplish this ...

javascriptphpjquery

React MS Authentication: A Primer

While developing a Microsoft Teams app, I encountered an issue with authentication for uploading files to the connected Teams OneDrive using Graph-API. The available documentation does not cover React, and as someone unfamiliar with JavaScript and React, ...

javascriptreactjsauthenticationmicrosoft-graph-apimicrosoft-teams

What causes the while loop in a threejs render function to not refresh each frame?

I'm struggling with handling an array of 8 cubes, each only 1 pixel tall. When a button is pressed, I want them to smoothly animate to a new height using a while loop. Here's my current implementation: if (buttonPressed) { console.log(' ...

javascriptwhile-loopthree.js

Exploring object key-value pairs using the 'for in' loop in JavaScript

Embarking on a project to develop a quiz in javascript, I am starting with an array that holds the questions as anonymous objects. var allQuestions = [{ "question": "Who was Luke's wingman in the battle at Hoth?", "choices": ["Dak", "Biggs", "Wedge", ...

javascriptarraysjsonobject

Learn how to dynamically display an image if the original one fails to load by utilizing the image component available in Next.js

I am currently fetching data for an image. The source of the image is stored in the variable "movie.primaryImage.url". However, there are instances when the image fails to load. I have attempted to implement conditional rendering so that a fallback image ...

javascriptreactjsnext.js

Receiving JSON in a C# web service: A step-by-step guide

I created a JSON string using jQuery and now I want to send it to a C# web API controller. Here is an example of the JSON object: {"Name":"","Type":"4","Meals":["2","3"],"Excludes":["Beef","Chicken"]} I attempted to send it with a URL structure like thi ...

c#javascriptasp.net-mvcjsonweb-services

Each time my classes are initialized, their components undergo reinitialization

Apologies if the question is not well-formed, I am completely new to working with React. I have been attempting to create a dashboard but encountering issues with my states getting reinitialized. Below is the content of my app.js file. import './inde ...

javascriptreactjs

Guide on the correct way to develop a Typescript NPM package accompanied by declarations?

It feels like I'm struggling with a simple task that is driving me crazy. I have several TypeScript files with code that I want to export for an npm package. In order to enable auto-imports from npm packages, all function and constant types need to b ...

typescriptnpm

I need help figuring out how to send a POST/GET request from AJAX to a custom module controller in Odoo 10, but I'm running into issues

I have implemented a custom module in Odoo 10 with a simple controller. Everything works smoothly when accessing http://127.0.0.1:8069/cmodule/cmodule through the browser, displaying the expected return string. However, I encountered an issue when attempt ...

javascriptpythonajaxcorsodoo-10