0

I want to use Polymer LitElement with a Go backend. With LitElement I implement the web components in JavaScript modules! For routing on the server-side I use Gorilla Mux like this

mux := mux.NewRouter()
mux.PathPrefix("/").Handler(http.FileServer(http.Dir("./wwwroot")))

This loads static html files correctly. When a html file references a js file that implements a web component I get the following error (in Chrome):

Failed to load module script: The server responded with a non-JavaScript MIME type of "text/plain". Strict MIME type checking is enforced for module scripts per HTML spec.

When I rename my component module to have the extension mjs the file loads correctly but then the module for LitElement fails to load with the same error. Since I have no influence on the file extensions of all third party JavaScript modules I don't know how to fix this.

(I guess I would experience the same problems if I were using Polymer 3 instead of LitElement)

Any ideas?

Update

Here is the output from requesting the lit-element.js JavaScript module with curl

PS C:\Test\Polymer\LitElement> curl http://localhost:8082/node_modules/lit-element/lit-element.js

StatusCode        : 200
StatusDescription : OK
Content           : /**
                     * @license
                     * Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
                     * This code may only be used under the BSD style license found at
                     * http://polymer.github.io/LICENSE.txt
                     * Th...
RawContent        : HTTP/1.1 200 OK
                    Accept-Ranges: bytes
                    Content-Length: 8925
                    Content-Type: text/plain; charset=utf-8
                    Date: Thu, 26 Sep 2019 11:38:23 GMT
                    Last-Modified: Sat, 26 Oct 1985 08:15:00 GMT

                    /**
                     * @licen...
Forms             : {}
Headers           : {[Accept-Ranges, bytes], [Content-Length, 8925], [Content-Type, text/plain; charset=utf-8], [Date,
                    Thu, 26 Sep 2019 11:38:23 GMT]...}
Images            : {}
InputFields       : {}
Links             : {}
ParsedHtml        : mshtml.HTMLDocumentClass
RawContentLength  : 8925

Notice the Content-Type!!!

NicolasR
  • 2,222
  • 3
  • 23
  • 38
  • 1
    something is wrong in your problem analysis. FileServer uses ServeContent internally, and ServeContent manages content type for you. https://golang.org/pkg/net/http/#ServeContent can you try to curl the js resource and share the result ? –  Sep 26 '19 at 08:22
  • Ok, see my update – NicolasR Sep 26 '19 at 11:43

2 Answers2

1

Are you sure you hit the right end point ?

See that small example (that you can try on your host to give a check)

$ tree
.
├── main.go
└── wwwroot
    └── test.js

1 directory, 2 files

$ cat main.go 
package main

import (
    "net/http"

    "github.com/gorilla/mux"
)

func main() {
    mux := mux.NewRouter()
    mux.PathPrefix("/").Handler(http.FileServer(http.Dir("./wwwroot")))

    http.ListenAndServe(":8080", mux)
}


$  cat wwwroot/test.js

$ go run main.go &
[1] 11841
$ curl -v http://localhost:8080/test.js
*   Trying ::1:8080...
* TCP_NODELAY set
* Connected to localhost (::1) port 8080 (#0)
> GET /test.js HTTP/1.1
> Host: localhost:8080
> User-Agent: curl/7.65.3
> Accept: */*
> 
* Mark bundle as not supporting multiuse
< HTTP/1.1 200 OK
< Accept-Ranges: bytes
< Content-Length: 0
< Content-Type: application/javascript
< Last-Modified: Thu, 26 Sep 2019 12:12:15 GMT
< Date: Thu, 26 Sep 2019 12:15:36 GMT
< 
* Connection #0 to host localhost left intact
  • 1
    Thanks for that example! It's totally crazy: your code produces on my side Content-Type: text/plain; charset=utf-8. As soon as I change the extension to mjs it correctly reports Content-Type: application/javascript. I checked the source code of the current http and mime packages. There seem to be differences between Windows and Linux mime detection. And in my Windows registry I found the extension js mapped to text/plain!!! Other Windows systems don't seem to have that entry. I'm going to investigate this closer tonight... – NicolasR Sep 26 '19 at 13:03
  • that s indeed very surprising. Looking at the go source code, ServeContent calls for mime.TypeByExtension (https://golang.org/src/net/http/fs.go#L196). On windows (to keep this comment short) it relies on the registry, indeed, https://golang.org/src/mime/type_windows.go –  Sep 26 '19 at 13:10
  • 1
    Ok, the registry setting was indeed the problem. I don't understand which software made this mapping and why this did not cause any problems before with other applications. Anyway, thanks for your time and I will accept your answer as it gave me an idea how to diagnose the problem. – NicolasR Sep 27 '19 at 09:37
0

In my project, I had the same problem. Following is my solution: In tsconfig.json file, make "target": "es5"

NimaNr
  • 532
  • 5
  • 20
  • Unfortunately that doesn't work for me because I need at least es6. And, by the way, I don't use Typescript in this project. – NicolasR Jan 19 '21 at 23:17