Fetch API cannot load webpack://%5Bname%5D_%5Bchunkhash%5D/ CORS #6374
Comments
|
This doesn't appear to be Next.js's fault, and I was able to fix this by changing the below
import Runkit from 'react-runkit'
export default props => {
return <div>
<Runkit {...props} />
</div>
};
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 MyDocumentThe issue appears to be the dynamic component was trying to load |
|
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 Thanks. |
|
@patientplatypus looking at the error you added it seems to be something to do with This isn't actually a CORS problem.. that shows because somewhere a fetch is being made with a protocol of 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 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 |
I can confirm that react-error-overlay causes this (atleast with my project), I've attempted to read a field from Hope this helps |
|
I'm also getting the |
|
To update my earlier comment, I did away with |
|
@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 an |
|
@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 |
|
My occurrence of this issue was because Using Related: jaredpalmer/formik#1243 |
|
@timneutkens This also happens in the with-sentry example! After clicking on the render errors this triggers on the console.
|
|
Hello, https://devexpress.github.io/devextreme-reactive/react/grid/demos/featured/tree-data/ I upgraded everything already and could not find an answer anywhere else:-( Thanks |
|
Im having this issue as well But if I added a new object like so below, its working |
|
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. |
|
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.
The text was updated successfully, but these errors were encountered: