search

vercel / next.js

The React Framework
https://nextjs.org
MIT License
126.39k stars 26.9k forks source link

Fetch API cannot load webpack://%5Bname%5D_%5Bchunkhash%5D/ CORS #6374

Closed michaelwitk closed 5 years ago

michaelwitk commented 5 years ago

Bug report

Describe the bug

Cannot fetch <script src="..."/> on client successfully, encountering CORS webpack issue

VM704:1 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.

To 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.

ijjk commented 5 years ago

This doesn't appear to be Next.js's fault, and I was able to fix this by changing the below

  1. Upgrade to latest Next.js version yarn add next@next
  2. Change components/Runkit/Runkit.js to below contents 
    
import Runkit from 'react-runkit'

export default props => { return

<Runkit {...props} />
};

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

patientplatypus commented 5 years ago

This didn't close the issue for me. Please consider reopening.

ijjk commented 5 years ago

@patientplatypus Could you provide additional information a reproduction maybe? From investigating the original issue this doesn't appear to be caused by Next.js.

patientplatypus commented 5 years ago

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.
ijjk commented 5 years ago

@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.

timneutkens commented 5 years ago

Sounds like a bug in react-error-overlay 🕵️

patientplatypus commented 5 years ago

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.

jaycenhorton commented 5 years ago

I am also seeing this issue. It seems to have started appearing after upgrading from next@7 to latest.

timneutkens commented 5 years ago

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 🙏

ckeeney commented 5 years ago

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
raphi011 commented 5 years ago

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

kate-hall commented 5 years ago

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.

kate-hall commented 5 years ago

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!

timneutkens commented 5 years ago

@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 👍

ckeeney commented 5 years ago

@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.

timneutkens commented 5 years ago

@ckeeney yeah I saw it 👍 JJ will have a look when possible, he's currently focusing on something else.

subodhpareek18 commented 5 years ago

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.

ckeeney commented 5 years ago

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.

Related: https://github.com/jaredpalmer/formik/issues/1243

conanbatt commented 5 years ago

@timneutkens This also happens in the with-sentry example!

After clicking on the render errors this triggers on the console.

image

MrMoehner commented 5 years ago

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

reginpv commented 5 years ago

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: []
    }
}
thiagodebastos commented 4 years ago

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

balazsorban44 commented 2 years ago

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.