Currently, as I am creating a website using Vue.js, yarn, and Netlify. The build process works smoothly on my local machine when running yanr run build. However, upon deploying it through Netlify, an issue arises:
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
To resolve this problem, I have attempted the following steps:
- Clearing cache
- Reinstalling node_modules
- Running yarn install --save @/views/SignInFlow/Recover.vue in ./src/router.js
The paths defined in router.js are as follows:
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";
Unfortunately, none of these attempts have proven successful.
I am completely certain that the paths are accurate.
This is the content of 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 am eager to successfully deploy my site via Netlify, but I feel stuck as I'm unsure of what other troubleshooting steps to take.