文章/答案/技术大牛

发布

社区首页 >问答首页 >为什么我的Next.js部署应用程序显示一个空白页？

问为什么我的Next.js部署应用程序显示一个空白页？
EN

Stack Overflow用户

提问于 2022-08-22 13:15:45

回答 1查看 437关注 0票数 0

我在Vercel上部署了我的Next.js应用程序，它是空白的。在当地工作很好。在浏览器控制台上，我可以看到以下错误：

_app-1516aa2c14264726.js:101 Uncaught SyntaxError: Unexpected token '('

在使用_app.js的VSCode页面上，我没有看到任何错误。我不知道在哪里查找和如何调试它。例如，当我输入像Www.example.com/仪表板这样的页面url时，我可以在Vercel上看到函数日志中的[GET] /dashboards，没有错误。

以下是我的_app.js代码：

    // ** 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;

reactjs

next.js

vercel

回答 1

Stack Overflow用户

发布于 2022-08-22 15:31:06

我遵循@Micky的命令，我发现我在next.config.js文件上设置了一个导致这个错误的设置。我去掉了这条线，现在它开始工作了，

swcMinify: true,

谢谢！

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/73445763

复制

相似问题

问为什么我的Next.js部署应用程序显示一个空白页？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问为什么我的Next.js部署应用程序显示一个空白页？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问为什么我的Next.js部署应用程序显示一个空白页？
EN