Error: The Rollup module is unable to locate the 'jquery' file

I've been facing an issue while trying to bundle a vuejs single file component using rollup. The error message that keeps popping up is

Module not found: Error: Can't resolve 'jquery'
. Despite spending countless hours on this problem, I haven't been able to find a solution yet.

rollup.config.js

import babel from 'rollup-plugin-babel';
import minimist from 'minimist';
import uglify from 'rollup-plugin-uglify-es';
import vue from 'rollup-plugin-vue';

const argv = minimist(process.argv.slice(2));

const config = {
    input: 'src/index.js',
    output: {
        name: 'ExampleComponent',
        exports: 'named',
        globals: {
            jquery: 'jQuery',
        },
    },
    plugins: [
        vue({
            css: true,
            compileTemplate: true,
        }),
        babel({
            exclude: 'node_modules/**',
            externalHelpersWhitelist: [
                'defineProperties',
                'createClass',
                'inheritsLoose',
                'defineProperty',
                'objectSpread',
            ],
        }),
    ],
    external: ['jquery'],
};

// Only minify browser (iife) version
if (argv.format === 'iife') {
    config.plugins.push(uglify());
}

export default config;

index.js

// Import vue component
import component from '../src/main.vue';

// install function executed by Vue.use()
export function install(Vue) {
  if (install.installed) return;
  install.installed = true;
  Vue.component('ExampleComponent', component);
}

// Create module definition for Vue.use()
const plugin = {
  install,
};

// To auto-install when vue is found
let GlobalVue = null;
if (typeof window !== 'undefined') {
  GlobalVue = window.Vue;
} else if (typeof global !== 'undefined') {
  GlobalVue = global.Vue;
}
if (GlobalVue) {
  GlobalVue.use(plugin);
}

// To allow use as module (npm/webpack/etc.) export component
export default component;

package.json

{
  "main": "dist/example-component.umd.js",
  "module": "dist/example-component.esm.js",
  "unpkg": "dist/example-component.min.js",
  "scripts": {
    "build": "npm run build:unpkg & npm run build:es & npm run build:umd",
    "build:umd": "rollup --config build/rollup.config.js --format umd --file dist/vue-selectize.umd.js",
    "build:es": "rollup --config build/rollup.config.js --format es --file dist/vue-selectize.esm.js",
    "build:unpkg": "rollup --config build/rollup.config.js --format iife --file dist/vue-selectize.min.js"
  },
  "dependencies": {
    "tablesorter": "^2.31.0"
  },
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-plugin-transform-object-rest-spread": "^6.26.0",
    "babel-preset-env": "^1.7.0",
    "rollup": "^0.65.2",
    "rollup-plugin-babel": "^3.0.7",
    "rollup-plugin-uglify-es": "0.0.1",
    "rollup-plugin-vue": "^4.3.2",
    "vue": "^2.5.17",
    "vue-template-compiler": "^2.5.17"
  }
}

main.vue

<template>
    <select>
        <slot></slot>
    </select>
</template>
<script>
    import $ from 'jquery'

    if (!$().tablesorter) {
        require('tablesorter')
    }

    export default {
        // more code here...
    }
</script>

Answer №1

If you find yourself in a situation where the JQuery module is missing from your development dependencies, fear not! You can easily rectify this by running the following command:

 npm i jquery --save-dev

By including the --save-dev option, you ensure that your newly installed module is saved in the devDependencies section.

In the future, should you encounter a similar issue with a missing module, simply use the following syntax to install it:

npm install missingModule --save-dev

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

Cross-domain scripting with JavaScript

I currently manage 2 subdomains securityservices.example.com workstations.example.com All workstations are associated with the workstations.example.com One of the workstations, known as WS789012 on the domain, is fully qualified as: WS789012.workst ...

Leveraging three.js for visualizing temporal data series

What is the best approach for using time series data to control the animation of a three.js scene? For instance: Time | ObjA(x,y,z) | ObjB(x,y,z) | ... 00:00:00 | 0,9,0 | 1,1,1 | ... 00:00:10 | 0.1,0,0.1 | 1,0.5,1 | ... 00:0 ...

Is a function repeatedly invoked?

I have implemented a Pagination component in NextJS as follows: import Pagination from 'react-bootstrap/Pagination'; import Router from "next/router"; import {useEffect} from "react"; export { Paging } function Paging(props) ...

Vue.JS is throwing a TypeError: Unable to employ the 'in' operator to look for 'undefined' within the Laravel Object

