`How to integrate browserify with grunt to optimize jquery-ui`

Whenever I encounter the

"Error: Cannot find module './core' from '/var/www/html/psychedharma/public_html/vendor'"

I typically avoid using browserify, but it seems that jquery-ui requires it (pun intended.)

If anyone could offer some assistance, it would be greatly appreciated.

module.exports = function(grunt) {

    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-contrib-copy');
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-browserify');

    grunt.initConfig({

        node: './node_modules',
        dest: './public_html/vendor',
        destfaf: './public_html/fonts',

        copy: {
            main: {
                files: [                    
                    {
                        expand: true,
                        flatten: true,
                        src: ['<%= node %>/font-awesome/fonts/fontawesome-webfont.*'],
                        dest: '<%= destfaf %>/', 
                        filter: 'isFile'
                    },
                    {
                        expand: true,
                        flatten: true,
                        src: ['<%= node %>/bootstrap/fonts/glyphicons-halflings-regular.*'],
                        dest: '<%= destfaf %>/', 
                        filter: 'isFile'
                    }
                ]
            }
        },
        concat: {           
            css: {
                files: {
                    '<%= dest %>/css.css': [
                        '<%= node %>/bootstrap/dist/css/bootstrap.min.css',
                        '<%= node %>/font-awesome/css/font-awesome.min.css'
                    ]
                }
            },
            js: {
                files: {
                    '<%= dest %>/js.js': [
                        '<%= node %>/jquery/dist/jquery.min.js',
                        '<%= node %>/bootstrap/dist/js/bootstrap.min.js',
                        '<%= node %>/less/dist/less.min.js',
                        '<%= node %>/jquery-ui/jquery-ui.js',
                        '<%= node %>/jquery-ui/sortable.js'
                    ]
                }
            }
        },
        browserify: {
            dist: {
                files: {
                    '<%= dest %>/js.js': ['<%= dest %>/js.js']
                },
                // options: {
                //     transform: ['coffeeify']
                // }   
            }
        },
        uglify: {
            build: {
                files: {
                    '<%= dest %>/js.min.js': [ '<%= dest %>/js.js' ]
                }
            }
        }
    });

    grunt.registerTask('def', [
        'concat',
        'copy',
        'browserify',
        'uglify'
    ]);

    grunt.registerTask('default', ['def']);
};

Answer №1

Success! I managed to find the solution.

To begin with, I utilized a jQuery UI tag directly from the official repository:

npm install --save github:jquery/jquery-ui#1.11.4

Next, I substituted the following lines:

'<%= node %>/jquery-ui/jquery-ui.js',
'<%= node %>/jquery-ui/sortable.js'

with:

'<%= node %>/jquery-ui/ui/core.js',
'<%= node %>/jquery-ui/ui/widget.js',
'<%= node %>/jquery-ui/ui/mouse.js',
'<%= node %>/jquery-ui/ui/sortable.js'  

It appears that browserify may not be necessary after all.

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

Finding the custom attribute of the selected value for each selectpicker in Javascript

I am trying to extract the selected options from a bootstrap selectpicker as an array of objects using the code var roles = $("#adminUserRoles").find("option:selected");. However, I am facing difficulties in looping over each item in ro ...

Having trouble with your JavaScript regex not functioning properly?

I am currently working with an array of arrays and I need to iterate through it to retrieve each word, excluding any "@", punctuation, and hashtags. However, my regular expression seems to be removing certain words entirely from the array and I can't ...

Tips for creating a straight line through the center of a sphere in ThreeJs

Imagine having a sphere similar to this: const geometry = new THREE.SphereGeometry( 1, 32, 32 ); let sphere = new THREE.Mesh( geometry, material ); scene.add(sphere); What would be the method to draw a line along the diameter of the sphere? Specifically ...

React Native reminder: Unable to update React state on a component that is unmounted

