Unable to load jsx files because "file.jsx was blocked because of a disallowed MIME type text/plain"
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.
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.
See @varunvn353's answer for a solution to the problem