React app "Uncaught SyntaxError: Unexpected token '<'" when running in prod - reactjs

I cannot seem to solve this issue I am having with React. In development mode, my react app works fine. When I try to run it in production with Docker, it does not work. So I tried checking the index.html and when I open it I see two "Uncaught SyntaxError: Unexpected token '<'" error messages as well as "Failed to load resource: net::ERR_BLOCKED_BY_CLIENT" with some kind of facebook link?
I used a template when making the react app.
Any ideas why I am getting the uncaught syntax error? Please let me know, any help is appreciated, thanks.

Removing the homepage line entirely from the package.json in the react app directory fixed it somehow.
good luck to anyone with similar issue.

Related

Uncaught SyntaxError: expected expression, got '<' at ReactDOM.render

I have several years experience as a backend dev, but my frontend experience has been limited to very basic bugfixes in an established frontend codebase. So I have been trying to set up a "hello world" one page app using React Bootstrap so I can learn.
I attempted to just copy the set up in the React Bootstrap Basic Example code sandbox, but I am getting the following console error:
Uncaught SyntaxError: expected expression, got '<'
index.js:8:16
I have my current code available at this github repo.
Pretty sure I've made some n00b mistake, but I guess a n00b has to start somewhere.
By default the browser does not support JSX sintax (IE: <App />). There is a lot of ways to get this working, but I recommend create-react-app
More about JSX: https://reactjs.org/docs/introducing-jsx.html

Default react project - ERROR BY SETTING HOMEPAGE- Uncaught SyntaxError: Unexpected token '<', i've read many answers none work

I'm only trying make a production build from the default react project and just by setting the homepage field in the package.json, when i run "serve -s build" on my local machine i get that error. I was getting this error in my main project, that it will run on a personal machine with nginx using reverse proxy, thats why i'm trying to make it work on the default project, to see where i can fix this. The Project runs with this field with the "npm start". I've tried most of the solutions presented in those links below and none of them work for me:
Create-React-App build - "Uncaught SyntaxError: Unexpected token <"
React/Node Uncaught SyntaxError: Unexpected token <
https://github.com/facebook/create-react-app/issues/527
Heroku create-react-app deploy Uncaught SyntaxError: Unexpected token <
https://community.netlify.com/t/react-application-builds-deploys-into-a-blank-page/2571
-Remove homepage is not a option
-Homepage field it is not incorrect since its only : "homepage" : "test" for testing in the same machine
-One of the answers suggest to edit all the source code, but i think this is not a option
-Tried to put this in the index.html "" and ""
-Most of the requests gets the status code of 304
-Putting this to the homepage field does not work too "./test"
-Sometimes i do get this error too : "Manifest: Line: 1, column: 1, Syntax error."
-Tried to clear cache and cookies
Anything else that i can try?
Many thanks to anyone that can help me on this!

Cannot run website in Apache (Cannot use import statement outside a module)

I have tried asking on Super User community before, but didn't get any answers so I'm trying my luck here.
I'm running an Apache web server and decided to host a React application. I have a nano-react-app folder which contains the files shown below. I can render the website in debug mode so I know my code is working properly. But when I go online, I get this error :
Uncaught SyntaxError: Cannot use import statement outside a module (index.js:1)
which points to the line import React from 'react'; in index.js. To be honest, I don't really understand what the error is telling me so I don't know where and how to look. All I could figure out is that my Index.js file — with a capital i — is called from index.html with a lowercase i and it changes nothing locally but on server-side it returns this error when capitalizing i:
GET http://mywebsite/src/Index.js net::ERR_ABORTED 404 (Not Found)
Now.. I have read in another SO question that I should add type="module" when calling index.js in script tag but now I get this error :
Uncaught SyntaxError: Unexpected token '<' (index.js:5)
I would highly appreciate any solutions... Thanks!
Browsers don't support JSX natively. You need to transpile your code to JavaScript by creating a production build. How you do that depends on the toolchain you have selected and is covered in the React documentation.

React app shows a blank page after the deployment

I deployed my website that uses React and Django. It works fine, but only with Django part. When I try to go to any react path, it simply shows the blank page(which is from build folder).
In the console I see three errors
Uncaught SyntaxError: Unexpected token <
Uncaught SyntaxError: Unexpected token <
Manifest: Line: 1, column: 1, Unexpected token.
Why is that? I have no idea what to do.
My deployed website: https://oridal.herokuapp.com/
If you need more code, feel free to ask for one
Ok, I was not able to understand the cause of my problem.
But I decided to do it another way, so I just took already existing application that works on React and Django, then I cloned it and started to copy and paste my own files to this new application.
Here is the link to the GitHub repository of this application.
I hope, it'll help.

Angular + WebAPI - Getting: Uncaught Syntax Error: Unexpected Token <

I feel stuck with an issue that is probably something very simple, but I just cannot figure it out.
I'm writing a small app in Visual Studio 2015 using AngularJS and WebAPI. It all works 100 % correctly in both debug and release mode if I run the app from VS itself. It also works through WebMatrix when I publish the debug version of the app to a folder. But when I publish the release version to a folder and trying to view the app in the browser (using WebMatrix), I receive:
Uncaught SyntaxError: Unexpected token < modernizr:1
Uncaught SyntaxError: Unexpected token < jquery:1
Uncaught SyntaxError: Unexpected token < bootstrap:1
Uncaught SyntaxError: Unexpected token < angularjs:1
Uncaught SyntaxError: Unexpected token < modal:1
Uncaught SyntaxError: Unexpected token < app:1
It craps out on tag.
Somewhere I read I need to used the proper syntax in my AngularJS code to make sure the minification is done properly when the app is published. I've done all of that, yet I'm still getting this error. I'm also using ng-strict-di tag and I'm not receiving any errors.
I feel is somehow IIS (Express) + AngularJS related. I've made sure I using html5mode, setting the base href in my initial view, abd implemented routing in web.config. I'm not getting 404 when I refresh the page. I feel I've covered a lot, but it still does not work.
I've search the web up and down and have not been able to find anything that would indicate what needs to be done.
I'm kind of desperate and I'd appreciate any help at this moment.
Please and thanks...
I have actually figured it out (by pure chance).
It ended up to be that the main page (index) did not like #styles.render and #scripts.render. The whole setup did not like bundling.
As soon as I included the files individually I have configured in the bundles, it all started working.

Resources