Chapter 8.8 Error about MIME type

YievCkim commented 3 years ago

First I would like to thank you for this great book. I have finished the previous chapters and I am stuck on the last chapter: "Interacting with Web Components".

When I try the first example I get this error in my browser and no image on the screen: Loading module from "http://localhost:8000/node_modules/@github/image-crop-element/dist/index.esm.js was blocked because of a disallowed MIME type ("text/html").

I don't understand why this error. I have checked several times my code and and it is the same as the one in the book.

My browser link me this topic with the error: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Content-Type-Options

YievCkim commented 3 years ago

index.html

<!DOCTYPE html>
<html>
  <head>
    <script
      type="module" 
      src="node_modules/@github/image-crop-element/dist/index.esm.js">
    </script>

    <link
      href="node_modules/@github/image-crop-element/index.css" 
      rel="stylesheet">

    <style>
      .wrapper {
        width: 500px;
        margin: 30px auto;
      }

      .center {
        text-align: center;
      }
    </style>
  </head>

  <body>
    <div id="elm-app-is-loaded-here"></div>
    <script src="elm.js"></script>

    <script>
      var app = Elm.CustomElements.init({
        node: document.getElementById("elm-app-is-loaded-here")
      });
    </script>
  </body>
</html>

Asset.elm

module Asset exposing (Image, src, waterfall)

import Html exposing (Attribute)
import Html.Attributes as Attr

type Image
    = Image String

-- IMAGES

waterfall : Image
waterfall =
    image "waterfall.jpg"

image : String -> Image
image filename =
    Image ("/assets/images/" ++ filename)

-- USING IMAGES

src : Image -> Attribute msg
src (Image url) =
    Attr.src url

CustomElements.elm

module CustomElements exposing (CropData)

import Asset
import Browser
import Html exposing (Attribute, Html, div, h2, strong, text)
import Html.Attributes exposing (class, src)
import Html.Events exposing (on)
import Json.Decode as Decode exposing (Decoder, int)
import Json.Decode.Pipeline exposing (requiredAt)

type alias CropData =
    { x : Int
    , y : Int
    , width : Int
    , height : Int
    }

imageCrop : List (Attribute a) -> List (Html a) -> Html a
imageCrop =
    Html.node "image-crop"

type Msg
    = NoOp

update : Msg -> CropData -> ( CropData, Cmd Msg )
update msg cropData =
    case msg of
        NoOp ->
            ( cropData, Cmd.none )

initialModel : CropData
initialModel =
    { x = 297
    , y = 0
    , width = 906
    , height = 906
    }

init : () -> ( CropData, Cmd Msg )
init flags =
    ( initialModel, Cmd.none )

view : CropData -> Html Msg
view cropData =
    div [ class "center" ]
        [ h2 [] [ text "Image Crop" ]
        , imageCrop
            [ Asset.src Asset.waterfall
            , class "wrapper"
            ]
            []
        ]

main : Program () CropData Msg
main =
    Browser.element
        { init = init
        , view = view
        , update = update
        , subscriptions = \_ -> Sub.none
        }

YievCkim commented 3 years ago

The node_modules directory seems to be not accessible from elm-live HTTP interface. Using python HTTP from project's root works:

$ python3 -m http.server
Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ...

I had to change some path in index.html too:

    <script
      type="module" 
      src="node_modules/@github/image-crop-element/dist/index.js">
    </script>

    <link
      href="node_modules/@github/image-crop-element/dist/index.css" 
      rel="stylesheet">

I keep the report open, if you want to specify this details in the book.

lucamug commented 2 years ago

Be careful that if you install the latest version of @github/image-crop-element (5.0.0 at the time of writing), the CSS file has been removed and embedded in the JS file. So you need to remove it from the HTML file

pawanpoudel / beginning-elm-code

Chapter 8.8 Error about MIME type #5