Rails 5: Webpacker can't resolve 'vuelidate' and 'vuelidate/lib/validators' in prod

Question

I am trying to use Vuelidate in production with Webpacker for my Rails app. Usually I just need to run the following commands for my packages.json to get built and deployed into my app:

RAILS_ENV=production bundle exec rake assets:clobber
RAILS_ENV=production bundle exec rake assets:clean
RAILS_ENV=production bundle exec rake assets:precompile

but this isn't working in prod since I added Vuelidate (works fine in dev).

Using /home/my_user/my_app/config/webpacker.yml file for setting up webpack paths
Compiling…
Compilation failed:
Hash: a535894e7898c0a336a3
Version: webpack 3.5.6
Time: 13838ms
                                       Asset       Size  Chunks             Chunk Names
             app-36e1d2de960efd5bf847.js.map    17.4 kB       2  [emitted]  app
           dashboard-9cadea07287686e15eed.js      99 kB       0  [emitted]  dashboard
                 app-36e1d2de960efd5bf847.js    1.65 kB       2  [emitted]  app
    app-4758d50be4328c1ed27fc08a09d9dae2.css  119 bytes       2  [emitted]  app
       dashboard-9cadea07287686e15eed.js.map     808 kB       0  [emitted]  dashboard
     application-06c4c55e7d8c8e2ea0de.js.map     703 kB       1  [emitted]  application
         application-06c4c55e7d8c8e2ea0de.js    83.9 kB       1  [emitted]  application
app-4758d50be4328c1ed27fc08a09d9dae2.css.map  117 bytes       2  [emitted]  app
              app-36e1d2de960efd5bf847.js.gz  843 bytes          [emitted]
      application-06c4c55e7d8c8e2ea0de.js.gz    30.5 kB          [emitted]
        dashboard-9cadea07287686e15eed.js.gz    35.4 kB          [emitted]
                               manifest.json  518 bytes          [emitted]
   [1] (webpack)/buildin/global.js 509 bytes {0} {1} [built]
   [2] ./app/javascript/packs/app.vue + 2 modules 1.65 kB {2} [built]
   [3] ./node_modules/extract-text-webpack-plugin/dist/loader.js?{"omit":1,"remove":true}!./node_modules/vue-style-loader!./node_modules/css-loader?minimize!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-18f420a0","scoped":true,"hasInlineConfig":false}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./app/javascript/packs/app.vue 41 bytes {2} [built]
   [5] ./app/javascript/packs/application.js 1.92 kB {1} [built]
   [6] ./app/javascript/packs/dashboard.js + 1 modules 45.1 kB {0} [built]
   [8] ./node_modules/css-loader?minimize!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-18f420a0","scoped":true,"hasInlineConfig":false}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./app/javascript/packs/app.vue 220 bytes [built]
    + 6 hidden modules

ERROR in ./app/javascript/packs/application.js
Module not found: Error: Can't resolve 'vuelidate' in '/home/my_user/my_app/app/javascript/packs'
 @ ./app/javascript/packs/application.js 13:0-34

ERROR in ./app/javascript/packs/dashboard.js
Module not found: Error: Can't resolve 'vuelidate' in '/home/my_user/my_app/app/javascript/packs'
 @ ./app/javascript/packs/dashboard.js 35:0-34

ERROR in ./app/javascript/packs/application.js
Module not found: Error: Can't resolve 'vuelidate/lib/validators' in '/home/my_user/my_app/app/javascript/packs'
 @ ./app/javascript/packs/application.js 14:0-59

ERROR in ./app/javascript/packs/dashboard.js
Module not found: Error: Can't resolve 'vuelidate/lib/validators' in '/home/my_user/my_app/app/javascript/packs'
 @ ./app/javascript/packs/dashboard.js 36:0-72
Child extract-text-webpack-plugin node_modules/extract-text-webpack-plugin/dist node_modules/css-loader/index.js?minimize!node_modules/vue-loader/lib/style-compiler/index.js?{"vue":true,"id":"data-v-18f420a0","scoped":true,"hasInlineConfig":false}!node_modules/vue-loader/lib/selector.js?type=styles&index=0!app/javascript/packs/app.vue:
       [0] ./node_modules/css-loader?minimize!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-18f420a0","scoped":true,"hasInlineConfig":false}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./app/javascript/packs/app.vue 220 bytes {0} [built]
        + 1 hidden module

here is my package.json file:

{
  "license": "UNLICENSED",
  "dependencies": {
    "@rails/webpacker": "^3.0.1",
    "vue": "^2.4.3",
    "vue-loader": "^13.0.4",
    "vue-resource": "^1.3.4",
    "vue-template-compiler": "^2.4.3",
    "vuelidate": "^0.5.0"
  },
  "devDependencies": {
    "webpack-dev-server": "^2.8.1"
  }
}

I'm guessing the pack isn't being properly installed to /home/my_user/my_app/app/javascript/packs. Any idea how I'd fix this?

Thanks in advance!

did you do yarn install in production? Also how did you add vuelidate? — aks, Oct 07 '17 at 18:26
I have yarn 1.1.0 installed in production, but I didn't install the packages with `yarn install` - it's my understanding that the `bundle exec rake assets:precompile` step takes care of the compilation of yarn packages automatically (see this link: https://github.com/rails/webpacker#deployment). As for vuelidate, I added it to my dev environment with yarn and it gets added to the packages.json file. I then reference it from my application.js file (`import Vuelidate from 'vuelidate'`). Is there something else I am meant to do? — DaniG2k, Oct 07 '17 at 22:32
Sure, I've updated my question. I have a feeling that installing `vuelidate` through yarn in production is necessary despite the fact that this isn't required for `vue`, `vue-loader`, `vue-resource` or `vue-template-compiler`. A bit strange imo — DaniG2k, Oct 08 '17 at 08:05

Rails 5: Webpacker can't resolve 'vuelidate' and 'vuelidate/lib/validators' in prod

0 Answers0