考虑到 yarn run serve 在本地机器上工作，如何在使用 Netlify 部署时修复“未找到这些依赖项：”

Question

I am setting up a site using Vue.js, yarn and Netlify. When I run yanr run build on my local machine all goes well. When I deploy though Netlify I get the following issue:

5:17:55 PM: failed during stage 'building site': Build script returned non-zero exit code: 1   
5:17:55 PM: * @/views/SignInFlow/Recover.vue in ./src/router.js  
5:17:55 PM: * @/views/SignInFlow/Request.vue in ./src/router.js  
5:17:55 PM: * @/views/SignInFlow/SignIn.vue in ./src/router.js  

In order to fix the issue have tries to:

1. Clear cache
2. Reinstall node_modules
3. Run yarn install --save @/views/SignInFlow/Recover.vue in./src/router.js

This is what the router.js paths look like:

import Vue from "vue";
import Router from "vue-router";
import Home from "@/views/Home.vue";
import Team from "@/views/Team.vue";
import SignIn from "@/views/SignInFlow/SignIn.vue";
import Request from "@/views/SignInFlow/Request.vue";
import Recover from "@/views/SignInFlow/Recover.vue";

Nothing helps

Paths are correct I am 100% sure.

This is what is inside SignIn.vue:

<template>
  <div
    class="container"
    :class="{'light-background' : !isDarkMode, 'dark-background' : isDarkMode}"
  >
    <Notification v-if="hasText" :text="text"/>
    <RequestAccount/>
    <div class="login">
      <img src="@/assets/DCHQ.svg" v-show="isDarkMode">
      <img src="@/assets/DCHQ-dark.svg" v-show="!isDarkMode">
      <h4 :class="{'light-text' : isDarkMode, 'dark-text' : !isDarkMode}">Sign into Design+Code HQ</h4>
      <form @submit.prevent="onSubmit">
        <input
          type="email"
          placeholder="Email"
          :class="{'light-field' : isDarkMode, 'dark-field' : !isDarkMode}"
          v-model="email"
          required
        >
        <input
          type="password"
          placeholder="Password"
          :class="{'light-field' : isDarkMode, 'dark-field' : !isDarkMode}"
          v-model="password"
          required
        >
        <button>Sign In</button>
      </form>
      <router-link
        to="/recover"
        :class="{'light-link': isDarkMode, 'dark-link' : !isDarkMode}"
      >Forgot your password?</router-link>
      <ThemeSwitch/>
    </div>
  </div>
</template>

<script>
import RequestAccount from "@/components/RequestAccount";
import ThemeSwitch from "@/components/ThemeSwitch";
import Notification from "@/components/Notification";
import { auth } from "@/main";

export default {
  name: "SignIn",
  components: {
    RequestAccount,
    ThemeSwitch,
    Notification
  },
  data() {
    return {
      email: null,
      password: null,
      hasText: false,
      text: ""
    };
  },
  computed: {
    isDarkMode() {
      return this.$store.getters.isDarkMode;
    }
  },
  methods: {
    onSubmit() {
      const email = this.email;
      const password = this.password;

      auth
        .login(email, password, true)
        .then(response => {
          this.$router.replace("/");
        })
        .catch(error => {
          alert("Error: " + error);
        });
    }
  },
  mounted() {
    const params = this.$route.params;

    if (params.userLoggedOut) {
      this.hasText = true;
      this.text = "You have logged out!";
    } else if (params.userRecoveredAccount) {
      this.hasText = true;
      this.text = `A recovery email has been sent to ${params.email}`;
    } else if (params.userRequestedAccount) {
      this.hasText = true;
      this.text = `Your request has been sent to an administator for ${
        params.email
      }`;
    }
  }
};
</script>

<style scoped lang="scss">
.container {
  display: flex;
  justify-content: center;
  align-items: center;

  min-height: 100vh;
}

.login {
  width: 400px;
  text-align: center;
}
</style>

I want to make it possible to deploy my site through Netlify but I have no idea what else to try in order debug the issue.

Answer 1

If you have this problem, it means that after a first deploy to Netlify you changed the case of the folder's name's first letter. As Netlify memorized it the other way, it won't recognize the new name. So try to replace: @/views/SignInFlow/YourFile.vue with: @/views/signInFlow/YourFile.vue And same for the folder's name.

If you want the cause of the issue, look here: https://docs.netlify.com/configure-builds/troubleshooting-tips/#case-sensitivity