Rollup Module not found: Error: Can't resolve 'jquery'

Question

I'm trying to build a vuejs single file component and trying to bundle it with rollup but I'm getting an error Module not found: Error: Can't resolve 'jquery'. I've spent many an hours trying to resolve this issue but still can't figure out.

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

You're missing the JQuery module in your development dependencies, you could install it using the following command :

 npm i jquery --save-dev

--save-dev option to save your new installed module in devDependencies

in future when you will face a problem like that about missing a module you could install it as follow:

npm install missingModule --save-dev