How can I successfully pass an object from Laravel to Vue.js and utilize it in a v-for="option in this.options"? Although I am able to transfer the object from my Laravel blade to the Vue.js component and view it in the console, I encounter an error when a ...

Enable the entire button to be clickable without the need for JavaScript by utilizing a Bootstrap 5 button

Is there a way to make a button redirect when clicking anywhere on it, not just the text inside? Here is the button code utilizing Bootstrap 5: <button class="btn btn-rounded btn-primary" type="button">Placeholder Text</button& ...

Can JavaScript be used to modify the headers of an HTTP request?

Can JavaScript be used to modify or establish HTTP request headers? ...

Looking to retrieve the key value or iteration of a specific item within an Angular UI tree?

Here is a snippet of code showcasing how to use angular-ui-tree: <div ui-tree> <ol ui-tree-nodes="" ng-model="list"> <li ng-repeat="item in list" ui-tree-node> <div ui-tree-handle> {{item.title}} </div& ...

Differences Between APP_INITIALIZER and platformBrowserDynamic with provide

I've discovered two different approaches for delaying an Angular bootstrap until a Promise or Observable is resolved. One method involves using APP_INITIALIZER: { provide: APP_INITIALIZER, useFactory: (configService: ConfigurationService) => ( ...

Exploring the world of AngularJS 1.3 with the exciting anticipation of the upcoming release of Angular 2 in just one year

Currently contemplating learning AngularJS 1.3, but concerned about the upcoming release of version 2 and the significant changes that will come with it. Is it worth investing time and effort into mastering a framework that is soon to be obsolete? Seekin ...

Is it possible to retrieve the ID of an anchor tag when the text within two table items meets my specified criteria?

In the table with ID "PTSRCHRESULTS," each row contains anchor links. I am trying to find the ID of an element within a row that contains both "Undergrad" and "1". This is for Power Automate Desktop, but I can use JavaScript to get the necessary ID to clic ...

Enquire.js does not compute accurately at first glance, but only after adjustments are made during

Currently, I am working on incorporating media queries using Enquire.js and Vue.js. The functionality seems to be in good shape when manually resizing the browser window. However, upon loading the document, no match is detected. This peculiar behavior beco ...

A comprehensive guide on executing tasks prior to offering downloadable assets in Vue

In my Vue project, I am looking for a way to monitor file downloads. The idea is to generate a URL such as mysite.com/some/path/file-name.txt/tracking-source, trigger an action like sending the path to a tracking API, and then serve the file at mysite.com/ ...

Using JavaScript in PHP files to create a box shadow effect while scrolling may not produce the desired result

Issue at hand : My JavaScript is not functioning properly in my .php files CSS not applying while scrolling *CSS Files are named "var.css" #kepala { padding: 10px; top: 0px; left: 0px; right: 0px; position: fixed; background - c ...

Enhance Vue table field presentation

I am currently working on converting a Unix timestamp into a user-friendly date format, but I have encountered an issue. My desired implementation looks like this: <Column field="createdAt" header="Created at">{{ new Date(this).to ...

Execute jquery commands after the function has finished

I am trying to implement the code below: $(":file").change(function () { if (this.files && this.files[0]) { console.log(this.files[0]); var reader = new FileReader(); ...

Tracking your daily nutrition using cronometer with the powerful combination of JavaScript

I'm currently developing a JavaScript cronometer in vueJS. I want the timer to start at 5 minutes (300 seconds) and then continue counting minutes and seconds. Although my cronometer is functioning, I am struggling to get it to start counting minutes ...

What is the process for customizing the appearance of a prop within the <TextField> component?

Using my custom DatePicker.js component, I have two instances of <TextField>. When the user clicks on the <CalendarIcon> within the <TextField>, a small calendar pops up. However, I want to style the label in the <TextField> in a sp ...

Angular nested lists with drag and drop functionality

Recently, I've been working on creating a drag and drop dashboard and stumbled upon an amazing nested list at this link. This particular implementation uses the AngularJs JavaScript framework. However, since I don't have much experience with it, ...

What is the best way to showcase a div on top of all other elements in an HTML page?

As a newcomer to html and css, I have successfully created a div that contains city names. The issue I am currently facing is when I click on a button to display the div, it gets hidden behind the next section of my page. Take a look at the image below for ...

Converting a string into a TypeScript class identifier

Currently, I am dynamically generating typescript code and facing an issue with quotes in my output: let data = { path: 'home', component: '${homeComponentName}', children:[] }; let homeComponentName = 'HomeComponent' ...