Incorporating an NPM JavaScript library into Laravel version 8

I've integrated the mobiscroll javascript component library into my new Laravel 8 app by adding the minified css/js files to the public/css and public/js directories. However, I'd like to find a more seamless way to include these components by using npm and referencing them directly. In a React app, this would be straightforward, but how can it be achieved in Laravel?

I attempted to require the module by adding 

window.mobiscroll = require('@mobiscroll/javascript');
to the bootstrap.js file, similar to how axios and _ libraries are included. Unfortunately, I'm still encountering a 'Uncaught ReferenceError: mobiscroll is not defined' when trying to initialize a component.

Adding it to the app.js file with 

require('alpinejs');
require('@mobiscroll/javascript');
yielded the same error. Despite running `npm run watch` for the mix process and ensuring successful compilation, caching or compilation issues don't seem to be the problem.

I couldn't find any solutions on SO or in the Laravel documentation that specifically addressed this issue.

UPDATE: I'm facing the same problem with dayjs, which was installed via npm i dayjs. Even after adding require('dayjs') in bootstrap.js, compiling through mix, clearing caches, I continue to receive 'dayjs is not defined' errors.

javascriptlaravelnpmlaravel-8

Answer №1

To begin, add Mobiscroll to your Laravel root folder.

npm install @mobiscroll/javascript-lite --save-dev

Next, you will need to include the JS and CSS files in the appropriate locations.

In resources/js/bootstrap.js.

try {
    window.mobiscroll = require('@mobiscroll/javascript-lite');

    require('bootstrap');
} catch (e) {
}

In resources/css/app.css.

@import '~@mobiscroll/javascript-lite/dist/css/mobiscroll.css';

If your webpack.mix.js looks something like this...

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css', [
        //
    ]);

Run npm run prod.

Ensure that you reference the generated CSS file in your Blade template/layout.

<link type="text/css" rel="stylesheet" href="{{ mix('css/app.css') }}">

Similarly, for JS.

<script src="{{ mix('js/app.js') }}" defer></script>

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

Modify the structure of the JSON string

