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

xzilja commented 7 years ago

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: https://github.com/insin/nwb/issues/287

xzilja commented 7 years ago

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 commented 7 years ago

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 commented 7 years ago

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 commented 7 years ago

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

insin / nwb

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