Error launching on NextJS

[Gr33nLight]

I'm using version 0.0.28 and NextJS 12.3.1 I added a console.log at the start of a page and launching the app in development gets me this error that prevent the app from running, note that before this error happens, I get the console.log in the editor as expected. Removing the console.log and restarting the dev command solves the error

error - Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
    at renderElement (/Users/demo/Documents/Dev/JS/ewi-frontend/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6043:9)
    at renderNodeDestructiveImpl (/Users/demo/Documents/Dev/JS/ewi-frontend/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
    at renderNodeDestructive (/Users/demo/Documents/Dev/JS/ewi-frontend/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
    at renderNode (/Users/demo/Documents/Dev/JS/ewi-frontend/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6259:12)
    at renderHostElement (/Users/demo/Documents/Dev/JS/ewi-frontend/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5642:3)
    at renderElement (/Users/demo/Documents/Dev/JS/ewi-frontend/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5952:5)
    at renderNodeDestructiveImpl (/Users/demo/Documents/Dev/JS/ewi-frontend/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
    at renderNodeDestructive (/Users/demo/Documents/Dev/JS/ewi-frontend/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
    at renderNode (/Users/demo/Documents/Dev/JS/ewi-frontend/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6259:12)
    at renderChildrenArray (/Users/demo/Documents/Dev/JS/ewi-frontend/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6211:7) {
  page: '/auth'
}

[Gr33nLight]

This is the code change in question

export default function Auth() {
  console.log('a');
  return (
    <div className="flex flex-1 bg-stone-50">
     ...
    </div>
  );
}

[ArtemGovorov]

We've tried a freshly generated Next 12 app, created auth.js file with the exact same content, but everything is working for us as expected with no errors:

Can you please create a sample repo demonstrating the issue, or maybe you can see something in the recording that we're missing to reproduce it?

[Ahmadh26]

Hi @ArtemGovorov I am currently experiencing the same issue over and over again.

I have a nextjs 12 project, inside the _app.tsx i am logging something (code below)

_app.tsx

```ts import 'tailwindcss/tailwind.css' import '../styles/globals.css' import type { AppProps } from 'next/app' import NProgress from 'nprogress' import { Router, useRouter } from 'next/router' import { SessionProvider } from 'next-auth/react' import { ToastContainer } from 'react-toastify' import { store } from '../store' import { Provider } from 'react-redux' import { useEffect, useState } from 'react' import { GTMAuthEvent, GTMPageView } from '@lib/gtm' import Script from 'next/script' import { QueryClientProvider, QueryClient, Hydrate, } from '@tanstack/react-query' import { ReactQueryDevtools } from '@tanstack/react-query-devtools' NProgress.configure({ showSpinner: false }) Router.events.on('routeChangeStart', () => NProgress.start()) Router.events.on('routeChangeComplete', () => NProgress.done()) Router.events.on('routeChangeError', () => NProgress.done()) function MyApp({ Component, pageProps }: AppProps) { const [queryClient] = useState(() => new QueryClient()) const router = useRouter() const session = pageProps.session console.log(session) // THIS IS CAUSING THE ISSUE useEffect(() => { const handleRouteChange = (url: string) => { GTMPageView(url) } if (session?.uuid) GTMAuthEvent(router.asPath, session.uuid) else GTMAuthEvent(router.asPath) router.events.on('routeChangeComplete', handleRouteChange) router.events.on('hashChangeComplete', handleRouteChange) return () => { router.events.off('routeChangeComplete', handleRouteChange) router.events.off('hashChangeComplete', handleRouteChange) } // eslint-disable-next-line react-hooks/exhaustive-deps }, [router.events, session?.uuid]) return ( Githubissues.

Githubissues is a development platform for aggregating issues.