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

Customize the dynamic options for selecting with Bootstrap

I have been experimenting with the bootstrap select plugin and have run into an issue while trying to dynamically add options using Javascript. Unfortunately, the list always appears empty. Interestingly, when I revert back to using a conventional HTML sel ...

javascriptjqueryhtmltwitter-bootstrap

Using the symbol for pi in a JavaScript program rather than its numerical value, while still performing calculations with the numerical value behind the scenes

I am working on a calculator project where I want the symbol for pi to be displayed instead of the numerical value. Here is the relevant function: function Pi(pi) { document.getElementById('resultArea').innerHTML += pi; eval(document.ge ...

javascripthtml

The markers from KML exported from My Maps are not showing up on the Google Maps JavaScript API

I have a map on Google My Maps that I want to showcase through the Google Maps JavaScript API. This way, I can easily merge multiple maps into one and add paths/markers without needing to code it all manually. Test out the map I'm using by clicking t ...

javascriptgoogle-mapsgoogle-maps-api-3mapskml

The issue code R10, indicating a boot timeout, has arisen as the web process failed to connect to $PORT within 60 seconds of initiating on Heroku platform

After deploying my Node.js WebApp to Heroku, I encountered the following error: 2021-06-01T09:19:42.615419+00:00 heroku[web.1]: State changed from crashed to starting 2021-06-01T09:19:47.259832+00:00 heroku[web.1]: Starting process with command `node app.j ...

javascriptnode.jsexpressherokuhosting

Using jQuery UI to dynamically add a widget based on a specific class, rather than relying on

Exploring the world of Apache Cordova and jQueryUI is a new adventure for me. I am currently experimenting with formatting the layout of my index.html using jQueryUI. As mentioned in this section of the jQueryUI tutorial, a widget can be added using the f ...

javascripthtmlcsscordovajquery-ui

Tips for successfully retrieving a span value in VUE

I am working with forms <input type="text" v-model="email"> <span>Extracted Value</span> Can someone help me figure out how to pass the value from the span element? data () { return { email: '/*Here goes the extracted valu ...

javascriptjqueryapivue.js

Tips for styling an array of objects using mapping techniques

I have an array of messages and I am currently using the map() function. Each message in the array has two keys - one for the author and another for the message content. What I want to achieve is to change the styles of the div tag when displaying the last ...

javascripthtmlcssreactjs

Is there a way to serve server-side rendered content exclusively to search engine crawlers like Google Bot, without SSR for regular users in Next.js?

With a staggering number of users visiting the site every day, we are making strides to enhance our visibility on Google by implementing SSR (which may sound unbelievable) and achieving a richer preview when content is shared on messaging platforms. As th ...

javascriptreactjsoptimizationnext.js

Retrieving radio button values in React from a different component

I am dealing with a child component that contains radio buttons, each with its own value. I have imported this child component into a parent component to manage its state from the parent component. With the child component added, I need to access all the i ...

javascriptreactjsinputnext.jsradio-button

Implementing Cross-Origin Resource Sharing (CORS) in play-framework version 2.5.x: A Step-by-Step Guide

My current challenge involves retrieving JSON data by sending a request to a Restful URL from localhost within an AngularJS-1 application. The error that I encounter is as follows: http://localhost:9000/mlm/user/all Failed to load resource: the server r ...

javascriptangularjsrestplayframeworkplayframework-2.3

Utilizing VueJS and Lodash: The technique for extracting an array of objects exclusively featuring a specific key string

I am attempting to extract certain data from an Object that has a string _new attached to it. Explore the code on Codesandbox: https://codesandbox.io/s/vibrant-bardeen-77so1u?file=/src/components/Lodash.vue:0-353 This is what my data looks like: data.j ...

javascriptvue.jsvuejs2lodash

React - Defining a global variable within a React component

Can you explain the process to me? I am trying to set up a variable within a react component class so that I can utilize it in multiple sections of my application. Here is what I have attempted: class ColorPick extends React.Component { colorInput; ...

javascriptreactjs

Re-establishing connections in the force-directed graph model

Just getting started with d3.js and I'm currently attempting to reconnect paths between nodes on a force graph. Here is an example image of what I am trying to achieve: I want to be able to drag the red circle and have the path connected to other nod ...

javascriptd3.jssvg

The inheritance caused this scope to be lost

Here is an illustration of code with two files and "classes". In the CRUD class, there is a problem with this.modelName when setting routes as it changes the context. The question arises on how to maintain the same scope within the CRUD where modelName is ...

javascriptnode.jsoop

What is the best way to style a tooltip in an ASP.NET application using CSS?

protected void grd_RowDataBound(object sender, GridViewRowEventArgs e) { if (e.Row.RowType == DataControlRowType.DataRow) { foreach (TableCell cell in e.Row.Cells) { ...

javascriptjquerycssasp.net

Discovering country code details through the Geonames service API rather than relying on the HTML5 location object

My goal is to retrieve the country code of the user's current location using the Geonames Service API. However, it seems that the API only provides a two-letter country code instead of a three-letter one, which is what I require. To work around this i ...

javascriptjqueryhtmlgeolocationgeonames

Finding differences between two 24-hour format times using moment.js

Is there a way to compare two times in 24-hour format using the code below? $("#dd_start_timing, #dd_end_timing").on('keyup change keydown', function() { var DutyDayStartTime = $("#dd_start_timing").val().trim();// 13:05 var ...

javascriptjquerymomentjs

Discovering the process of previewing a video upload using react-player

Currently, I have an input that allows users to upload video files of type File. In my application, there is also a react-player component that requires a URL prop, which can be either an array or MediaStream according to its documentation. After doing som ...

javascriptreactjsreact-player

What mistakes am I making in my usage of React hooks in this situation?

As part of my journey through the FullstackOpen course at the University of Helsinki, I am working on creating a simple Phonebook application. In troubleshooting my code, I've noticed that my 'filterBy' state is consistently one step behind, ...

javascriptreactjsreact-hooks

What is the process for installing a particular version of npm?

Is it possible to install npm version 1.3.11 specifically? How can this be achieved? The npm documentation provides information on installing the latest version but does not address installing a particular version. ...

node.jsnpm