I'm trying to add a redirect on my site for anyone using IE 11. I'm using ES6 and some packages that just don't play well with IE.
I think it's related to some package updates, but previous code I had to load a simple message saying to use another browser was functioning.
I now get an error saying there is a syntax error in bundle.js, and the screen is blank. What surprises me is that it's loading the bundle at all. When I debug, I can see its injecting <script defer src="/static/js/bundle.js" And I think it's the page trying to load this first and erroring out that is causing my issue.
Is there any way to stop this injection? Anyone experienced with React and IE 11 that thinks this might be a red herring and I'm going in the wrong direction to fix this?
Any thoughts are appreciated.
I tried removing almost all my code out of index.html and would have expected that the page would ReactDOM.render a really simple message. It does not. It seems to error out before it really renders anything at all.
Related
React-hook-form and polyfill.io causing page to crash Z.current.unMount is not iterable.
To re-create:
On IE11 you can go to polyfill.io and download the minified code. Or simply paste this into IE11 https://polyfill.io/v3/polyfill.min.js and you will get the required code. Create a React project and create a basic form using React-form-hook. Next import the polyfill and this will result in the page crashing: Z.current.unMount is not iterable. As soon as you remove the polyfill the form works as expected.
Background:
These polyfill's/ponyfill's are needed as still supporting IE11... yeah... we use polyfill.io to get the required polyfills. We load this polyfill on every page. Wondering if anyone else has come across this issue usig polyfills and react-hook-form and has a good work around?
This issue seems to have come from version 6.8.4 of React-hook-form and above.
Without polyfill
With polyfill - This error is inside of the React-form-hook library
We ran into this problem too, and discovered like you that polyfill was the issue. I'm not sure if our issue is exactly the same, because we've only just seen this issue show up, while you reported this issue 4 months ago. That leads me to think our issues are not the same, but posting just in case.
What seems to be happening for us is that when you use the polyfill service but don't specify a version, sometimes the js file you get back contains js content, and sometimes doesn't (try the url in your browser with a hard refresh). In our case, I'm assuming that the case where it does not return a js bundle is the desired behaviour because the browser doesn't need any polyfilling.
Specifying a version for the file seems to fix the issue for us. Doesn't seem to matter what version, just specifying a version itself seems to ensure that it returns the correct bundle content every time. E.g.:
https://polyfill.io/v3/polyfill.min.js?version=3.110.1
Have posted a bug report here: https://github.com/Financial-Times/polyfill-service/issues/2699
I'm getting the following Content Security Policy error in chrome when running my React app. I tried googling this for a long time, but I couldn't find enough information about how to fix this when using create-react-app. I would appreciate any help very much.
After a bit search about your issue, I ended up here in MDN. I will shortly define what the problem is but for more information I strongly suggest you read the provided link.
So what is happening here exactly?
This is because the website is configured to use Content Security Policy(CSP) to protect against someone maliciously loading code from a third party. The Content-Security-Policy meta-tag allows you to reduce the risk of XSS attacks by allowing you to define where resources can be loaded from, preventing browsers from loading data from any other locations. This makes it harder for an attacker to inject malicious code into your site.
How to solve this then?
According to the MDN link that I provided, we should solve this by adding the following meta tag to our index.html.
<meta http-equiv="Content-Security-Policy" content="default-src 'self' *.trusted.com">
NOTE: *.trusted.com should be the trusted site or list of them.
Then what should it happen on your own localhost?
I have faced several issues like yours and then found out when this error has shown up on your console, this is not necessarily showing you have this exact problem on your project, and the other problems in your main code could cause such an error. I just found some similar issues that will share below:
Same issue on angular
Same issue on ionic
Same issue on react
and so on
So what you have to do?
First of all, please check all your existing codes and paths in your project and make sure there are no errors in neither of them. When you get rid of all your errors this should be gone as usual, but if the problem insists to exist please make sure to disable all your extensions in your browser (you can safely test it on incognito without disabling anything) and then run the project and see if the error is gone or not.
So there is two-step at all to get rid of that:
Get rid of all your project and pathing errors
Make sure all your extensions are disabled
I had a component in a ReactJS app I am working on that I sweeeearrr is not used anywhere. It even gave me the warning that "footer is defined but not used'. It isn't render anywhere and it never did anything, modify state... yet I'm getting an error message that says that the page cannot be rendered because the file is missing after I deleted it.
Is this simply a matter that I must be missing a connection somewhere?
A few troubleshooting tips. It's helpful if you include these details in your question so we know what you've already tried. Try one at a time and see if the error resolves:
Restart your server (webpack-dev?).
Clear browser cache or open an incognito window and load the page again.
String-search your project for the file name.
yet I'm getting an error message that says that the page cannot be rendered because the file is missing after I deleted it.
An unused import / require statement is left in there.
Solution
Search for filename in the entire code base and remove usage.
More
Something like TypeScript would have caught this at compile time.
A bit late but I faced this exact same problem. Here is what I did:
In VSCode, I opened command pallete and reloaded typescript
I restarted react server
And it worked for me.
Hi guys im just setting up a new project for some work im doing trying to get something working quickly to keep momentum up. However i seem to be having a problem with getting Angular Material to load properly. Im using Node and bower to get my modules which seems to be loading them fine.
However when ever im loading up the page my console reports that its hitting an unreachable code after a return statement like the title suggests. this is actually being hit in the angular material js file that is being imported by bower.
I have no idea why this is happening and any help to progress past this point would be brilliant thank you.
EDIT
I possibly have found a fix to the issue I was having. The backend of the web application I was using was controlled by Django and there was a conflict between Angular js and Django in that they were using the same tags to show values for variables. This was stopping Angular Material from instantiating properly. I still get the unreachable code warning but now Material is working as I expect it to.
I hope this helps some people debug the problems they are having when seeing this issue.
Include the minified version of the library. Automatic Semicolon Insertion is different depending on your browser, if the library code has a return statement broken across two lines, it might end up with a semicolon where one shouldn't be. Using the minified version fixes this because the statement won't be broken across lines.
Include this:
<script src="bower_components/angular-material/angular-material.min.js"></script>
Instead of this:
<script src="bower_components/angular-material/angular-material.js"></script>
We're having strange, sporadic JavaScript error messages in our production log files (JavaScript errors are logged in the backend):
Uncaught Error: [$compile:tpload] http://errors.angularjs.org/1.2.16/$compile/tpload?p0=modules%2Fsome%2valid-directive-path.tpl.html
The error occurs only with directives. I'm not able to reproduce the errors locally. The templateUrl for the directives are all valid.
The only possible scenario that came to my mind was if the user presses the cancel/stop button in the browser while the page is loading (then i'm able to reproduce the error).
Does anyone have another idea or explanation? Or even a solution :-)
Cheers
Michael
We resolved the issue like this:
Since we are caching our HTML templates with $templateCache using the grunt ngTemplate plugin (https://www.npmjs.com/package/grunt-angular-templates) we do not have the above issues anymore.
Out of interest I was able to recreate this issue. By adding logging to angular I established that when the template load fails it does so with a status of 0 which made me think that the request was actually cancelled. This theory was backed up by the fact that we see no server side errors.
If I emulate a device that cannot support html5 routing and then add an arbitrary query string to the end of the route, it causes an infinite digest loop and in the end the whole page reloads a few times. This in turn was causing the outstanding template requests to be cancelled leading to exactly the errors I was seeing in the logs.
So, for me at least, this is really nothing to do with the loading of the templates, it's just an angular bug (which hopefully is going to be fixed in angular 1.3.8)