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 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,
swcMinify: true, 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
1
