I'm trying to run our production version of our web app which uses the minified (production) version of React on our IIS server. We can currently run the developer version, but when attempting to run the build version, we keep getting the following error
`index.js:1 Uncaught SyntaxError: Unexpected token <`
I thought it may of been to the minified code in the build folder, so I made a basic index.js with just a alert inside, and it's still failing. I checked the file path, and it seems to be write, and the index.html file seems to be in order as well. We are using the boiler from reactboilerplate and running the npm run build mand
Dev Console printout:
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="manifest" href="manifest.json">
<meta name="mobile-web-app-capable" content="yes">
<title>Timeclock</title>
</head>
<body>
<noscript>If you're seeing this message, that means
<strong>JavaScript has been disabled on your browser</strong>, please <strong>enable JS</strong> to make this app work.</noscript>
<div id="app"></div>
<script type="text/javascript" src="index.js"></script>
</body>
</html>
I'm trying to run our production version of our web app which uses the minified (production) version of React on our IIS server. We can currently run the developer version, but when attempting to run the build version, we keep getting the following error
`index.js:1 Uncaught SyntaxError: Unexpected token <`
I thought it may of been to the minified code in the build folder, so I made a basic index.js with just a alert inside, and it's still failing. I checked the file path, and it seems to be write, and the index.html file seems to be in order as well. We are using the boiler from reactboilerplate. and running the npm run build mand
Dev Console printout:
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="manifest" href="manifest.json">
<meta name="mobile-web-app-capable" content="yes">
<title>Timeclock</title>
</head>
<body>
<noscript>If you're seeing this message, that means
<strong>JavaScript has been disabled on your browser</strong>, please <strong>enable JS</strong> to make this app work.</noscript>
<div id="app"></div>
<script type="text/javascript" src="index.js"></script>
</body>
</html>
-
1
Are you using any JSX in
index.js? Have you tried to openindex.jsdirectly in the browser and check the output? – Mike Cluck Commented Jun 21, 2017 at 20:02 - no jsx, the index.js file is just a alert function at the moment to just troubleshoot. The output of the index.js file in the browser is valid – Justin E. Samuels Commented Jun 21, 2017 at 20:03
-
Try opening your console and going to the Sources tab (assuming Chrome). Find
index.jsin there and see what the browser claims is in it. It might be as simple as a caching issue. – Mike Cluck Commented Jun 21, 2017 at 20:04 - I'm about to post my dev console printout – Justin E. Samuels Commented Jun 21, 2017 at 20:06
- the code you've provided isn't all that relevant to the problem. – Kevin B Commented Jun 21, 2017 at 20:48
5 Answers
Reset to default 2While linking to index.js file you just need to add the type as "text/JSX" And the error disappears.
<script src="../src/index.js" type="text/JSX"></script>
Inspect your page and verify that when you fetch the index.js file that you're actually getting it. My guess is that when you fetch index.js you'll actually get the index.html, and therefore when your browser attempts to execute a copy of your index.html file as a script, it immediately errors as < is not a valid initial character for a piece of javascript. This is a mon misconfiguration people bump into when configuring html push state, so your webserver may not be properly configured to serve index.js properly; make sure you have the following set in your iisconfig.xml file:
<configuration>
<system.webServer>
<rewrite>
<rules>
<rule name="Main Rule" stopProcessing="true">
<match url=".*" />
<conditions logicalGrouping="MatchAll">
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
<add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
</conditions>
<action type="Rewrite" url="/" />
</rule>
</rules>
</rewrite>
</system.webServer>
</configuration>
After you set up an index.js and linked with the HTML file, then you should delete the in index.js and run your code directly. the error will disappear! It is that simple, but tricky at the start.
I was getting the same error which was being caused because i was using express.static('public') but that was not the main file there. My 'Public' folder was inside another folder called 'Develop" which was messing the paths up. Pulled everything outside Develop and the problem got solved. Hope this helps
While linking to the index.js file you just need to add the type as "text/babel".
<script src="./index.js" type="text/babel"></script>
Also, make sure to add Babel cdn.
<script src="https://unpkg./@babel/standalone/babel.min.js"></script>