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.

Reply to

Use Markdown with GitHub-flavored code blocks.