0

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
A.Dumas
  • 2,619
  • 3
  • 28
  • 51
  • apparently bootstrap.bundle.min.js expects jquery. Try to instal it via npm and require it before bootstrap. – Arseniy-II Oct 16 '18 at 08: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 Oct 16 '18 at 09:06
  • I believe [here](https://stackoverflow.com/questions/37651015/webpack-using-bootstrap-jquery-is-not-defined) is what your are looking for. – Arseniy-II Oct 16 '18 at 09:13

1 Answers1

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.

Max Sinev
  • 5,884
  • 2
  • 25
  • 35
  • 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` – A.Dumas Oct 16 '18 at 09:58
  • path should be relative to project directory, i think it should be `src/vendor/jquery/jquery.min.js` in alias. – Max Sinev Oct 16 '18 at 10:12