I am seeking clarity on how to resolve the issue in useEffect that is mentioned. Below is the data for "dataSource": [{"isSelect":false, "selectedClass":null, "zoneId":1026, "zoneName":"tomato"}, ...

Challenges encountered when modifying the State in React

I am encountering difficulties when trying to update the state values. I have an external component that I am rendering using Map, and as a result, I am unable to access this. Consequently, when clicking on the component, I cannot call the handleClick func ...

Using TypeScript, implement a function that is called when a React checkbox's state changes to true

Currently, I am experimenting with the react feature called onChange. My goal is to update local data by adding a value when a checkbox is selected. Conversely, when the checkbox is unselected, I just want to display the original data. However, I find that ...

Checking the strength of passwords containing special characters

I'm looking to enhance my password validation by including special characters. However, I'm running into an issue where using '%' is causing problems. How can I properly implement validation for special characters? $.validator.addMetho ...

How can you interact between a parent's named controller and JavaScript files in AngularJS?

Lately, I've been exploring the use of named controllers in my code and find it to be a much better alternative to using traditional $scope variables. It makes accessing parent controller attributes and functions within the DOM seamless. See an exampl ...

JavaScript unable to access JSON document

Similar Inquiry: Accessing JSON service from localhost or file:// <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script> <script> $.getJSON('http://game4u.comuf.com/songs.json', function(data) { var outp ...

Error 1: React app failed to initiate due to Node ERR Code

Trying to run an old project with outdated dependencies has been a bit of a challenge. The attempt to update them hit a roadblock when faced with the need to install node modules first, resulting in an ERR! Code 1. The project originated on a different PC ...

Unlocking the potential of GraphQL: Harnessing the power of sibling resolvers to access output from another

Could use a little assistance. Let's say I'm trying to retrieve the following data: { parent { obj1 { value1 } obj2 { value2 } } } Now, I need the result of value2 in the value1 resolver for calculation ...

If an error occurs at the top level subscription, then RxJs won't employ switchMap

If my initial Observable encounters an error, then I will not subscribe to the switchMap Observable. Is this achievable? this._profileService.updateProfile(profile).pipe( tap(profile => { this.profile = profile; this.saving = false; this. ...

The positioning of the menu icons varies

When it comes to displaying the search icon in the WordPress toggle bar, I use a custom JavaScript file. This setup is mainly focused on website design and menu functionality. Additionally, I have integrated a newsletter subscription plugin for managing su ...

Methods for setting the value of a scope variable within a controller's function

I have a goal of presenting a page that calculates a balance in the background and displays it. To achieve this, I decided to separate the balance into its own directive. Here is the directive I have created: app.directive('smBalanceInfo', fun ...

Angular: Having trouble accessing method within scope

I am attempting to utilize a method from my $scope controller, which is imported from a Factory, and execute it using the onclick method in an Ionic-based HTML. However, I am encountering the issue of getting undefined and I am unsure of the reason behind ...

What is the process for converting a CSV file to JSON format using node.js?

I am working on converting a CSV file from Clash Royale into an array. The CSV file has over 40 properties in its header or data. For example: name level count upgrade cost common 14 5, 20, 50, 100 rare 12 50, 150, 400, 1000 Below is my node.j ...

Is there a way to confirm whether the current date and time, based on a specific timezone and hour, is before or equal to a particular date?

I am working on a project that involves a timezone map with publishing hour in the local zone and news articles that need to be scheduled using a date picker. This particular article is set up as follows: { timeZoneId: 'Europe/Paris, releaseHour: 9 ...

Integrating Typeform into a React application with a custom button component

I'm facing a challenge with integrating a Typeform contact form into my Gatsby React website. Most of the examples I've come across demonstrate using a basic html button, which doesn't align with the overall theme of my website. Below is the ...

What is the comparable javascript code for the <script src="something1.json"></script> tag?

Within my HTML code, I currently have the following line to read a JSON file: <script src="something1.json"></script> Inside this JSON file, there is a structure like so: var varName = { .... } This method of definition naturally sets up ...

"The debate over using 'stringly typed' functions, having numerous redundant functions, or utilizing TypeScript's string enums continues to divide the programming

I have a specific object structure that contains information about countries and their respective cities: const geo = { europe: { germany: ['berlin', 'hamburg', 'cologne'], france: ['toulouse', ' ...