Hidden characters in javascript after save

Question

I have an app running in a docker container using docker-compose, served by nginx. The front-end scripts are compiled using gulp into a build.js file.

The first time I bring up the docker container, there is no problem with build.js. Most times the build file is re-created (I rebuild constantly during development), Chrome finds a string of \u0 characters at the end of build.js, causing it to throw the error Uncaught SyntaxError: Invalid or unexpected token.

Sometimes when build.js is re-created, a handful of characters are missing from the version of build.js served to the browser:

build.js, local version:

var AnalyticsMixin = require('../mixins/AnalyticsMixin.vue');

build.js, browser version

var AnalalyticsMixin.vue');

This is in addition to the long string of repeated \u0s at the end of the file.

I also have a gulp task that minifies build.js and appends a hash of the contents to the filename (filename changes with each new save). Each new file here throws no error.

In another possible twist, this problem only reared it's head when we moved from a flask back-end to gunicorn.

These characters don't seem to be in the file itself - the version I can see in the inspect window in Chrome is one line longer than my local file.

As suggested here, I tried setting sendfile off; in my nginx.conf. Nothing changed.

Could it have something to do with my docker-compose set-up? Something else in nginx?

Added:

This is the file that loads build.js (or the minified version). The name of the file is injected by gulp into index.html between the two comments inject:js and endinject

index.html:

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
</head>
<body>
  <div id="app" ><router-view></router-view></div>

  <!-- inject:js -->
  <script src="/js/build.js"></script>
  <!-- endinject -->
</body>
</html>

Could you please post the `html`(at least with headers without body) which loads `build.js`. — Nandu Kalidindi, Nov 14 '17 at 16:21
Can you try adding `` after the `head` tag? I bumped into a similar situation and this helped. Let's see if it works for you as well. — Nandu Kalidindi, Nov 14 '17 at 19:04
@NanduKalidindi - I did try that but it didn't change anything. — ebbishop, Nov 27 '17 at 14:12

score 0 · Accepted Answer · answered Dec 11 '17 at 15:10

I eventually solved this by creating separate Dockerfiles for development and production - the one for development uses flask's server. gunicorn seems to be the culprit, but only when re-creating & serving build.js with new content, which isn't a problem for production.

Dockerfile uses only flask's default development server:

FROM python:3
ENV MODE dev
EXPOSE 8080

RUN apt-get update
RUN apt-get install -y freetds-dev

RUN mkdir -p /usr/src/app
WORKDIR /usr/src/app

COPY requirements.txt /usr/src/app/
RUN pip install --no-cache-dir -r requirements.txt

COPY . /usr/src/app

RUN python3 setup.py install
CMD python3 manage.py dev

Dockerfile_prod, using the gunicorn server

FROM python:3
ENV MODE dev
EXPOSE 8080

RUN apt-get update
RUN apt-get install -y freetds-dev

RUN mkdir -p /usr/src/app
WORKDIR /usr/src/app

COPY requirements.txt /usr/src/app/
RUN pip install --no-cache-dir -r requirements.txt

COPY . /usr/src/app

RUN python3 setup.py install
CMD gunicorn -w 3 -b 0.0.0.0:8080 wsgi

To build images using Dockerfile_prod instead of the default Dockerfile:

docker build -f Dockerfile_prod

Hidden characters in javascript after save

Added:

1 Answers1