Hello,
I’m facing a build error when deploying my vite+react+ts frontend Rosko Suite.
7:02:37 PM:
7:02:37 PM: $ CI= yarn build
7:02:37 PM: yarn run v1.22.19
7:02:37 PM: $ tsc && vite build
7:02:39 PM: src/core/router/routes.ts(7,43): error TS2307: Cannot find module ‘…/…/presentation/app/login’ or its corresponding type declarations.
7:02:39 PM: src/core/router/routes.ts(27,3): error TS2322: Type ‘LazyExoticComponent<ComponentType>’ is not assignable to type ‘LazyExoticComponent<() => Element>’.
7:02:39 PM: Type ‘LazyExoticComponent<ComponentType>’ is not assignable to type ‘{ readonly _result: () => Element; }’.
7:02:39 PM: Types of property ‘_result’ are incompatible.
7:02:39 PM: Type ‘ComponentType’ is not assignable to type ‘() => Element’.
7:02:39 PM: Type ‘ComponentClass<any, any>’ is not assignable to type ‘() => Element’.
7:02:39 PM: Type ‘ComponentClass<any, any>’ provides no match for the signature ‘(): Element’.
7:02:39 PM: error Command failed with exit code 2. (Search results for '"non-zero exit code: 2"' - Netlify Support Forums)
7:02:39 PM: info Visit yarn run | Yarn for documentation about this command.
7:02:39 PM:
7:02:39 PM: build.command failed
7:02:39 PM: ────────────────────────────────────────────────────────────────
7:02:39 PM:
7:02:39 PM: Error message
7:02:39 PM: Command failed with exit code 2: CI= yarn build (Search results for '"non-zero exit code: 2"' - Netlify Support Forums)
7:02:39 PM:
7:02:39 PM: Error location
7:02:39 PM: In Build command from Netlify app:
7:02:39 PM: CI= yarn build
7:02:39 PM:
7:02:39 PM: Resolved config
7:02:39 PM: build:
7:02:39 PM: command: CI= yarn build
7:02:39 PM: commandOrigin: ui
7:02:39 PM: environment:
7:02:39 PM: - VITE_APP_BASE_URL
7:02:39 PM: - VITE_APP_IMG_PLACEHOLDER_URL
7:02:39 PM: publish: /opt/build/repo/dist
7:02:39 PM: publishOrigin: ui
7:02:40 PM: Build failed due to a user error: Build script returned non-zero exit code: 2
7:02:40 PM: Failing build: Failed to build site
7:02:40 PM: Finished processing build request in 17.751s
everything work normally locally.
here is my architecture and routes page :
``import React, { useState } from ‘react’;
import { InputPasswordWithLabel, InputWithLabel } from ‘…/…/…/components/inputs’;
import { PrimaryButton } from ‘…/…/…/components/buttons’;
import { LoginEntity } from ‘…/…/…/core/entities/auth/authSlice.entity’;
import { getConnectedUser, newSession } from ‘…/…/…/core/services/modulesServices/auth.service’;
import { selectRootLoading } from ‘…/…/…/core/store/modules/rootSlice’;
import { useAppSelector } from ‘…/…/…/core/store/hooks’;
import { toast } from ‘react-toastify’;
import { setConnectedUser, setUserToken } from ‘…/…/…/core/store/modules/authSlice’;
import { store } from ‘…/…/…/core/store’;
const LoginPage = () => {
const loading = useAppSelector(selectRootLoading);
const [values, setValues] = useState({
email: ‘’,
password: ‘’,
});
const loginHandler = (e: React.FormEvent): void => {
e.preventDefault();
const data = { email: values.email, password: values.password };
newSession(data)
.then((res) => {
store.dispatch(setUserToken(res.data));
getConnectedUser(res.data.accessToken).then((response) => {
store.dispatch(setConnectedUser(response.data));
window.location.href = ‘/home’;
});
})
.catch((err) => {
toast.error(err.msg, {
position: ‘top-center’,
autoClose: 1000,
});
});
};
return (
<div id='login'>
<div className='main'>
<div className='left'>
<div className='left-main'>
<div className='logo'>
<h1>Rosko Suite</h1>
</div>
<div className='header'>
<h2>Bienvenue</h2>
<p>Veuillez entrer vos coordonées pour continuer</p>
</div>
<form className='form' onSubmit={loginHandler}>
<InputWithLabel
labelName='E-mail'
inputType='email'
inputValue={values.email}
onChange={(e) => setValues({ ...values, email: e.target.value })}
required={true}
inputPlaceholder='Entrer votre E-mail'
/>
<InputPasswordWithLabel
labelName='mot de passe'
inputType='password'
inputValue={values.password}
inputPlaceholder='Entrer votre mot de passe'
required={true}
onChange={(e) => setValues({ ...values, password: e.target.value })}
/>
<div className='remember-me'>
<input type='checkbox' />
<span>Se souvenir de moi</span>
</div>
<PrimaryButton
buttonClass='btn-primary'
buttonValue='Connexion'
buttonType='submit'
loading={loading}
/>
</form>
</div>
</div>
<div className='right'></div>
</div>
</div>
);
};
export default LoginPage;
