Keep running into the same error, During the build step netlify says it can’t resolve my SignUp component. at first the casing was wrong on the import so fixed that but still doesnt deploy - Why can’t it resolve this? not understanding whats going on here.
1:40:47 PM: Could not resolve “…/Components/SignUp” from “src/App.jsx”
1:40:47 PM: file: /opt/build/repo/src/App.jsx
1:40:47 PM: error during build:
1:40:47 PM: RollupError: Could not resolve “…/Components/SignUp” from “src/App.jsx”
1:40:46 PM: Netlify Build
1:40:46 PM: ────────────────────────────────────────────────────────────────
1:40:46 PM:
1:40:46 PM: ❯ Version
1:40:46 PM: @netlify/build 29.24.3
1:40:46 PM:
1:40:46 PM: ❯ Flags
1:40:46 PM: baseRelDir: true
1:40:46 PM: buildId: 6545308a6fd41703a1b66c0d
1:40:46 PM: deployId: 6545308a6fd41703a1b66c0f
1:40:46 PM:
1:40:46 PM: ❯ Current directory
1:40:46 PM: /opt/build/repo
1:40:46 PM:
1:40:46 PM: ❯ Config file
1:40:46 PM: No config file was defined: using default values.
1:40:46 PM:
1:40:46 PM: ❯ Context
1:40:46 PM: production
1:40:46 PM:
1:40:46 PM: Build command from Netlify app
1:40:46 PM: ────────────────────────────────────────────────────────────────
1:40:46 PM:
1:40:46 PM: $ npm run build
1:40:46 PM: > [email protected] build
1:40:46 PM: > vite build
1:40:47 PM: vite v4.5.0 building for production…
1:40:47 PM: transforming…
1:40:47 PM: ✓ 23 modules transformed.
1:40:47 PM: ✓ built in 378ms
1:40:47 PM: Could not resolve “…/Components/SignUp” from “src/App.jsx”
1:40:47 PM: file: /opt/build/repo/src/App.jsx
1:40:47 PM: error during build:
1:40:47 PM: RollupError: Could not resolve “…/Components/SignUp” from “src/App.jsx”
1:40:47 PM: at error (file:///opt/build/repo/node_modules/rollup/dist/es/shared/node-entry.js:2287:30)
1:40:47 PM: at ModuleLoader.handleInvalidResolvedId (file:///opt/build/repo/node_modules/rollup/dist/es/shared/node-entry.js:24860:24)
1:40:47 PM: at file:///opt/build/repo/node_modules/rollup/dist/es/shared/node-entry.js:24822:26
1:40:47 PM:
1:40:47 PM: “build.command” failed
1:40:47 PM: ────────────────────────────────────────────────────────────────
1:40:47 PM:
1:40:47 PM: Error message
1:40:47 PM: Command failed with exit code 1: npm run build
1:40:47 PM:
1:40:47 PM: Error location
1:40:47 PM: In Build command from Netlify app:
1:40:47 PM: npm run build
1:40:47 PM:
1:40:47 PM: Resolved config
1:40:47 PM: build:
1:40:47 PM: command: npm run build
1:40:47 PM: commandOrigin: ui
1:40:47 PM: environment:
1:40:47 PM: - VITE_API_KEY
1:40:47 PM: publish: /opt/build/repo/dist
1:40:47 PM: publishOrigin: ui
1:40:47 PM: Build failed due to a user error: Build script returned non-zero exit code: 2
1:40:47 PM: Failing build: Failed to build site
1:40:48 PM: Finished processing build request in 20.329s
1:40:48 PM: Failed during stage “building site”: Build script returned non-zero exit code: 2
Signup Component
import { useState } from "react";
import { Link } from "react-router-dom";
import { auth, database } from "../lib/firebase";
import { createUserWithEmailAndPassword } from "firebase/auth";
import {ref,set } from "firebase/database";
import styles from "../Styles/entryPortal.module.css"
const SignUp = ({navigateTo,setUserUid}) => {
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const [errorStatus,setErrorStatus] = useState(false);
const [errorMessage,setErrorMessage] = useState("");
const handleSignUp = (e) => {
e.preventDefault();
if(password.length <= 6){
setErrorStatus(true);
setErrorMessage("Password must be at least 6 characters long.")
return null
}
createUserWithEmailAndPassword(auth, email, password)
.then((userCreds) => {
const uid = userCreds.user.uid;
const userRef = ref(database, `users/${uid}`);
const data = {
email: email,
savedLinks: {}
};
set(userRef, data).then(() => {
setUserUid(uid);
navigateTo("/");
});
}).catch((error)=>{
setErrorStatus(true);
setErrorMessage(error.code);
});
setErrorMessage("");
setErrorStatus(false);
return null
};
return (
<div className={`${styles.container} ${styles.wrapper}`}>
<p>Create Account 🙌</p>
<form onSubmit={handleSignUp}>
<input
type="email"
placeholder="E-mail"
onChange={(e) => {
setEmail(e.target.value);
}}
value={email}
/>
<input
type="password"
placeholder="Password"
onChange={(e) => {
setPassword(e.target.value);
}}
value={password}
/>
<button type="submit">Sign Up</button>
{errorStatus ? <p style={{textAlign:'center', color:"red"}}>{errorMessage}</p> : null}
</form>
<p>Already have an account?, <Link to="/signin">Sign In</Link></p>
<p><Link to="/">Home</Link></p>
</div>
);
};
export default SignUp;
App.jsx
import { useState } from "react";
import { Route, Routes, useNavigate,Navigate } from "react-router-dom";
import "./App.css";
import Navigation from "../Components/Navigation";
import Main from "../Components/Main";
import SignIn from "../Components/SignIn";
import SignUp from "../Components/SignUp"
import FavouriteLinks from "../Components/FavouriteLinks";
import PageNotFound from "../Components/PageNotFound";
function App() {
const navigateTo = useNavigate();
const [userUid, setUserUid] = useState("");
return (
<>
<div className="Page">
<Navigation setUserUid={setUserUid} userUid={userUid} />
<Routes>
<Route path="/" element={<Main userUid={userUid} />} />
<Route path="/signup" element={<SignUp navigateTo={navigateTo} setUserUid={setUserUid} />} />
<Route path="/signin"element={<SignIn navigateTo={navigateTo} setUserUid={setUserUid} />} />
<Route path="/favourites" element={userUid ? (<FavouriteLinks userUid={userUid} />) : (<Navigate to="*" />)} />
<Route path="*" element={<PageNotFound />} />
</Routes>
</div>
</>
);
}
export default App;