How to add "browser_components" path to the webpack config?

I need to include the "bower_components" directory in the webpack config so I can use packages that are installed via bower into my project.

So I used mix.webpackConfig to add the new path like so

mix.webpackConfig({
    resolve: {
        modules: [
            path.resolve(__dirname, 'node_modules')
            path.resolve(__dirname, 'bower_components')
        ]
    }
});

However, when I compile my resources using npm run watch I get the following warnings

WARNING in ./resources/assets/js/bootstrap.js
Module not found: Error: Can't resolve 'bootstrap-sass' in 'C:\xampp\htdocs\Booker\resources\assets\js'
 @ ./resources/assets/js/bootstrap.js 13:2-27
 @ ./resources/assets/js/app.js
 @ multi ./resources/assets/js/app.js ./resources/assets/sass/app.scss

WARNING in ./resources/assets/js/bootstrap.js
Module not found: Error: Can't resolve 'jquery' in 'C:\xampp\htdocs\Booker\resources\assets\js'
 @ ./resources/assets/js/bootstrap.js 11:29-46
 @ ./resources/assets/js/app.js
 @ multi ./resources/assets/js/app.js ./resources/assets/sass/app.scss

Then in the browser's client I get the following error Error: Cannot find module "lodash"

How can I correctly include the bower_components path info my webpack setup so I can use the packages that are installed using bower?

randm

8 years ago

Level 6

I was able to get around the warning by changing my code to the following

var modules = mix.resolve.modules;

    modules.push(path.resolve(__dirname, 'bower_components'));

mix.webpackConfig({
    resolve: {
        modules: modules
    }
});

However, I am still getting the following error in the browser's console.

Error: Cannot find module "lodash"

Please or to participate in this conversation.