I deployed my Next.js app on Vercel and its blank. It works fine locally.
On the browser console I can see this error:
_app-1516aa2c14264726.js:101 Uncaught SyntaxError: Unexpected token '('
I do not see any error on my _app.js page with VSCode.
I do not know where to look and how to debug that.
When I enter a page url like www.example.com/dashboards for exemple, I can see on Vercel, in the function logs, [GET] /dashboards
without errors.
Here is my _app.js code:
// ** Next Imports
import Head from 'next/head';
import { Router, useRouter } from 'next/router';
import { useEffect } from 'react';
// ** Store Imports
import { store } from 'src/store';
import { Provider } from 'react-redux';
// ** Loader Import
import NProgress from 'nprogress';
// ** Emotion Imports
import { CacheProvider } from '@emotion/react';
// ** Config Imports
import 'src/configs/i18n';
import { defaultACLObj } from 'src/configs/acl';
import themeConfig from 'src/configs/themeConfig';
// ** Custom imports
import {
fetchAuthorizationAPI,
getUser ,
} from 'components/Utils/apis';
// ** Fake-DB Import
import 'src/@fake-db';
// ** Third Party Import
import { Toaster } from 'react-hot-toast';
import { hotjar } from 'react-hotjar';
import swell from 'swell-js';
// ** Component Imports
import UserLayout from 'src/layouts/UserLayout';
import AclGuard from 'src/@core/components/auth/AclGuard';
import ThemeComponent from 'src/@core/theme/ThemeComponent';
import AuthGuard from 'src/@core/components/auth/AuthGuard';
import GuestGuard from 'src/@core/components/auth/GuestGuard';
import WindowWrapper from 'src/@core/components/window-wrapper';
// ** Spinner Import
import Spinner from 'src/@core/components/spinner';
// ** Contexts
import { AuthProvider } from 'src/context/AuthContext';
import { SettingsConsumer, SettingsProvider } from 'src/@core/context/settingsContext';
// ** Styled Components
import ReactHotToast from 'src/@core/styles/libs/react-hot-toast';
// ** Utils Imports
import { createEmotionCache } from 'src/@core/utils/create-emotion-cache';
// ** Prismjs Styles
import 'prismjs';
import 'prismjs/themes/prism-tomorrow.css';
import 'prismjs/components/prism-jsx';
import 'prismjs/components/prism-tsx';
// ** React Perfect Scrollbar Style
import 'react-perfect-scrollbar/dist/css/styles.css';
// ** Global css styles
import '../../styles/globals.css';
//SEO, Cookies, Translation
//import { DefaultSeo } from 'next-seo';
import { parseCookies } from 'nookies';
const clientSideEmotionCache = createEmotionCache();
//const queryClient = new QueryClient();
const { HJID } = process.env;
const { HJSV } = process.env;
const { SWELL_STORE_ID } = process.env;
const { NEXT_PUBLIC_SWELL_PK } = process.env;
// ** Pace Loader
if (themeConfig.routingLoader) {
Router.events.on('routeChangeStart', () => {
NProgress.start()
})
Router.events.on('routeChangeError', () => {
NProgress.done()
})
Router.events.on('routeChangeComplete', () => {
NProgress.done()
})
}
const Guard = ({ children, authGuard, guestGuard }) => {
try{
if (guestGuard) {
return <GuestGuard fallback={<Spinner />}>{children}</GuestGuard>
} else if (!guestGuard && !authGuard) {
return <>{children}</>
} else {
return <AuthGuard fallback={<Spinner />}>{children}</AuthGuard>
}
}catch(err){
console.log('eerr', err)
}
}
// ** Configure JSS & ClassName
const App = props => {
const { Component, emotionCache = clientSideEmotionCache, pageProps, auth_user, token } = props
// ** Hooks
const router = useRouter()
// Variables
const getLayout = Component.getLayout ?? (page => <UserLayout>{page}</UserLayout>)
const setConfig = Component.setConfig ?? undefined
const authGuard = Component.authGuard ?? true
const guestGuard = Component.guestGuard ?? false
const aclAbilities = Component.acl ?? defaultACLObj
useEffect(() => {
//ReactGA.initialize(`${NEXT_PUBLIC_GOOGLE_ANALYTICS}`);
//ReactGA.pageview(window.location.pathname + window.location.search);
history.scrollRestoration = 'manual';
window.scrollTo(0, 0);
},[])
useEffect(() => {
hotjar.initialize(HJID, HJSV);
swell.init(SWELL_STORE_ID, NEXT_PUBLIC_SWELL_PK);
}, []);
return (
<Provider store={store}>
<CacheProvider value={emotionCache}>
<Head>
<title>{`${themeConfig.templateName} - Dashboard`}</title>
<meta
name='description'
content={`${themeConfig.templateName} – Template !`}
/>
<meta name='keywords' content='E-commerce' />
<meta name='viewport' content='initial-scale=1, width=device-width' />
</Head>
<AuthProvider>
<SettingsProvider {...(setConfig ? { pageSettings: setConfig() } : {})}>
<SettingsConsumer>
{({ settings }) => {
return (
<ThemeComponent settings={settings}>
<WindowWrapper>
<Guard authGuard={authGuard} guestGuard={guestGuard}>
<AclGuard aclAbilities={aclAbilities} guestGuard={guestGuard}>
{getLayout(<Component {...pageProps} auth_user={auth_user} token={token} router={router} />)}
</AclGuard>
</Guard>
</WindowWrapper>
<ReactHotToast>
<Toaster position={settings.toastPosition} toastOptions={{ className: 'react-hot-toast' }} />
</ReactHotToast>
</ThemeComponent>
)
}}
</SettingsConsumer>
</SettingsProvider>
</AuthProvider>
</CacheProvider>
</Provider>
)
}
App.getInitialProps = async({ctx}) => {
const token = parseCookies(ctx).jwt
const userRes = token ? await fetchAuthorizationAPI(getUser, token, 'runtime') : null
const userData = userRes && await userRes;
return {
auth_user: userData,
token: token
}
}
export default App;
2
Answers
I followed @Micky's recommandation and I discovered that I had a setting on my next.config.js file that caused this error. I removed this line bellow and now it is working angain,
Thanks !
in my case
after many hours of trying every methods
believe me , every methods
it was my google chrome version
i updated and its work fine