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

Posted 1 year ago by malhayek

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?

Please sign in or create an account to participate in this conversation.

Laracasts Mascot

Hi, Have We Met Yet?

Did you know that, in addition to the forum, Laracasts includes well over 1000 lessons on modern web development? All for the price of one lunch out per month.

Sign Me Up

Channels

Reply to

Use Markdown with GitHub-flavored code blocks.