React: Cross-origin error passed to componentDidCatch incorrectly

[bvaughn]

tl;dr React is passing "A cross-origin error was thrown" to componentDidCatch when there are no cross-origin scripts.

See this discussion thread and this repro case.

I was able to confirm the behavior. A quick look at onError showed a null event.error.

[bvaughn]

cc @acdlite, @gaearon, @leidegre

[gaearon]

Could be something funky caused by e.g. eval?

[bvaughn]

Not sure I understand. Are you asking if the user-code is maybe using eval?

The repro is just accessing a prop on a null value.

[bvaughn]

Looks like the repro case (starting with the tessin_mini repo) can be reduced to:

import React, { Component } from "react";

export default class App extends Component {
  state = {
    doError: false,
  };

  render() {
    return (
      <ErrorBoundary>
        {this.state.doError
          ? <ComponentThatFails/>
          : <button onClick={() => this.setState({doError: true})}>Click me</button>}
      </ErrorBoundary>
    )
  }
}

class ErrorBoundary extends Component {
  state = {
    error: null
  };

  componentDidCatch(error) {
    this.setState({error})
  }

  render() {
    if (this.state.error) {
      return this.state.error.message;
    }
    return this.props.children
  }
}

class ComponentThatFails extends Component {
  render() {
    const data = null;
    return <p>{data.foo}</p>;
  }
}

The console will log:

Uncaught TypeError: Cannot read property 'foo' of null

But the error we pass to componentDidCatch will be:

A cross-origin error was thrown...

[bvaughn]

I think this has something to do with the bundling code in the tessin_mini repo. The same code in a CRA-created app works as expected.

Maybe it has to do with the SSR logic?

[bvaughn]

Creating a small, standalone project with no SSR/Webpack/etc, I am able to reproduce the unexpected behavior _only_ for Chrome when loading content via file://....

Here's what I'm seeing:

| Browser | _standalone file:// | _standalone http:// | _{tessin_mini} dev | _{tessin_mini} prod
:---|:---:|:---:|:---:|:---:
Chrome | ✖ ¹ | ✓ | ✖ | ✓ ²
Firefox | ✓ | ✓ | ✓ | ✓
Safari | ✓ | ✓ | ✓| ✓

^1: I believe Chrome considers files loaded with file:// to always be a different domain. If I launch Chrome with the --allow-file-access-from-files flag, the standalone file works with when loaded via the file:// protocol as well.

