My Next JS website was working perfectly, one day when I tried to install Apollo Rest from here https://www.apollographql.com/docs/link/links/rest/#gatsby-focus-wrapper I began having a lot of errors.
I discard any changes in packages.json, removed packages-lock.json, node_modules and dust file and folders. But keep getting the next error:
GraphQL error occurred [getDataFromTree] TypeError: Cannot read property 'indexOf' of undefined
at addBasePath (F:\Projects\breadcrumps\showcase\dist\functions\next\server\static\development\pages\index.js:2966:15)
at F:\Projects\breadcrumps\showcase\dist\functions\next\server\static\development\pages\index.js:2464:40
at Link.formatUrls (F:\Projects\breadcrumps\showcase\dist\functions\next\server\static\development\pages\index.js:2388:18)
at Link.render (F:\Projects\breadcrumps\showcase\dist\functions\next\server\static\development\pages\index.js:2588:14)
at processChild (F:\Projects\breadcrumps\showcase\node_modules\react-dom\cjs\react-dom-server.node.development.js:3134:18)
at resolve (F:\Projects\breadcrumps\showcase\node_modules\react-dom\cjs\react-dom-server.node.development.js:2960:5)
at ReactDOMServerRenderer.render (F:\Projects\breadcrumps\showcase\node_modules\react-dom\cjs\react-dom-server.node.development.js:3435:22)
at ReactDOMServerRenderer.read (F:\Projects\breadcrumps\showcase\node_modules\react-dom\cjs\react-dom-server.node.development.js:3373:29)
at renderToStaticMarkup (F:\Projects\breadcrumps\showcase\node_modules\react-dom\cjs\react-dom-server.node.development.js:4004:27)
at process (F:\Projects\breadcrumps\showcase\node_modules\#apollo\react-ssr\lib\react-ssr.cjs.js:38:16)
at runMicrotasks (<anonymous>)
at processTicksAndRejections (internal/process/task_queues.js:97:5)
TypeError: Cannot read property 'indexOf' of undefined
at addBasePath (F:\Projects\breadcrumps\showcase\dist\functions\next\server\static\development\pages\index.js:2966:15)
at F:\Projects\breadcrumps\showcase\dist\functions\next\server\static\development\pages\index.js:2464:40
at Link.formatUrls (F:\Projects\breadcrumps\showcase\dist\functions\next\server\static\development\pages\index.js:2388:18)
at Link.render (F:\Projects\breadcrumps\showcase\dist\functions\next\server\static\development\pages\index.js:2588:14)
at processChild (F:\Projects\breadcrumps\showcase\node_modules\react-dom\cjs\react-dom-server.node.development.js:3134:18)
at resolve (F:\Projects\breadcrumps\showcase\node_modules\react-dom\cjs\react-dom-server.node.development.js:2960:5)
at ReactDOMServerRenderer.render (F:\Projects\breadcrumps\showcase\node_modules\react-dom\cjs\react-dom-server.node.development.js:3435:22)
at ReactDOMServerRenderer.read (F:\Projects\breadcrumps\showcase\node_modules\react-dom\cjs\react-dom-server.node.development.js:3373:29)
at renderToString (F:\Projects\breadcrumps\showcase\node_modules\react-dom\cjs\react-dom-server.node.development.js:3988:27)
at render (F:\Projects\breadcrumps\showcase\node_modules\next\dist\next-server\server\render.js:83:16)
at renderPage (F:\Projects\breadcrumps\showcase\node_modules\next\dist\next-server\server\render.js:415:16)
at Object.ctx.renderPage (F:\Projects\breadcrumps\showcase\dist\functions\next\server\static\development\pages\_document.js:905:30)
at Function.getInitialProps (F:\Projects\breadcrumps\showcase\dist\functions\next\server\static\development\pages\_document.js:247:19)
at Function.getInitialProps (F:\Projects\breadcrumps\showcase\dist\functions\next\server\static\development\pages\_document.js:916:85)
at Object.loadGetInitialProps (F:\Projects\breadcrumps\showcase\node_modules\next\dist\next-server\lib\utils.js:59:29)
at Object.renderToHTML (F:\Projects\breadcrumps\showcase\node_modules\next\dist\next-server\server\render.js:419:36)
Error: "CustomDocument.getInitialProps()" should resolve to an object. But found "undefined" instead.
at Object.loadGetInitialProps (F:\Projects\breadcrumps\showcase\node_modules\next\dist\next-server\lib\utils.js:65:15)
at runMicrotasks (<anonymous>)
at processTicksAndRejections (internal/process/task_queues.js:97:5)
at async Object.renderToHTML (F:\Projects\breadcrumps\showcase\node_modules\next\dist\next-server\server\render.js:419:22)
at async DevServer.renderToHTMLWithComponents (F:\Projects\breadcrumps\showcase\node_modules\next\dist\next-server\server\next-server.js:654:26)
at async DevServer.renderToHTML (F:\Projects\breadcrumps\showcase\node_modules\next\dist\next-server\server\next-server.js:801:28)
at async DevServer.renderToHTML (F:\Projects\breadcrumps\showcase\node_modules\next\dist\server\next-dev-server.js:22:539)
at async DevServer.render (F:\Projects\breadcrumps\showcase\node_modules\next\dist\next-server\server\next-server.js:546:22)
at async Object.fn (F:\Projects\breadcrumps\showcase\node_modules\next\dist\next-server\server\next-server.js:396:17)
at async Router.execute (F:\Projects\breadcrumps\showcase\node_modules\next\dist\next-server\server\router.js:134:32)
at async DevServer.run (F:\Projects\breadcrumps\showcase\node_modules\next\dist\next-server\server\next-server.js:511:29)
at async DevServer.handleRequest (F:\Projects\breadcrumps\showcase\node_modules\next\dist\next-server\server\next-server.js:147:20)
Any hints to solve this annoying problem I will be grateful.
I found where is the problem, one of my websites link getting undefined value.
I am using 'next/link' component.
But it's not logical to get all these three exceptions for an undefined URL passed to that linked. I think NextJS development team should review more how they are logging an exception. And even if I passed undefined for that component, there should be a check for that, not the whole website should go down.
This may not apply to your install of Apollo, but I got the same error because I was using the react-router-dom syntax for Link:
<Link to="/home">
Changing it to the NextJs syntax fixed it for me:
<Link href="/home">
NextJs docs here:
https://nextjs.org/learn/basics/navigate-between-pages/link-component
For anyone else searching this error, I got a when passing Link as a prop to Material-UI ListItem that had been previously used to pass a react-router-dom Link in the component prop as so:
<ListItem
key={page.title}
activeClassName={classes.activeListItem}
className={classes.listItem}
to={page.href}
component={Link}
>
and can be changed to:
<Link href={page.href}>
<ListItem
key={page.title}
activeClassName={classes.activeListItem}
className={classes.listItem}
>
</Link>
Related
I am testing s remix.run app to see how it works.
I created a posts page inside routes directory
const Posts = () => {
return (
<main>
testing
</main>
);
};
I get this error on console:
TypeError: (0 , import_jsx_dev_runtime.jsxDEV) is not a function 2ms
at /home/Documents/remix/my-remix-app/app/entry.server.jsx:82:7
at new Promise (<anonymous>)
at handleBrowserRequest (/home/Documents/remix/my-remix-app/app/entry.server.jsx:78:10)
at handleRequest (/home/Documents/remix/my-remix-app/app/entry.server.jsx:23:7)
at handleDocumentRequestRR (/home/Documents/remix/my-remix-app/node_modules/#remix-run/server-runtime/dist/server.js:260:20)
at requestHandler (/home/Documents/remix/my-remix-app/node_modules/#remix-run/server-runtime/dist/server.js:49:18)
at /home/Documents/remix/my-remix-app/node_modules/#remix-run/express/dist/server.js:39:22
On browser I see
Unexpected Server Error
This is an active issue on the official remix repository. A few fixes suggested by users:
Adding remix build to dev script in package.json:
"dev": "remix build && run-p dev:*"
Forcefully bumping esbuild version to ^0.15.8.
Reverting #remix-run/dev to 1.6.8.
I am trying to create documentation with a storybook folder containing topics. But getting this error:
Uncaught Error: Unable to render story ... as the component annotation is missing from the default export
Migration.stories.mdx
import { Meta, Story} from '#storybook/addon-docs';
<Meta title="Documentation / Visual Update Migration" />
# Migrating
<Story name="Card" />
## Card
- Text
- Text
<Story name="Container" />
## Container
- Text
- Text
All these cause Story marks, but if I remove them, there won't be refs in the sidebar
Expected:
So, the path and side bar load correctly, but the content on click does not load giving the error.
Uncaught Error: Unable to render story documentation-visual-update-migration--card as the component annotation is missing from the default export ...
Uncaught Error: Unable to render story documentation-visual-update-migration--container as the component annotation is missing from the default export ...
Plus
2 The above error occurred in the <storyFn> component ...
And
POST http://localhost:6006/runtime-error 404 (Not Found)
POST http://localhost:6006/runtime-error 404 (Not Found)
The problem was in <Story ... />. Story wants something inside it.
Fix: <Story ...>{''}</Story>
This is the offending line of code:
<p>
{(isSameDay(event.start, event.end)) ? `On ${format(event.start, 'LLL do')}`: `From ${format(event.start, 'LLL do')} to ${format(event.end, 'LLL do')}`}
</p>
I also tried:
<p>
{(isSameDay(new Date(event.start), new Date(event.end))) ? `On ${format(new Date(event.start), 'LLL do')}`: `From ${format(new Date(event.start), 'LLL do')} to ${format(new Date(event.end), 'LLL do')}`}
</p>
and:
<p>
{(event.start === event.end) ? `On ${format(new Date(event.start), 'LLL do')}`: `From ${format(new Date(event.start), 'LLL do')} to ${format(new Date(event.end), 'LLL do')}`}
</p>
The last one comes back false when it should be true, so it doesn't even matter that it fails the build.
I also uninstalled and re-installed date-fns.
I'm able to use isBefore, isAfter, isToday on a different page, so I have no idea why this line in particular is messing me up. Is my logic wrong? What am I missing? I love date-fns and would prefer not to use a different library, and I definitely don't want to deal with dates with vanilla JavaScript, but if I can't figure this out that's probably what I'll end up doing.
Here is the output when I try to build:
info - Using webpack 5. Reason: Enabled by default https://nextjs.org/docs/messages/webpack5
info - Skipping validation of types
info - Creating an optimized production build
info - Compiled successfully
info - Collecting page data
[== ] info - Generating static pages (20/175)undefined start
undefined end
Error occurred prerendering page "/vendor/events/EventsCard". Read more: https://nextjs.org/docs/messages/prerender-error
TypeError: Cannot read property 'start' of undefined
at EventsCard (D:\boho\front\app\.next\server\chunks\9136.js:57:28)
at d (D:\boho\front\app\node_modules\react-dom\cjs\react-dom-server.node.production.min.js:33:498)
at bb (D:\boho\front\app\node_modules\react-dom\cjs\react-dom-server.node.production.min.js:36:16)
at a.b.render (D:\boho\front\app\node_modules\react-dom\cjs\react-dom-server.node.production.min.js:42:43)
at a.b.read (D:\boho\front\app\node_modules\react-dom\cjs\react-dom-server.node.production.min.js:41:83)
at Object.exports.renderToString (D:\boho\front\app\node_modules\react-dom\cjs\react-dom-server.node.production.min.js:52:138)
at renderPage (D:\boho\front\app\node_modules\next\dist\server\render.js:596:45)
at Object.ctx.renderPage (D:\boho\front\app\.next\server\pages\_document.js:53:30)
at Function.getInitialProps (D:\boho\front\app\.next\server\chunks\6859.js:603:19)
at Function.getInitialProps (D:\boho\front\app\.next\server\pages\_document.js:60:56)
info - Generating static pages (175/175)
> Build error occurred
Error: Export encountered errors on following paths:
/vendor/events/EventsCard
at D:\boho\front\app\node_modules\next\dist\export\index.js:487:19
at runMicrotasks (<anonymous>)
at processTicksAndRejections (internal/process/task_queues.js:95:5)
at async Span.traceAsyncFn (D:\boho\front\app\node_modules\next\dist\telemetry\trace\trace.js:60:20)
at async D:\boho\front\app\node_modules\next\dist\build\index.js:833:17
at async Span.traceAsyncFn (D:\boho\front\app\node_modules\next\dist\telemetry\trace\trace.js:60:20)
at async D:\boho\front\app\node_modules\next\dist\build\index.js:707:13
at async Span.traceAsyncFn (D:\boho\front\app\node_modules\next\dist\telemetry\trace\trace.js:60:20)
at async Object.build [as default] (D:\boho\front\app\node_modules\next\dist\build\index.js:77:25)
react_devtools_backend.js:2574 TypeError: Cannot read property 'length' of undefined
at ra (react-dom.production.min.js:156)
at ba (react-dom.production.min.js:167)
at Object.wa [as useEffect] (react-dom.production.min.js:167)
at Object.t.useEffect (react.production.min.js:22)
at hn (makeStyles.js:191)
at p (makeStyles.js:228)
at withStyles.js:55
at oa (react-dom.production.min.js:157)
at La (react-dom.production.min.js:176)
at Vs (react-dom.production.min.js:271)
How do I resolve this error? I hosted my react app on Heroku using react build pack and when I try to load some pages which make API calls it shows that error, but when I run it on my local machine it runs well.
Below is the snippet of my code which I don't think causes the error
{
!this.props.loading ? this.props.packs &&
this.props.packs?.length > 0 && this.props.packs?.map((pack) =>
{ return <Pack key={pack.id}
pack={pack} onPurchasePackage={this.onPurchasePackage}/> }) : null
}
I have found the issue with my code. The issue was with the way I placed my material ui hoc.
export default connect(mapStateToProps, mapDispatchToProps)(withStyles(useStyles)(withErrorHandler(Packages, axios)));
which was wrong to
export default connect(mapStateToProps, mapDispatchToProps)
(withStyles(styles, { withTheme: true })(withErrorHandler(Packages, axios)));
On a react project I'm getting :
DOMLazyTree.js:70 Uncaught (in promise) TypeError: Cannot read property 'replaceChild' of null
at Function.replaceChildWithTree (DOMLazyTree.js:70)
at Object.dangerouslyReplaceNodeWithMarkup (Danger.js:42)
at Object.dangerouslyReplaceNodeWithMarkup [as replaceNodeWithMarkup] (DOMChildrenOperations.js:122)
at ReactCompositeComponentWrapper._replaceNodeWithMarkup (ReactCompositeComponent.js:781)
at ReactCompositeComponentWrapper._updateRenderedComponent (ReactCompositeComponent.js:771)
at ReactCompositeComponentWrapper._performComponentUpdate (ReactCompositeComponent.js:721)
at ReactCompositeComponentWrapper.updateComponent (ReactCompositeComponent.js:642)
at ReactCompositeComponentWrapper.receiveComponent (ReactCompositeComponent.js:544)
at Object.receiveComponent (ReactReconciler.js:126)
at ReactCompositeComponentWrapper._updateRenderedComponent (ReactCompositeComponent.js:751)
When I try to load a page to which i added a datalist
Any clue where to start looking ?
If using redux-thunk, ensure that the error is not swallowed by a promise.
We had a similar problem where calling dispatch synchronously called our reducers, and React synchronously rerendered. In our render, an error was raise when passing children to an <input /> which bubbled up in our thunk.
In other words, the real error message was displayed with the actions in the console.