[Solved] You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file - Laravel

Laravel Mohaimen Khalid

Problem:  When we use Laravel and try to compile with npm run dev we got an error - 

You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file
 It is better to say we used laravel version 8 and laravel-mix version 6 + . Now we try to discuss why this problem occurred.


Solution:

It's actually a Laravel mix version 6 configuration issue for Vue support. According to the laravel official documentation, laravel Mix 6 ships with support for the latest version of numerous dependencies, including webpack 5, PostCSS 8, Vue Loader 16, and more extra features. So we don't need to add vue loader. 

They also said that -  "Laravel Mix was originally built to be quite opinionated. One of these opinions was that Vue support should be provided out of the box. Any call to mix.js() would instantly come with the benefit of Vue single-file components.  Though we're not removing Vue support by any stretch, we have extracted Vue to its own "featured flag":  mix.vue()"

Laravel mix will automatically install the Babel plugins necessary for Vue single-file component compilation support when using the vue method. No further configuration is required.

Just add this new flag to webpack.mix.js file - 

mix.js('resources/js/app.js', 'public/js')
  .vue()
  .postCss('resources/css/app.css', 'public/css', [
  //
]);

Now run your build command. Hope it works fine. 


Thank you for reading the article. If you face any problems, please comment below.