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

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

Related

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

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.

Publishing my React website to GitHub pages just produces a blank page

I'm probably missing something really obvious but I'm not very accustomed to GitHub or React so I'd love some advice.
My GitHub is here:
https://github.com/SarahACollins/PortfolioWebsite
I've tried publishing the website here:
https://sarahacollins.github.io/PortfolioWebsite/
and it just produces a blank page. I've tried several different ways of fixing (changing the homepage, moving the index.html to the front, etc.) but can't figure out what's wrong. Any help would be appreciated.
In the developer console it says:
Uncaught SyntaxError: Cannot use import statement outside a module. Looking at the location of the error shows that it is node.js code.:
import React from 'react';
You need to compile your react source code and create a .js file for the client from it.

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