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



我在Vercel上部署了Next.js应用程序,它是空白的。它在本地运行良好。在浏览器控制台上,我可以看到这个错误:

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

我在使用VSCode的_app.js页面上没有看到任何错误。我不知道在哪里查找以及如何调试它。例如,当我输入类似www.example.com/dashboards的页面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;

我遵循@Micky的建议,发现我的next.config.js文件中有一个设置导致了这个错误。我删除了下面的这条线,现在它在安干工作,

swcMinify: true,

谢谢!

在我的案例中经过数小时的各种尝试相信我,每种方法

那是我的谷歌chrome版本我更新了它的工作良好

最新更新