Unable to load jsx files because "file.jsx was blocked because of a disallowed MIME type text/plain"

[yuuwe-n]

I am trying to use react js with http router where I have successfully served css, and js files before; however, I am unable to serve jsx files. I am given the error:

Loading module from “http://127.0.0.1:8080/src/main.jsx” was blocked because of a disallowed MIME type (“text/plain”).

package main

import (
	"log"
	"net/http"
	"mime"
	"fmt"

	"github.com/julienschmidt/httprouter"
)

func Index(w http.ResponseWriter, r *http.Request, _ httprouter.Params) {
	http.ServeFile(w, r, "index.html")
}

func main() {

	fmt.Print(mime.TypeByExtension(".jsx")) // prints out "", meaning no mime extension type was found
	// mime.AddExtensionType(".jsx", "application/jsx")

	router := httprouter.New()
	router.GET("/", Index)


	router.ServeFiles("/src/*filepath", http.Dir("src"))
	router.ServeFiles("/css/*filepath", http.Dir("css"))

	log.Fatal(http.ListenAndServe("127.0.0.1:8080", router))

}

.
├── css
│   └── styles.css
├── go.mod
├── go.sum
├── index.html
├── src
│   └── main.jsx
└── webserver.go

I try changing the MIME type of the jsx file to "application/javascript", but I get a syntax error because jsx files are not javascript files. I also tried changing the mime type of the jsx file to be "text/plain", but the same error occurs.

I know the file is being served because there is no "GET" error, but the X-Content-Type-Options is blocking the jsx files.

[ghost]

By adding the line mime.AddExtensionType(".jsx", "application/javascript"), you explicitly set the MIME type for ".jsx" files to "application/javascript," which is commonly used for JavaScript files. This should resolve the issue you're encountering with JSX files being blocked due to a disallowed MIME type.

[julienschmidt]

See @varunvn353's answer for a solution to the problem