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.
Related
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.
I've seen a few of these posts on StackOverflow already, though I really can't seem to get mine working no matter what I try.
I am trying to host a webpage, though when deploying I am left with a blank screen, and the following error in the console:
Uncaught SyntaxError: Unexpected token '<' in main.e7fa3b75.js:1
I've seen posts which suggest it is a problem with the pathing to my static files, though I cant seem to sort it out.
This post suggests I should remove an extension from my package.json, though I don't use that extension.
This post says I should remove the repository name from the homepage field in the package.json, though that also wouldn't work for me.
I'm out of ideas, here is the repo, if someone doesn't mind taking a look?
I have got it to render the website for a few moments, only to disappear to the same white screen moments later. There are no problems if I run the page on local host.
UPDATE
I have since got the application to host, but only if I explicitly visit the URL of the landing page.
https://jcdw99.github.io/
From the landing page there is a /papers route which can be reached from the navbar. If you press on the button, the page renders. Though, if you try to explicitly view the page, by manually visiting
https://jcdw99.github.io/papers it returns a 404.
Any help?
Try <HashRouter> instead of <BrowserRouter> since Github pages don't support HTML5 history API (see notes on client side routing) but React BrowserRouter uses it. See this question with similar problem.
One observation is if you navigate directly using # in the url, like https://jcdw99.github.io/#/papers it works!
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 have a react app that has several pages. When I refresh the page, I can successfully link to one other page. Subsequent links update the url address with the reference to the new page, but only load after the page refreshes.
Error messages in different browsers differ.
In chrome:
In firefox:
In safari:
I have seen this post which has very long, complicated suggestions about routing. I'm not sure if this is my problem yet, so have not yet explored the ideas set out as solutions.
2nd screenshot shows that something tries to load /your-path-to-fontawesome/css/all.css and most probably you don't have that file at that location (therefore receiving html instead). You need to config something somewhere in code, connected to fontawesome
Two separate issues here:
First, the combination ERR_BLOCKED_BY_CLIENT and ERR_UNSAFE_REDIRECT are usually the result of a browser extension, or the browser itself, blocking cross-site tracking. This would also make sense why you're only seeing it in a particular browser.
Second, the invalid MIME type for your CSS typically comes from one of two things. The most common, and easiest to fix, is that the path to that file is wrong. In this case, the server responds with a 404 page, giving you the invalid MIME type of text/html.
Another possibility is a library adding comments to the top of a CSS file that is meant to be minified before being sent to the client. Here's a more in-depth post about this issue. Would definitely double-check the file path, though, before digging deeper into this possibility. An easy way to check would just be to take that URL from the MIME type error and navigate to it in your browser to see what you get.
I was trying to set up a watson studio , but I keep getting error message that says 'can not read property 'language_info' undefined'
Same issue for a course project. No one else has seemed to encounter it.
I changed the URL I was using to http from https and it worked. This could be the solution, or I just needed to back up and try it again.
In case it saves someone a bit of time:
I ran into the same issue in the Assignment 2 of the class "Fundamentals of Scalable Data Science". The reason is that the URL we had to import as Notebook is not the first one that appears in the instructions, as it was in Assignment 1. The URL to be imported was lower on the page.
Long story short: You may be importing the wrong URL.