Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Unexpected token < (probably related to script in index.html) #318

Closed
xzilja opened this issue Jun 2, 2017 · 4 comments
Closed

Unexpected token < (probably related to script in index.html) #318

xzilja opened this issue Jun 2, 2017 · 4 comments

Comments

@xzilja
Copy link

xzilja commented Jun 2, 2017

Running production build on a server results in error

vendor.43103173.js:1 Uncaught SyntaxError: Unexpected token <

with subsequent one saying:

Uncaught TypeError: Cannot read property 'call' of undefined
    at n ((index):15)
    at Object.0 (app.e637b463.js:40)
    at n ((index):15)
    at window.webpackJsonp ((index):15)
    at app.e637b463.js:1

It is referring to .call inside script that is present in index.html file

var o=t[r]={i:r,l:!1,exports:{}};return e[r].call

I have a feeling this might be related to: #287
@xzilja
Copy link
Author

xzilja commented Jun 2, 2017 •
edited
Loading

EDIT: this index file is produced by yarn build inside /dist

This is full index.html file

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="description" content="Test">
    <link rel="manifest" href="manifest.json">
    <title>test</title>

    <link href="https://fonts.googleapis.com/css?family=Lato:400,700,900" rel="stylesheet">
  <link href="/vendor.1584ab7d.css" rel="stylesheet"></head>
  <body>
    <div id="app"></div>
  <script>!function(e){function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}var r=window.webpackJsonp;window.webpackJsonp=function(t,u,c){for(var i,a,f,p=0,l=[];p<t.length;p++)a=t[p],o[a]&&l.push(o[a][0]),o[a]=0;for(i in u)Object.prototype.hasOwnProperty.call(u,i)&&(e[i]=u[i]);for(r&&r(t,u,c);l.length;)l.shift()();if(c)for(p=0;p<c.length;p++)f=n(n.s=c[p]);return f};var t={},o={4:0};n.e=function(e){function r(){i.onerror=i.onload=null,clearTimeout(a);var n=o[e];0!==n&&(n&&n[1](new Error("Loading chunk "+e+" failed.")),o[e]=void 0)}var t=o[e];if(0===t)return new Promise(function(e){e()});if(t)return t[2];var u=new Promise(function(n,r){t=o[e]=[n,r]});t[2]=u;var c=document.getElementsByTagName("head")[0],i=document.createElement("script");i.type="text/javascript",i.charset="utf-8",i.async=!0,i.timeout=12e4,n.nc&&i.setAttribute("nonce",n.nc),i.src=n.p+""+({0:"Home",1:"NotFound",2:"vendor",3:"app"}[e]||e)+"."+{0:"2f290079",1:"09db38fa",2:"9f4bb598",3:"e637b463"}[e]+".js";var a=setTimeout(r,12e4);return i.onerror=i.onload=r,c.appendChild(i),u},n.m=e,n.c=t,n.i=function(e){return e},n.d=function(e,r,t){n.o(e,r)||Object.defineProperty(e,r,{configurable:!1,enumerable:!0,get:t})},n.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(r,"a",r),r},n.o=function(e,n){return Object.prototype.hasOwnProperty.call(e,n)},n.p="/",n.oe=function(e){throw console.error(e),e}}([]);</script>
  <script type="text/javascript" src="/vendor.9f4bb598.js"></script><script type="text/javascript" src="/app.e637b463.js"></script></body>
</html>

@insin
Copy link
Owner

insin commented Jun 2, 2017 •
edited
Loading

The <script> in the generated HTML is the Webpack manifest, presumably things going south in the vendor bundle means module ids it's trying to access when the app runs aren't there.

Which dependencies do you have installed? By default, anything imported from node_modules/ goes into a vendor bundle. Wondering if a build with NODE_ENV=development set in your environment will reveal more.

@xzilja
Copy link
Author

xzilja commented Jun 2, 2017

Will drop list of dependencies below, strange thing is that I am able to start it on my local machine, yet once accessed via browser served from my server this error happens. Is there a chance code splitting could mess with this?

"dependencies": {
    "compression": "^1.6.2",
    "express": "4.15.3",
    "react": "16.0.0-alpha.12",
    "react-dom": "16.0.0-alpha.12",
    "react-helmet": "5.1.3",
    "react-loadable": "^3.3.1",
    "react-router-dom": "^4.1.1",
    "sanitize.css": "^5.0.0",
    "scrollmonitor": "^1.2.3",
    "styled-components": "2.0.0"
  },
  "devDependencies": {
    "babel-eslint": "7.2.3",
    "eslint": "^3.19.0",
    "eslint-config-airbnb": "15.0.1",
    "eslint-plugin-babel": "^4.1.1",
    "eslint-plugin-import": "2.3.0",
    "eslint-plugin-jsx-a11y": "5.0.3",
    "eslint-plugin-react": "7.0.1",
    "nwb": "0.16.3",
    "offline-plugin": "4.8.1",
    "prop-types": "15.5.10",
    "shipit-deploy": "^2.4.0"
  },

@xzilja
Copy link
Author

xzilja commented Jun 2, 2017

EDIT: it looks like vendor file is not present at all after CI build (ci now has same settings as my local machine) yet one builds it fine and other doesnt

@xzilja xzilja closed this as completed Jun 27, 2017
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@insin @xzilja