Search code examples
vue.jsnuxt.jsnetlify

Why does my Nuxt site deployment on Netlify fail with Fatal Error: Module Not Found?

I am trying to add vue-lazyload to my nuxt.js app, it works locally but when I try to deploy via Netlify I recieve this error.

9:46:04 PM: [fatal] Nuxt build error
9:46:04 PM:   ERROR in ./plugins/vue-lazyload.js
9:46:04 PM:   Module not found: Error: Can't resolve 'vue-lazyload' in 'plugins'
   @ ./plugins/vue-lazyload.js 2:0-39 5:8-19

My vue-lazyload.js file can be found in ./plugins alongside my other plugins and I don't get this error on my local host. Here is the vue-lazyload.js

 import Vue from "vue";
 import VueLazyLoad from "vue-lazyload";

 import error from "../assets/error.svg";
 import loading from "../assets/loading.svg";

 Vue.use(VueLazyLoad, {
    preLoad: 1,
    error: error,
    loading: loading,
    attempt: 1
 });

Here is the plugins section from my nuxt.config.js

plugins: [
    { src: '~/plugins/uikit.js', ssr: false },
    { src: '~/plugins/vue-agile.js', ssr: false },
    { src: '~/plugins/vue-awesome.js', ssr: false },
    { src: '~/plugins/vue-lazyload.js', ssr: false }
],

I seen on another Stack question Netlify sometimes has case issues with component names but I checked my github repository and my local files for differing cases within the plugin file name and don't see any problems.

I feel like I have maybe missed something quite trivial but I don't know how to solve this issue or where to look to help figure it out, any help would be appreciated.

EDIT I've created a sample repo of my frontend on github here, it should allow you to see the frontend code which is being used during the production deployment.

EDIT 2 Issue was solved and removing repo link as no longer needed.

Solution

  • There is no vue-lazyload dependency in your package.json, so Netlify can't install it, just run this command npm install --save vue-lazyload