Closed michaelwitk closed 5 years ago
This doesn't appear to be Next.js's fault, and I was able to fix this by changing the below
yarn add next@next
components/Runkit/Runkit.js
to below contents
import Runkit from 'react-runkit'
export default props => { return
3. Add a `pages/_document.js`
```jsx
import Document, { Html, Head, Main, NextScript } from 'next/document'
class MyDocument extends Document {
static async getInitialProps(ctx) {
const initialProps = await Document.getInitialProps(ctx)
return { ...initialProps }
}
render() {
return (
<Html>
<Head>
<script src="https://embed.runkit.com"/>
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
)
}
}
export default MyDocument
The issue appears to be the dynamic component was trying to load RunKit
from the window before it was loaded
This didn't close the issue for me. Please consider reopening.
@patientplatypus Could you provide additional information a reproduction maybe? From investigating the original issue this doesn't appear to be caused by Next.js.
Well...If you take a look at the linked issue thread (https://spectrum.chat/next-js/general/upgrade-guide-from-next-6-x-to-next-7~3e83c1c4-419d-4497-b9e2-9a927cd3562b?m=MTUzNzQ2MDgxOTg1OQ==) it would appear that many different people with a variety of different programs are running into this issue and it has a lot of "me toos". So I am a little skeptical.
I am currently running a simple socket application that returns a ticker. It would seem, at first blush, that this is an issue with CORS between my client and socket server, however, my socket server doesn't have React. Here is the code:
https://gist.github.com/patientplatypus/51076665bb5014d316eed5acf4aa5d3a
Additionally, I make sure to log out when I get a return from the socket. In my console I get the below. Notice that the first line is after setState and value of feedArr...
- this is the return from my socket setting the value to state. So it would appear that there is a cors error after the socket has done its work which would suggest there is an issue with next.js.
Thanks.
after setState and value of feedArr : ["//hello there sailor yohoho and a bottle of rum"]
index.js:2429 Fetch API cannot load webpack://%5Bname%5D_%5Bchunkhash%5D/./node_modules/react-dom/cjs/react-dom.development.js?. URL scheme must be "http" or "https" for CORS request.
_callee$ @ index.js:2429
tryCatch @ index.js:2616
invoke @ index.js:2850
prototype.(anonymous function) @ index.js:2668
step @ index.js:2493
(anonymous) @ index.js:2493
(anonymous) @ index.js:2493
(anonymous) @ index.js:2452
_callee2$ @ index.js:2421
tryCatch @ index.js:2616
invoke @ index.js:2850
prototype.(anonymous function) @ index.js:2668
step @ index.js:2493
(anonymous) @ index.js:2493
(anonymous) @ index.js:2493
map @ index.js:2489
getStackFrames @ index.js:2270
crashWithFrames @ index.js:1927
(anonymous) @ index.js:1942
errorHandler @ index.js:1992
invokeGuardedCallbackDev @ react-dom.development.js:199
invokeGuardedCallback @ react-dom.development.js:256
replayUnitOfWork @ react-dom.development.js:18532
renderRoot @ react-dom.development.js:19422
performWorkOnRoot @ react-dom.development.js:20296
performWork @ react-dom.development.js:20208
performSyncWork @ react-dom.development.js:20182
requestWork @ react-dom.development.js:20051
scheduleWork @ react-dom.development.js:19865
enqueueSetState @ react-dom.development.js:11144
Component.setState @ react.development.js:335
Ticker._this.onNext @ index.es.js:547
TickerElement._this.triggerNext @ index.es.js:379
step @ index.es.js:407
error (async)
registerUnhandledError @ index.js:2005
listenToRuntimeErrors @ index.js:1941
startReportingRuntimeErrors @ index.js:1786
connect @ hot-dev-client.js:97
push../node_modules/next/dist/client/webpack-hot-middleware-client.js.exports.default @ webpack-hot-middleware-client.js:26
./node_modules/next/dist/client/next-dev.js @ next-dev.js:38
__webpack_require__ @ bootstrap:788
fn @ bootstrap:149
0 @ module.js:22
__webpack_require__ @ bootstrap:788
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.js?ts=1552843008908:1
index.js:2429 Fetch API cannot load webpack://%5Bname%5D_%5Bchunkhash%5D/./node_modules/react/cjs/react.development.js?. URL scheme must be "http" or "https" for CORS request.
_callee$ @ index.js:2429
tryCatch @ index.js:2616
invoke @ index.js:2850
prototype.(anonymous function) @ index.js:2668
step @ index.js:2493
(anonymous) @ index.js:2493
(anonymous) @ index.js:2493
(anonymous) @ index.js:2452
_callee2$ @ index.js:2421
tryCatch @ index.js:2616
invoke @ index.js:2850
prototype.(anonymous function) @ index.js:2668
step @ index.js:2493
(anonymous) @ index.js:2493
(anonymous) @ index.js:2493
map @ index.js:2489
getStackFrames @ index.js:2270
crashWithFrames @ index.js:1927
(anonymous) @ index.js:1942
errorHandler @ index.js:1992
invokeGuardedCallbackDev @ react-dom.development.js:199
invokeGuardedCallback @ react-dom.development.js:256
replayUnitOfWork @ react-dom.development.js:18532
renderRoot @ react-dom.development.js:19422
performWorkOnRoot @ react-dom.development.js:20296
performWork @ react-dom.development.js:20208
performSyncWork @ react-dom.development.js:20182
requestWork @ react-dom.development.js:20051
scheduleWork @ react-dom.development.js:19865
enqueueSetState @ react-dom.development.js:11144
Component.setState @ react.development.js:335
Ticker._this.onNext @ index.es.js:547
TickerElement._this.triggerNext @ index.es.js:379
step @ index.es.js:407
error (async)
registerUnhandledError @ index.js:2005
listenToRuntimeErrors @ index.js:1941
startReportingRuntimeErrors @ index.js:1786
connect @ hot-dev-client.js:97
push../node_modules/next/dist/client/webpack-hot-middleware-client.js.exports.default @ webpack-hot-middleware-client.js:26
./node_modules/next/dist/client/next-dev.js @ next-dev.js:38
__webpack_require__ @ bootstrap:788
fn @ bootstrap:149
0 @ module.js:22
__webpack_require__ @ bootstrap:788
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.js?ts=1552843008908:1
index.es.js:32 Uncaught TypeError: Cannot read property 'height' of null
at index.es.js:32
at Array.forEach (<anonymous>)
at getHighest (index.es.js:31)
at Ticker.<anonymous> (index.es.js:525)
at getStateFromUpdate (react-dom.development.js:16231)
at processUpdateQueue (react-dom.development.js:16292)
at updateClassInstance (react-dom.development.js:11615)
at updateClassComponent (react-dom.development.js:14648)
at beginWork (react-dom.development.js:15598)
at performUnitOfWork (react-dom.development.js:19266)
at workLoop (react-dom.development.js:19306)
at HTMLUnknownElement.callCallback (react-dom.development.js:149)
at Object.invokeGuardedCallbackDev (react-dom.development.js:199)
at invokeGuardedCallback (react-dom.development.js:256)
at replayUnitOfWork (react-dom.development.js:18532)
at renderRoot (react-dom.development.js:19422)
at performWorkOnRoot (react-dom.development.js:20296)
at performWork (react-dom.development.js:20208)
at performSyncWork (react-dom.development.js:20182)
at requestWork (react-dom.development.js:20051)
at scheduleWork (react-dom.development.js:19865)
at Object.enqueueSetState (react-dom.development.js:11144)
at Ticker.Component.setState (react.development.js:335)
at Object.Ticker._this.onNext (index.es.js:547)
at TickerElement._this.triggerNext (index.es.js:379)
at step (index.es.js:407)
(anonymous) @ index.es.js:32
getHighest @ index.es.js:31
(anonymous) @ index.es.js:525
getStateFromUpdate @ react-dom.development.js:16231
processUpdateQueue @ react-dom.development.js:16292
updateClassInstance @ react-dom.development.js:11615
updateClassComponent @ react-dom.development.js:14648
beginWork @ react-dom.development.js:15598
performUnitOfWork @ react-dom.development.js:19266
workLoop @ react-dom.development.js:19306
callCallback @ react-dom.development.js:149
invokeGuardedCallbackDev @ react-dom.development.js:199
invokeGuardedCallback @ react-dom.development.js:256
replayUnitOfWork @ react-dom.development.js:18532
renderRoot @ react-dom.development.js:19422
performWorkOnRoot @ react-dom.development.js:20296
performWork @ react-dom.development.js:20208
performSyncWork @ react-dom.development.js:20182
requestWork @ react-dom.development.js:20051
scheduleWork @ react-dom.development.js:19865
enqueueSetState @ react-dom.development.js:11144
Component.setState @ react.development.js:335
Ticker._this.onNext @ index.es.js:547
TickerElement._this.triggerNext @ index.es.js:379
step @ index.es.js:407
requestAnimationFrame (async)
step @ index.es.js:415
requestAnimationFrame (async)
step @ index.es.js:415
requestAnimationFrame (async)
step @ index.es.js:415
requestAnimationFrame (async)
step @ index.es.js:415
requestAnimationFrame (async)
step @ index.es.js:415
requestAnimationFrame (async)
step @ index.es.js:415
requestAnimationFrame (async)
step @ index.es.js:415
requestAnimationFrame (async)
step @ index.es.js:415
requestAnimationFrame (async)
step @ index.es.js:415
requestAnimationFrame (async)
step @ index.es.js:415
requestAnimationFrame (async)
step @ index.es.js:415
requestAnimationFrame (async)
step @ index.es.js:415
requestAnimationFrame (async)
step @ index.es.js:415
requestAnimationFrame (async)
step @ index.es.js:415
requestAnimationFrame (async)
step @ index.es.js:415
requestAnimationFrame (async)
step @ index.es.js:415
requestAnimationFrame (async)
step @ index.es.js:415
requestAnimationFrame (async)
step @ index.es.js:415
requestAnimationFrame (async)
step @ index.es.js:415
requestAnimationFrame (async)
step @ index.es.js:415
requestAnimationFrame (async)
step @ index.es.js:415
requestAnimationFrame (async)
step @ index.es.js:415
requestAnimationFrame (async)
step @ index.es.js:415
requestAnimationFrame (async)
step @ index.es.js:415
requestAnimationFrame (async)
step @ index.es.js:415
requestAnimationFrame (async)
step @ index.es.js:415
requestAnimationFrame (async)
step @ index.es.js:415
requestAnimationFrame (async)
step @ index.es.js:415
requestAnimationFrame (async)
step @ index.es.js:415
requestAnimationFrame (async)
step @ index.es.js:415
requestAnimationFrame (async)
step @ index.es.js:415
requestAnimationFrame (async)
step @ index.es.js:415
index.js:2178 The above error occurred in the <Ticker> component:
in Ticker (created by NavMenu)
in div (created by NavMenu)
in NavMenu (created by Home)
in div (created by Home)
in Home (created by App)
in Container (created by App)
in App
React will try to recreate this component tree from scratch using the error boundary you provided, App.
@patientplatypus looking at the error you added it seems to be something to do with react-ticker
if you remove that I have a feeling the issue goes away similar to how react-runkit
had an error and that error was shown.
This isn't actually a CORS problem.. that shows because somewhere a fetch is being made with a protocol of webpack://
which is not a valid protocol for fetch.
I can't reproduce the error from the snippet you added, if you could upload the code to a repo I could take a look.
Sounds like a bug in react-error-overlay 🕵️
Hmm....well I got it to work, but in a weird way that I think gets around this bug, but reinforces my belief that it may have something to do with next.js. Now, rather than append to an array in my setState I simply set the state to a concatenated string (see here: https://gist.github.com/patientplatypus/1857c5e30d89d2f399591acb9d56a574). My problem is definitely solved, ijjk and I appreciate the offer for support. I would suggest making a note that maybe it has something to do with setState? And also there are of course still other people with issues.
Thanks again for the suggestions guys.
I am also seeing this issue. It seems to have started appearing after upgrading from next@7 to latest.
Instead of saying "I'm also seeing this issue" try providing a reproduction so that we can investigate the issue, otherwise use the 👍 feature in GitHub on the initial thread, otherwise everyone in the thread gets a notification that is not actionable. Thanks 🙏
I encountered the bug while integrating react-datepicker
and formik
.
Here is a repo for the minimal reproducible case.
To reproduce the error, start the dev server and choose a day on the datepicker.
Here is the meat of the repo:
//next.config.js
const withCSS = require('@zeit/next-css');
module.exports = withCSS();
package.json
{
"dependencies": {
"@zeit/next-css": "^1.0.1",
"formik": "^1.5.1",
"next": "^8.0.3",
"react": "^16.8.4",
"react-datepicker": "^2.2.0",
"react-dom": "^16.8.4"
},
"scripts": {
"dev": "next",
"build": "next build",
"start": "next start"
}
}
and
// ./pages/index.js
import React from 'react'
import {Formik, Form, Field} from 'formik';
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
export const DateField = ( {field} ) => (
<DatePicker
selected={field.value}
onChange={field.onChange}
id={field.name}
/>
);
class IndexPage extends React.Component {
render() {
return (
<Formik
initialValues={{scheduleTime: null}}
onSubmit={(values) => {
console.log(values);
}}
>
{() => {
return (
<Form>
<Field name="scheduleTime" component={DateField}/>
<button type='submit'>Submit Form</button>
</Form>
)
}}
</Formik>
)
}
}
export default IndexPage
Sounds like a bug in react-error-overlay 🕵️
I can confirm that react-error-overlay causes this (atleast with my project), I've attempted to read a field from undefined
in getInitialProps and instead of getting a useful error message the whole thing crashed with Fetch API cannot load webpack://%5Bname%5D_%5Bchunkhash%5D ....
.
Hope this helps
I'm also getting the Fetch API cannot load webpack://%5Bname%5D_%5Bchunkhash%5D/
. Seems related to client-side rendering of react-ace
in my project, but I can't sort out how to stop it from crashing at this error. Module works fine outside of Next.
To update my earlier comment, I did away with react-ace
and am rendering brace directly with no issues (using the ssr: false
flag). Just in case anyone else runs across this issue!
@kate-hall It'd be ideal if you could provide a full reproduction so that we can use it to track down the issue / add tests for it 👍
@timneutkens in case you missed it, I provided another reproduction of this issue.
I'm sure mine is also related to anreact-error-overlay
but I don't know what error I have because this webpack error is swallowing it.
@ckeeney yeah I saw it 👍 JJ will have a look when possible, he's currently focusing on something else.
I am getting this issue while trying to work with the with-sentry example in my app as soon as I try to generate an error.
Since the comments here suggested react-error-overlay
could be an issue, I tried to run my code in production mode and it worked fine. Please let me know if I need to provide some other details.
My occurrence of this issue was because react-dates
calls onChange with the value but the formik
's onChange
handler was expecting it to be called with an event.
Using formik
's HOC to customize the onChange
behavior solved my issue and illustrates another example of react-error-overlay
causing this issue.
@timneutkens This also happens in the with-sentry example!
After clicking on the render errors this triggers on the console.
Hello, I am still having this problem. I have a basic next.js App. I tried to integrate a React Data Grid, like this one. https://devexpress.github.io/devextreme-reactive/react/grid/docs/guides/getting-started/ It worked fine, until i tried to integrate Toolbar Component that is used in this example
https://devexpress.github.io/devextreme-reactive/react/grid/demos/featured/tree-data/
I upgraded everything already and could not find an answer anywhere else:-( Help is highly appreciated.
Thanks
Im having this issue as well
Blog.getInitialProps = async function() {
const res = await fetch('...');
const data = await res.json();
return {
data: data
}
}
But if I added a new object like so below, its working
Blog.getInitialProps = async function() {
const res = await fetch('...');
const data = await res.json();
return {
data: data,
somedata: []
}
}
Sorry to re-wake this thread but has this actually been resolved? I'm still coming up against this issue, which doesn't seem to be resolved. However it seems to be an issue that comes up and is closed, but I don't feel that I understand what I am supposed to do about it — or even if I need to worry about it, since my app seems to be running fine.
https://github.com/vercel/next.js/discussions/14219, https://github.com/vercel/next.js/issues/10086, https://github.com/vercel/next.js/issues/9680, https://github.com/vercel/next.js/issues/6374
This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.
Bug report
Describe the bug
Cannot fetch
<script src="..."/>
on client successfully, encountering CORS webpack issueTo Reproduce
Repo: https://github.com/notJackson/nextjs-webpack-cors-issue
Expected behavior
Run script on client
Screenshots
If applicable, add screenshots to help explain your problem.
System information
Additional context
Related discussion on spectrum: https://spectrum.chat/next-js/general/upgrade-guide-from-next-6-x-to-next-7~3e83c1c4-419d-4497-b9e2-9a927cd3562b?m=MTUzNzQ2MDgxOTg1OQ==
Not relying on this to work, but figured since I already had a minimal repro repo I might as well publish this so one can eventually look into this.