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.

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

[prgrmrwy]

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.

[WolvenSpirit]

This error is still thrown in React 17.0.2 on Google Chrome (version 92.0.4515.107 64-bit) when calling JSON.parse() twice on a state property, I fail to see how is it related with the actual error.

[wenfangdu]

After getting stuck on this for several days, we tried all kinds of solutions but to no avail. In the end, we found out that 127.0.0.1 and localhost are cross-origin, e.g. serving the app via 127.0.0.1 but visiting it via localhost will trigger this issue, hope that helps.

[xiongwei9]

After getting stuck on this for several days, we tried all kinds of solutions but to no avail. In the end, we found out that 127.0.0.1 and localhost are cross-origin, e.g. serving the app via 127.0.0.1 but visiting it via localhost will trigger this issue, hope that helps.

Yes, I have the same issue. I visit my devServer xxx.com with http-proxy, but js script is in localhost:3000

fix output of webpack config:

output: {
  publicPath: '/'
}