How to integrate a external js into the main.js file in Webpack vue.js?

Question

I want to integrate a downloaded javascript file from the source folder.

Consider that the css and js files exists in the path.

From what I gather to integrate a css in the main.js I just add

require('./vendor/bootstrap/css/bootstrap.min.css')

but how to add a js file ? When I add the js files the same way

require('./vendor/jquery/jquery.min.js')
require('./vendor/bootstrap/js/bootstrap.bundle.min.js')

I get an error message

./src/vendor/bootstrap/js/bootstrap.bundle.min.js
Module not found: Error: Can't resolve 'jquery' in '/home/<cool path>/ClientVueJs/src/vendor/bootstrap/js'
 @ ./src/vendor/bootstrap/js/bootstrap.bundle.min.js 14:125-142
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

apparently bootstrap.bundle.min.js expects jquery. Try to instal it via npm and require it before bootstrap. — Arseniy-II
– Arseniy-II, Commented Oct 16, 2018 at 8:56
Do I add it to the package.json file and run npm install or how is jquery integrated. I thought that I already integrated the jquery file — A.Dumas
– A.Dumas, Commented Oct 16, 2018 at 9:06

Max Sinev · Accepted Answer · 2018-10-16 10:12:25Z

0

Add alias for jquery to webpack config(and remove your require line require('./vendor/jquery/jquery.min.js')), because bootstrap depends on 'jquery' module:

    module.exports = {
    //...
        resolve: {
            alias: {
                jquery: path.resolve(__dirname, 'src/vendor/jquery/jquery.min.js')
            }
        }
    };

This binding lets webpack resolve require('jquery') from bootstrap file.

If you need to map library to additional variables like $ you have to use ProvidePlugin, check @Arseniy-II's comment with link.

edited Oct 16, 2018 at 10:12

answered Oct 16, 2018 at 9:35

Max Sinev

6,0192 gold badges30 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

A.Dumas Over a year ago

I have added the allias line to my webpack.base.conf.js file but I still get the error Module not found: Error: Can't resolve 'jquery' in ',somepath./ClientVueJs/src' @ ./src/main.js 24:0-17

Max Sinev Over a year ago

path should be relative to project directory, i think it should be src/vendor/jquery/jquery.min.js in alias.

Collectives™ on Stack Overflow

How to integrate a external js into the main.js file in Webpack vue.js?

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related