Webpacker: You may need an appropriate loader to handle this file type

[JulienCorb]

I want to add VueJS to my existing rails app.So I added these gems to my Gemfile:

gem 'webpacker' 
gem 'foreman' 

Then I ran bundle, rails webpacker:install, rails webpacker:install:vue, yarn install.

I actually want to start using VueJS to build my FAQ page, so here is my faq.html.erb file (just to see if the helloworld example works):

<%= javascript_pack_tag 'hello_vue' %> 
 <div id="hello container">  
   <h1>{{message}}</h1> 
   <app />
 </div>

I then run foreman start.
And I get the following error:

ERROR in ./app/javascript/app.vue 
18:26:08 frontend.1 \| Module parse failed: Unexpected token (1:0) 
18:26:08 frontend.1 \| You may need an appropriate loader to handle this file type. 
18:26:08 frontend.1 \| \| <template> 
18:26:08 frontend.1 \| \|   <div id="app"> 
18:26:08 frontend.1 \| \|     <p>{{ message }}</p> 
18:26:08 frontend.1 \|  @ ./app/javascript/packs/hello_vue.js 9:0-29 18:26:08 frontend.1 \|  @ multi (webpack)-dev-server/client?http://localhost:3035 ./app/javascript/packs/hello_vue.js

[gauravtiwari]

Are you sure this command ran successfully? rails webpacker:install:vue

Could you please check if config/webpacker/loaders/vue.js exists and also config/environment.js has vue loader included in it?

[JulienCorb]

Well I think it ran successfully; I mean at least I did not get any error message.

I can't find these files. All I have is a config/webpack folder withdevelopment.js, production.js, test.js andenvironment.js

[gauravtiwari]

What version of webpacker you are using? 3.2.0?

[gauravtiwari]

And also inside package.json?

[JulienCorb]

when I run bundle info webpacker it says I have installed 3.1.1 but in my package.json it says I use "@rails/webpacker": "^3.2.0",

[gauravtiwari]

Yep I guess that's the issue. Please do: bundle update webpacker and then re-run vue installer. We should probably make a check to ensure both npm module and ruby gem are in sync.

[JulienCorb]

Allright, the first error seems to be OK, but now I get the following one:

19:15:07 frontend.1 | ERROR in ./node_modules/css-loader?sourceMap!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-6fb8108a","scoped":true,"hasInlineConfig":false}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0&bustCache!./app/javascript/app.vue
19:15:07 frontend.1 | Error on Loading PostCSS Config: Loading PostCSS Plugin failed: Cannot find module 'postcss-smart-import'
19:15:07 frontend.1 | Error: Error on Loading PostCSS Config: Loading PostCSS Plugin failed: Cannot find module 'postcss-smart-import'
19:15:07 frontend.1 |     at load.catch.err (/Users/juliencorbin/code/JulienCorb/TakeAMeal/node_modules/vue-loader/lib/style-compiler/load-postcss-config.js:30:13)
19:15:07 frontend.1 |     at <anonymous>
19:15:07 frontend.1 |  @ ./node_modules/extract-text-webpack-plugin/dist/loader.js?{"omit":1,"remove":true}!./node_modules/vue-style-loader!./node_modules/css-loader?sourceMap!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-6fb8108a","scoped":true,"hasInlineConfig":false}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0&bustCache!./app/javascript/app.vue 4:14-303
19:15:07 frontend.1 |  @ ./app/javascript/app.vue
19:15:07 frontend.1 |  @ ./app/javascript/packs/hello_vue.js
19:15:07 frontend.1 |  @ multi (webpack)-dev-server/client?http://localhost:3035 ./app/javascript/packs/hello_vue.js

[gauravtiwari]

Ahh right so since you ran the original installer with 3.1.1 it has old config files. Could you please re-run installer again? bundle exec rails webpacker:install

[JulienCorb]

Ok just ran the installer again and the First error got back

19:23:31 frontend.1 | ERROR in ./app/javascript/app.vue
19:23:31 frontend.1 | Module parse failed: Unexpected token (1:0)
19:23:31 frontend.1 | You may need an appropriate loader to handle this file type.
19:23:31 frontend.1 | | <template>
19:23:31 frontend.1 | |   <div id="app">
19:23:31 frontend.1 | |     <p>{{ message }}</p>
19:23:31 frontend.1 |  @ ./app/javascript/packs/hello_vue.js 9:0-29
19:23:31 frontend.1 |  @ multi (webpack)-dev-server/client?http://localhost:3035 ./app/javascript/packs/hello_vue.js

(But in my config folder I now have a webpacker/loaders/vue.js file)

[gauravtiwari]

Ahh :(

So the installers need to run in order since the vue installer modifies environment.js, if you have re-ran the base installer it might have replaced the environment.js

bundle exec rails webpacker:install #(already done)
bundle exec rails webpacker:install:vue #(run this one more time)

[JulienCorb]

thank you ! It now works perfectly 😃

[gauravtiwari]

Awesome 👍 😄