^2: Also worth adding that the tessin_mini example works as expected in production mode (b'c we use a regular try/catch). The unexpected cross-origin error only affects dev-mode.

[gaearon]

By eval I meant the Webpack devtool: "eval" setting which is commonly used and turns every module into eval call so that it's shown separately in DevTools despite no sourcemaps. But seems like we determined that isn't the issue.

[bvaughn]

😭 Thanks for clarifying!

You're absolutely right. That _was_ the cause. Removing that property from the Webpack config clears the issue up in the tessin_mini project.

[gaearon]

We can probably encourage people to stop using it and use cheap-module-source-map instead. It's just as fast (afaik) and doesn't have some issues.

[bvaughn]

It's interesting that I use the devtool: "eval" setting in react-virtualized's Webpack config also but it doesn't show this error.

I'm not super familiar with Webpack. 😄

Edit This was working for the RV project b'c of redbox-react + react-transform-catch-errors.

[bvaughn]

For what it's worth, I ran through the all of the devtools settings and here's what I found:

devtool | works?
---|---
_default_ | ✖
eval | ✖
cheap-eval-source-map | ✖
cheap-source-map | ✓
cheap-module-eval-source-map | ✖
cheap-module-source-map | ✓
eval-source-map | ✖
source-map | ✓
inline-source-map | ✓
hidden-source-map | ✓
nosources-source-map | ✓

It looks like the _default_ setting (and any of the *eval ones) will cause problems.

[bvaughn]

I'll put up a PR that adds addition verbiage to the cross-origin (dev-mode) error to mention this.

[bvaughn]

FYI @leidegre the solution for this issue is to replace:

devtool: "eval"

with:

devtool: "cheap-module-source-map"

in your Webpack config.

[bvaughn]

The team chatted out of band about this briefly and the agreed-upon solution is to change the wording of the error message passed to componentDidCatch to be:

A cross-origin error was thrown so React doesn't have access to the actual error object in development. See https://fb.me/react-crossorigin-error for more details.

At the specified URL we'll have a blurb that explains the technique we're using in dev-mode and mentions both the <script> tag crossorigin attribute for CDNs and the Webpack devtools setting.

[leidegre]

@bvaughn @gaearon So I'm just super happy that we could root cause this, thanks for the hard work! Enjoy your weekend!

[bvaughn]

You're welcome @leidegre!

Just to close the loop here, we've added a new docs page with information about this and other cross-origin error causes:

https://fb.me/react-crossorigin-error

[leidegre]

LGTM!

[jjjjw]

@bvaughn

Sure, here is a simple demo project: https://github.com/jjjjw/crossorigin-webpack-demo

Worth noting that the case is when webpack dev server is used on a different port/domain than the web server.

Additionally, here is a first go at a doc addition: https://github.com/reactjs/reactjs.org/pull/187

[amertak]

I am experiencing the same issue. Webpack is running on different domain than the whole application. It is being wired together using the nginx.
The only way to see the error for me is to start chrome with --disable-web-security flag
I actually have no idea if its even possible to fix it.

[thomasdavis]

I'm also having no luck, using crossorigin attr, CORS enabled and using cheap-module-source-maps

[bvaughn]

Can you share a repro, @thomasdavis?

[jquense]

FYI I don't think i reopening this intentionally 😳

[bvaughn]

No worries. If people are still seeing it, it's probably okay to re-open it. 😄

[jozefpetro]

Same problem here, tried both crossOriginLoading: 'anonymous' and devtool set to 'cheap-module-eval-source-map'

[nick]

I had to do these 3 things together (using webpack-dev-server running on port 8080):

Add this to webpack config:

devServer: {
    headers: {
        'Access-Control-Allow-Origin': '*'
    }
}

use cheap-module-source-map (cheap-module-eval-source-map did not work)

Add crossorigin to my script tag:

<script crossorigin src="http://localhost:8080/public/bundle.js"></script>

[loconluis]

I am using cheap-module-source-map, but the error is thrown twice. Does anyone know what it could be?

[bvaughn]

I am using cheap-module-source-map, but the error is thrown twice. Does anyone know what it could be?

What makes you say the error is thrown twice?

Are you referring to what Dan describes in facebook/react/issues/10384, by chance?

[herodrigues]

Same happening here using cheap-module-source-map, using webpack and an ErrorBoundary component.
It only happens when I don't set NODE_ENV to production, which does not make any sense since I want to run in development mode.

[bvaughn]

It only happens when I don't set NODE_ENV to production, which does not make any sense since I want to run in development mode.

Are you also referring to what Dan describes in facebook/react#10384, by chance?

[herodrigues]

@bvaughn yeah, I've read the whole discussion in your previous comment and the answer is 'kind of'.

So, basically I shouldn't set NODE_ENV to development in my React app, because component errors should be thrown only production, right?

[bvaughn]

So, basically I shouldn't set NODE_ENV to development in my React app

You shouldn't set NODE_ENV to "development" for your production app because this will result in your app getting the slower, development build of react. The development build of React includes many helpful warnings. While useful in development, they make React larger and slower so you don't want to use them in production.

because component errors should be thrown only production, right?

Errors can occur in development or production modes. The duplicate console logging only happens in development mode though, for reasons Dan mentioned in the issue I linked to.

[herodrigues]

Thanks @bvaughn, but my case is a bit more complex.

I didn't set NODE_ENV to "development" in my app either in production or development mode. I'm just trying to see those helpful warnings during development.
However, my app only works if I set NODE_ENV to 'production' even when I want to use development mode (as stated in here)

[bvaughn]

However, my app only works if I set NODE_ENV to 'production' even when I want to use development mode (as stated in here)

If I'm understanding this correctly, I don't know why this would be. Maybe related to another dependency your project has? Either way, sounds like a separate issue from the component stack stuff 😄 Maybe file it separately, with more details?

[herodrigues]

@bvaughn that's what I'm looking for. My app is inside a Chrome extension, which is an odd environment for React.

If it's something related to React and Chrome extensions and not an specific issue with my project, I'll create a separate issue with maybe a tutorial on how to solve it.

Thanks!

[bvaughn]

My app is inside a Chrome extension, which is an odd environment for React.

Sounds similar to react-devtools 😄

[herodrigues]

@bvaughn, my project is buggy. Sorry for flooding this thread.
To whom it may concern, here's a minimal setup of a Chrome extension using React, Redux, react-devtools and error boundaries.

Source: https://github.com/herodrigues/chrome-react-minimal

[DominikSerafin]

Same issue here with Windows 10, Chrome 62, Webpack 3 & React 16.0-16.1.

Webpack+React always throws Error: A cross-origin error was thrown. React doesn't have access to the actual error object in development..

---

Tried devtool: 'cheap-module-source-map' (and others without eval)

---

Tried

devServer: {
    headers: {
      "Access-Control-Allow-Origin": "*",
      "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, PATCH, OPTIONS",
      "Access-Control-Allow-Headers": "X-Requested-With, content-type, Authorization"
    },
}

---

Tried

output: {
  crossOriginLoading: 'anonymous',
}

---

Tried crossorigin script tag

---

Nothing works

[StalkAlex]

Experiencing same problem in Chrome, nothing works as @DominikSerafin mentioned, but there is no such error in Firefox.

[edongashi]

Getting same behavior as two previous comments in chrome.

[the-spyke]

Updated dependencies today and started to get this issue in tests. Not sure what is just as fast, but in my project eval is 2-3 times faster in rebuilds by webpack-dev-server watch.

[DominikSerafin]

Same thing for me as for @the-spyke, eval is much faster than other alternatives in my project(s).

React should work correctly with it, and not suggest workarounds (which do not even work).

Hoping it will get fixed...

[sapegin]

I’ve noticed that I have this issue when Chrome DevTools are open, crossOriginLoading and devtool = cheap-module-source-map doesn’t change anything. Works fine in Firefox with open developer tools.

[AndrewMorsillo]

I'm still getting this as well no matter my webpack settings.

[IanVS]

@herodrigues were you able to get valid errors in your chrome extension in dev? I have a chrome extension as well and am seeing the same cross-origin errors.

[BrendonSled]

Try checking your package.json, remove the -d flag.

That's what finally worked for me.

[DominikSerafin]

@BrendonSled

Do you mean the npm loglevel flag? https://docs.npmjs.com/misc/config#shorthands-and-other-cli-niceties

If yes, then it isn't a fix, but just merely "silencing" the problem, so I wouldn't recommend doing this because you might silence other useful errors this way.

[herodrigues]

@IanVS there was something wrong in my project. I developed a "clean" extension using React and everything is ok.

See my comment https://github.com/facebook/react/issues/10441#issuecomment-343282447

[BrendonSled]

@DominikSerafin no I mean for webpack cli, https://webpack.js.org/api/cli/#shortcuts

[dehghani-mehdi]

Following solution works for me:

webpack.config.js

devServer: {
    headers: {
        'Access-Control-Allow-Origin': '*'
    }
}

package.json

"start": "webpack-dev-server --devtool source-map --history-api-fallback --hot"

And crossorigin on script tag.

[igorushko]

Please, make an option for disable this behavior. I want to use eval (performance, compatibility). And if switch to a cheap-module-source-map, I just get a duplicate error in the console.

[Omelettesheep]

When i use DllReferencePlugin , the problem will happen. And have tried the ways above, none of them works......

[programmerwy]

For what it's worth, I ran through the all of the devtools settings and here's what I found:

devtool works?
_default_ ✖
eval ✖
cheap-eval-source-map ✖
cheap-source-map ✓
cheap-module-eval-source-map ✖
cheap-module-source-map ✓
eval-source-map ✖
source-map ✓
inline-source-map ✓
hidden-source-map ✓
nosources-source-map ✓
It looks like the _default_ setting (and any of the *eval ones) will cause problems.

i try the table above ，bug i get the inverse result 🤣, im confused..

[fgblomqvist]

Want to highlight, similarly to @programmerwy, that it started working for me, even with the source map set to eval-source-map, once I added crossorigin to the script tag that loads the webpack bundle (couldn't get it to work no matter what without that attribute on the script tag).

Using Chrome 80.0.3987.100 (Linux) and React 16.12.