npm packages are not found - SyntaxError: Unexpected token '<'

Question

I'm running a react container in Kubernetes env (AKS) with an istio gateway

In local env, everything works well using docker build && docker run

In Kubernetes, for each npm package, the response I'm getting is status code: 200, response content-type: text/html, and the response content is of index.html which is why I'm assuming package was not found?

When checking docker dist content, I can assert that the package is there (for example /dist/npm.babel.4fca54....chunk.js is present
docker image is built using a base context: docker build -t imagename --build-arg PUBLIC_URL=/base-app .
index.html is valid and contains valid script declarations. for example <script type="text/javascript" src="/base-app/npm.babel.743f....chunk.js"></script>

Istio Gateway

spec:
  selector:
  istio: ingressgateway
  servers:
    - hosts:
      - dev.myDomain.com
      port:
        name: https
        number: 443
        protocol: HTTPS
      tls:
        credentialName: someCreds
        mode: SIMPLE

Istio VS

   - match:
    - uri:
        prefix: /base-app
     route:
      - destination:
          host: svc-app
          port:
            number: 8000

Example for a Request + headers

Request URL: https://dev.myDomain.com/base-app/npm.babel.4fca5....chunk.js
Request Method: GET
Status Code: 200 
Remote Address: xxx.xxx.xxx:443
Referrer Policy: no-referrer-when-downgrade

Response Headers

accept-ranges: bytes
content-length: 11920 ---> length of index.html
content-type: text/html --> bad needs to be text/javascript
date: Tue, 11 Aug 2020 21:30:07 GMT
etag: "5f32aff9-2e90"
last-modified: Tue, 11 Aug 2020 14:49:29 GMT
server: istio-envoy
status: 200
x-envoy-upstream-service-time: 4

score 2 · Accepted Answer · answered Aug 11 '20 at 22:04

2

By default Istio will proxy from https://dev.myDomain.com/base-app/npm.babel.4fca5....chunk.js to http://pod_ip:8000/base-app/npm.babel.4fca5....chunk.js, and, as far as I can tell, your image serves files directly from /dist, so Istio should actually proxy to http://pod_ip:8000/npm.babel.4fca5....chunk.js; note the missing /base-app/. To do that, try to update the Istio Virtual Service to:

- match:
  - uri:
      prefix: /base-app
  rewrite:
    uri: /
  route:
  - destination:
      host: svc-app
      port:
        number: 8000

answered Aug 11 '20 at 22:04

BogdanL

691
5
5

You are awesome! thanks a lot for your response. and of course, U are correct but can U maybe explain why: 1. getting 200? 2. the webpack public root is set to /base-app but for some reason rewriting the uri solve this issue? 3.index.html call was 200 which was the main point of confusion --> I think because of the auto-redirect to...index.html (: – royB Aug 12 '20 at 06:41
You're right, most often SPAs will serve `index.html` instead of returning 404 for non-existent URLs. Also, configuring webpack `publicPath` only applies to generating URLs, not serving behavior. – BogdanL Aug 12 '20 at 08:47

npm packages are not found - SyntaxError: Unexpected token '<'

1 Answers1