PLEASE help us help you by writing a good post!
My Netlify site name: ruminate-frontend
Q. Do I have a DNS issue?
A. No, I do not have a customized domain for this site.
Q. Do I have an issue with build process?
A. Yes, I have an issue with preview deployment not production deployment.
When I understand the cause, I do not understand how to debug the issue because what I have taken to debug did not work.
The following is the information that has been returned from Netlify building process:
12:27:45 AM: Netlify Build
12:27:45 AM: ────────────────────────────────────────────────────────────────
12:27:45 AM:
12:27:45 AM: ❯ Version
12:27:45 AM: @netlify/build 29.26.3
12:27:45 AM:
12:27:45 AM: ❯ Flags
12:27:45 AM: baseRelDir: true
12:27:45 AM: buildId: 654f10be676e2a6c37d87ce6
12:27:45 AM: deployId: 654f10be676e2a6c37d87ce8
12:27:45 AM:
12:27:45 AM: ❯ Current directory
12:27:45 AM: /opt/build/repo
12:27:45 AM:
12:27:45 AM: ❯ Config file
12:27:45 AM: No config file was defined: using default values.
12:27:45 AM:
12:27:45 AM: ❯ Context
12:27:45 AM: deploy-preview
12:27:45 AM:
12:27:45 AM: Build command from Netlify app
12:27:45 AM: ────────────────────────────────────────────────────────────────
12:27:45 AM:
12:27:45 AM: $ npm run build
12:27:45 AM: > experiment2@0.0.0 build
12:27:45 AM: > tsc && vite build
12:27:47 AM: Failed during stage "building site": Build script returned non-zero exit code: 2
12:27:47 AM: src/contexts/AuthContext.tsx(3,3): error TS6133: "browserSessionPersistence" is declared but its value is never read.
12:27:47 AM: src/contexts/AuthContext.tsx(6,3): error TS6133: "setPersistence" is declared but its value is never read.
12:27:47 AM:
12:27:47 AM: "build.command" failed
12:27:47 AM: ────────────────────────────────────────────────────────────────
12:27:47 AM:
12:27:47 AM: Error message
12:27:47 AM: Command failed with exit code 2: npm run build (https://ntl.fyi/exit-code-2)
12:27:47 AM:
12:27:47 AM: Error location
12:27:47 AM: In Build command from Netlify app:
12:27:47 AM: npm run build
12:27:47 AM:
12:27:47 AM: Resolved config
12:27:47 AM: build:
12:27:47 AM: command: npm run build
12:27:47 AM: commandOrigin: ui
12:27:47 AM: environment:
12:27:47 AM: - REVIEW_ID
12:27:47 AM: publish: /opt/build/repo/dist
12:27:47 AM: publishOrigin: ui
12:27:47 AM: Build failed due to a user error: Build script returned non-zero exit code: 2
12:27:47 AM: Failing build: Failed to build site
12:27:47 AM: Finished processing build request in 19.839s
In the meantime, this is what I have in the codebase:
import {
GoogleAuthProvider,
createUserWithEmailAndPassword,
onAuthStateChanged,
signInWithEmailAndPassword,
signInWithPopup,
signOut,
} from 'firebase/auth'
import { createContext, useContext, useEffect, useReducer } from 'react'
import { auth } from '../components/api/firebase/index'
import useStatusMessages from '../hooks/StatusHook'
type TestState = {
email: string
password: string
userInfo: any
}
type TestAction = {
payload?: any
type: string
}
type StatusStateType = {
error: string
success: string
}
type Cell = {
AuthState: TestState
AuthDispatch: React.Dispatch<TestAction>
auth: any
// auth
googleAuth: () => void
Register: () => void
LogIn: () => void
logOut: () => void
//status
setSuccess: (message: string) => void
setError: (message: string) => void
statusState: StatusStateType
}
const AuthContext = createContext<Cell | null>(null)
export const AuthContextProvider = ({
children,
}: {
children: React.ReactNode
}) => {
// status handling
const { statusState, setError, setSuccess } = useStatusMessages({
error: '',
success: '',
})
const initialState: TestState = {
email: '',
password: '',
userInfo: {},
}
const AuthReducer = (state: TestState, action: TestAction) => {
switch (action.type) {
case 'SET_EMAIL':
return { ...state, email: action.payload }
case 'SET_PASSWORD':
return { ...state, password: action.payload }
case 'SET_USER':
return { ...state, userInfo: action.payload }
default:
return state
}
}
const [AuthState, AuthDispatch] = useReducer(AuthReducer, initialState)
// after page reload we are getting user information from session and updating the global state of AuthState.userInfo with it
useEffect(() => {
onAuthStateChanged(auth, (currentUser) => {
AuthDispatch({ type: 'SET_USER', payload: currentUser })
})
}, [])
// authentication functionality
// google auth
const provider = new GoogleAuthProvider()
// this authentication functions would be better to be inside of the each respective component instad of context API
const googleAuth = async () => {
try {
const user = await signInWithPopup(auth, provider)
AuthDispatch({ type: 'SET_USER', payload: user.user })
setSuccess('User Has Been Authenticated')
console.log(user)
} catch (error) {
const err: any = error
console.log(err.code)
setError(err.code)
}
}
// register
const Register = async () => {
const { email, password } = AuthState
try {
await createUserWithEmailAndPassword(auth, email, password)
onAuthStateChanged(auth, (currentUser) => {
AuthDispatch({ type: 'SET_USER', payload: currentUser })
})
setSuccess('User Has Been Created')
} catch (error) {
const err: any = error
console.log(err.code)
setError(err.code)
}
}
// login
const LogIn = async () => {
const { email, password } = AuthState
try {
await signInWithEmailAndPassword(auth, email, password)
onAuthStateChanged(auth, (currentUser) => {
AuthDispatch({ type: 'SET_USER', payload: currentUser })
console.log(currentUser)
})
setSuccess('User Has Logged In')
} catch (error) {
const err: any = error
console.log(err.code)
setError(err.code)
}
}
// logout
const logOut = async () => {
await signOut(auth)
AuthDispatch({ type: 'SET_USER', payload: {} })
window.location.reload()
}
return (
<AuthContext.Provider
value={{
AuthState,
AuthDispatch,
auth,
logOut,
Register,
LogIn,
googleAuth,
statusState,
setError,
setSuccess,
}}
>
{children}
</AuthContext.Provider>
)
}
export const UseAuthContext = () => {
const context = useContext(AuthContext)
if (!context) {
throw new Error('Context Not Wrapped Reload Page')
}
return context
}
Hence, I do not seem to know what is causing the issue nor how to fix it.
