Next.js Discord

Discord Forum

Source map for troubleshooting post-build errors?

Answered
French Angora posted this in #help-forum
Open in Discord
French AngoraOP
Hi all

Apologies if you've seen this post in another Discord server - I honestly thought I was posting it here, lol!

As per title, I’m new to Next and I’m wanting to understand whether there’s a way to troubleshoot issues on a built site.

Context: During dev I have no issues, and I can run a build script without issues as well. However when I run my build (npm run start) I get a 500 on the initial document load, even though the page still loads without any visible errors. So essentially I get a 200 response right after a 500. The error itself I can share later, but it’s essentially a call() error. It seems that it’s trying to call a react component that doesn’t exist.

My question is really how I go about troubleshooting this principally rather than the error itself? Since I can’t see the exact origin it makes it difficult. Is there a build config I can set to make my code build with a source map for example?
Answered by French Angora
I eventually fixed my issue, leaving this here for anyone interested.

The problem is related to MUI in combination with NextJS. It seems that support for Next 13+ is not quite there yet, or I have perhaps missed a key point regarding how it is set up. Removing MUI components fixed my issue.
View full answer

9 Replies

@Ray I think there is an error/warning during the build?
French AngoraOP
Nope that’s my problem, none during the build. Only happens when I run it post build. Incredibly weird!
@French Angora Nope that’s my problem, none during the build. Only happens when I run it post build. Incredibly weird!
Ray
/** @type {import('next').NextConfig} */
const nextConfig = {
  productionBrowserSourceMaps: true,
};

module.exports = nextConfig;

this can enable source map in production build
@Ray ts /** @type {import('next').NextConfig} */ const nextConfig = { productionBrowserSourceMaps: true, }; module.exports = nextConfig; this can enable source map in production build
French AngoraOP
Thank you this gave me the clue I needed. It seems that my google analytics script was forcing all my components to be client-rendered, which in turn caused the errors not to show up during my build
@Ray ts /** @type {import('next').NextConfig} */ const nextConfig = { productionBrowserSourceMaps: true, }; module.exports = nextConfig; this can enable source map in production build
French AngoraOP
I still can't see where the error occurs but at least I can now systematically remove things to troubleshoot
@Ray how do you load the analytics script?
French AngoraOP
Thanks for your help I appreciate it>

I looked at a couple of methodologies and started using the below as this is what worked for me. It now warned me that it's best to wrap that in a suspense boundery so I've done that. 

'use client'
import { pageview } from '@/app/lib'
import { usePathname, useSearchParams } from 'next/navigation'
import Script from 'next/script'
import { useEffect } from 'react'

export default function Analytics() {
  const pathname = usePathname()
  const searchParams = useSearchParams()

  useEffect(() => {
    if (pathname) {
      pageview(pathname)
    }
  }, [pathname, searchParams])

  return (
    <>
      <Script
        id="gtm-script"
        strategy="afterInteractive"
        dangerouslySetInnerHTML={{
          __html: `
    (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
    new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
    j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
    'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
    })(window,document,'script','dataLayer', "GTM-PQGP9C7M");
  `,
        }}
      />
    </>
  )
}


useSearchParams was essentially causing this.

I think I figured it out though... it seems like it couldn't connect to my API during build, and I had forgotten to force the page to SSR. I don't know how it was still collecting or loading the information though lol. Anyway let me try go through the issue to see if I can now replicate it. Thanks again!
@French Angora Thanks for your help I appreciate it> I looked at a couple of methodologies and started using the below as this is what worked for me. It now warned me that it's best to wrap that in a suspense boundery so I've done that. 'use client' import { pageview } from '@/app/lib' import { usePathname, useSearchParams } from 'next/navigation' import Script from 'next/script' import { useEffect } from 'react' export default function Analytics() { const pathname = usePathname() const searchParams = useSearchParams() useEffect(() => { if (pathname) { pageview(pathname) } }, [pathname, searchParams]) return ( <> <Script id="gtm-script" strategy="afterInteractive" dangerouslySetInnerHTML={{ __html: ` (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer', "GTM-PQGP9C7M"); `, }} /> </> ) } useSearchParams was essentially causing this. I think I figured it out though... it seems like it couldn't connect to my API during build, and I had forgotten to force the page to SSR. I don't know how it was still collecting or loading the information though lol. Anyway let me try go through the issue to see if I can now replicate it. Thanks again!
Ray
yes you should wrap Analytics with Suspense
French AngoraOP
I eventually fixed my issue, leaving this here for anyone interested.

The problem is related to MUI in combination with NextJS. It seems that support for Next 13+ is not quite there yet, or I have perhaps missed a key point regarding how it is set up. Removing MUI components fixed my issue.
Answer