skip to Main Content

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


  1. Chosen as BEST ANSWER

    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 !


  2. 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

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search