My JSON string is structured like this: [ { "queryResult": { "A": "12-04-2014", "B": 1 } }, { "queryResult": { "A": "13-04-2014", "B": 2 } }, { "qu ...

javascriptjson

Searching for the position of objects within a collection?

I am seeking the ability to parse through an object and allocate each of its available attributes to a variable. Within this scenario, there are four potential properties present in different objects - some containing all four while others may only have t ...

javascriptarraysobjectindexof

Error message: "Unable to locate jQuery file within the node.js + Express application running on Heroku platform."

My current setup involves a node.js application with Express and express-handlebars deployed on Heroku. However, whenever I run the app, the console displays a 404 error for the jquery file, leading to subsequent failures for dependent libraries like Boots ...

javascriptjquerynode.jsexpressheroku

Detecting changes in arrays in Vue.js 2

Below is a simplified version of the code : <template> /* ---------------------------------------------- * Displaying a list of templates, @click to select the template /* ---------------------------------------------- <ul> ...

javascriptarraysvue.jssplice

Sending dynamic boolean model property via AJAX dynamically

I am facing an issue while passing a property from my model to an AJAX form. The boolean value is resolving as "true/false" and causing problems in the process. $.ajax({ url: '/Projects/SearchTable2', type: "GET", data: { sub ...

javascriptajaxasp.net-mvcrazorasp.net-ajax

I am interested in incorporating a captcha system using ajax

Recently, I implemented email and captcha validation in a form. Now, I am looking to make some modifications. Specifically, I want the form to not reload the page if the captcha is incorrect or left empty. This means that all fields that have already bee ...

phpjavascriptajaxcaptcha

Development process of Node Package Manager (npm) peerDependencies

Scenario: Module models Contains common mongoose models used in various applications Requires peerDependencies: "mongoose" Module app Depends on "mongoose", "models" Linked with models using app> npm link models Challenge: During development of ...

node.jsnpm

Sending files using AJAX without FormData in Internet Explorer 9

Unfortunately, IE9 does not support FormData, making file uploads via XMLHttpRequest a more challenging task. Is there a workaround for this issue? I've come across mentions of using iFrames, but the process seems complex and unclear on how to transf ...

javascriptajaxfile-uploadxmlhttprequest

Add a fading transition feature to images that are loaded at a later time

I used a clever technique to create a blur effect by loading a small, lightweight image first. Once the main background image is loaded, it swaps out the 'data-src' with the actual image. However, I am facing an issue with the abrupt transition, ...

javascripthtmlcssimagedeferred

Automatically update and reload Express.js routes without the need to manually restart the server

I experimented with using express-livereload, but I found that it only reloaded view files. Do you think I should explore other tools, or is there a way to configure express-livereload to monitor my index.js file which hosts the server? I've come ac ...

javascriptnode.jsexpress

"Utilizing Node.js to access modules with their absolute

My directory structure is as follows: -- app/ |- models/ |- user.js |- config.json I am trying to make my user.js file require the config.json. Currently, I am using require('/config') but it doesn't seem to be working. Can som ...

javascriptnode.jsexpressdirectory

AngularJS flexible route parameter

My AngularJS application has routes that can be either: www.website.com/blog/xyz www.website.com/blog/xyz/title/other-params In the second URL, the title parameter is used for readability purposes only and is not mandatory in the URL. Therefore, I have i ...

javascriptangularjs

Why is it that in React the render method is automatically bound to the component instance, while custom methods are not provided

Why is the render method automatically bound to the component instance in a class, but custom methods such as event handlers are not? I realize that using the bind keyword can make these event handlers work, but I'm curious to know why "this" can be ...

javascriptreactjsclassscopeevent-handling

Request made to Ajax fetching complete webpage content

I have a page full of random tips at http://www.javaexperience.com/tips To display these tips on other pages of the website, I am using an ajax call to add the content returned by the call to a specific div's HTML. The code for the div is: <div ...

javascriptjqueryajaxwordpress

What is the best way to include multiple action creators in a single listenerMiddleware in Redux Toolkit?

I am looking to store the current state in my database every time there is a change in any of its properties. I have implemented two middlewares to handle this task, each responsible for dispatching the saveTrip function. Although both middlewares are ide ...

javascriptreactjsreduxreact-reduxredux-toolkit

Is there a way to implement a watch on $validator.errors in Vue.js using the Vee Validation plugin?

My intention was to implement a watch on $validator.errors, so that any error that arises gets logged, To achieve this, I checked the length of errors and stored self.errors.all() in a variable, However, I'm curious if it's possible to directly ...

javascriptvue.jsvee-validate

Guide on how to call a function in ascx code-behind using JavaScript within the framework of DotNetN

Currently, I am facing an issue with my module that involves submitting data to a SQL table in a database using code behind. My validation is done through javascript, and when a button is clicked and the data is valid, a div is displayed. However, the pr ...

javascriptajaxdotnetnuke

I am looking to retrieve the values entered in a textbox from an HTML document and then post them using a JSON file in Node.js when the submit button is

Here is the JavaScript code I have written: $(document).ready(function(){ $('form').on('submit', function(){ var email = $("form input[type=text][name=emails]").val(); var todo = {email: email.val(), ...

javascriptjqueryjsonnode.js

Having trouble with npm start causing webpack issues?

I have a small React mini app that I am trying to start with the command npm start - package.json - "scripts": { "start": "node server.js" Everything works fine on Windows, but when I try to start it on Ubuntu, the console throws an error. /var/www/r ...

node.jsreactjsnpmwebpack

Utilizing JavaScript files within Angular2 components: A guide

I need to insert a widget that runs on load. Typically, in a regular HTML page, I would include the script: <script src="rectangleDrawing.js"></script> Then, I would add a div as a placeholder: <div name="rectangle></div> The is ...

javascriptangularjsangulartypescriptwebpack