core
core copied to clipboard
elm
Problem when setting "Date.prototype._nth = null;" from JS
This is a copy of https://github.com/elm/compiler/issues/1848 but with an SSCCE this time.
Was getting this error in Chrome specifically:
Uncaught TypeError: Cannot use 'in' operator to search for '$' in null
at _Debugger_init (elm.4374b0e4800d60cef9d386ca71cfebac.js:4585)
at _Debugger_init (elm.4374b0e4800d60cef9d386ca71cfebac.js:4642)
at _Debugger_init (elm.4374b0e4800d60cef9d386ca71cfebac.js:4642)
at _Debugger_init (elm.4374b0e4800d60cef9d386ca71cfebac.js:4642)
at Function.f (elm.4374b0e4800d60cef9d386ca71cfebac.js:5523)
at A2 (elm.4374b0e4800d60cef9d386ca71cfebac.js:56)
at Function.f (elm.4374b0e4800d60cef9d386ca71cfebac.js:5476)
at A4 (elm.4374b0e4800d60cef9d386ca71cfebac.js:62)
at Function.f (elm.4374b0e4800d60cef9d386ca71cfebac.js:5513)
at A3 (elm.4374b0e4800d60cef9d386ca71cfebac.js:59)
at Function.f (elm.4374b0e4800d60cef9d386ca71cfebac.js:5517)
at A2 (elm.4374b0e4800d60cef9d386ca71cfebac.js:56)
at _Debugger_init (elm.4374b0e4800d60cef9d386ca71cfebac.js:4592)
at _Debugger_init (elm.4374b0e4800d60cef9d386ca71cfebac.js:4642)
at Function.f (elm.4374b0e4800d60cef9d386ca71cfebac.js:9172)
at A2 (elm.4374b0e4800d60cef9d386ca71cfebac.js:56)
at elm.4374b0e4800d60cef9d386ca71cfebac.js:10174
at elm.4374b0e4800d60cef9d386ca71cfebac.js:15
at A2 (elm.4374b0e4800d60cef9d386ca71cfebac.js:56)
at sendToApp (elm.4374b0e4800d60cef9d386ca71cfebac.js:1884)
at HTMLInputElement.callback (elm.4374b0e4800d60cef9d386ca71cfebac.js:3275)
Repo with SSCCE: https://github.com/k-bx/elm-sscce-null-typeerror
Basically, what makes a difference is an inclusion if that date.js. I haven't got enough details yet to explain why exactly that is happening though.
UPDATE: you don't need to include that date.js. All you need to do is to make Date.prototype._nth = null before calling Elm. Updating the SSCCE repo
Is there a way to get the example into the thread itself. Just paste in code for the block of Elm and JS you need.
You can write a minimal Elm program like this:
main =
Browser.element
{ init = \_ -> (0, Cmd.none)
, view = \_ ->text "hi"
, update = \_ _ -> (0, Cmd.none)
, subscriptions = \_ -> Sub.none
}
That way it is easy to see what is going on quickly. Highlight the part that is interesting with comments or placement. Etc. I cannot process big files and repos with build scripts and knowing to click through four links to the "right place" to see the issue. Just trim everything and put it in the thread directly.
Sure.
Index.html:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Main</title>
</head>
<body>
<div id="elm-f0111bc4e658d0f98db96260c16f7e49"></div>
<script type="text/javascript">
Date.prototype._nth = null;
</script>
<script type="text/javascript" src="elm.js"></script>
<div id="elm"></div>
<script type="text/javascript">
Elm.Main.init({node: document.getElementById("elm")});
</script>
</body>
</html>
module Main exposing (main)
import Browser
import File exposing (File)
import Html exposing (..)
import Html.Attributes exposing (..)
import Html.Events exposing (..)
import Json.Decode as D
type alias Flags =
{}
type alias Model =
{ files : List File
}
type Msg
= GotFiles (List File)
init : Flags -> ( Model, Cmd Msg )
init _ =
( { files = []
}
, Cmd.none
)
update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
case msg of
GotFiles files ->
( { model | files = files }, Cmd.none )
view : Model -> Html Msg
view model =
input
[ on "change" (D.map GotFiles filesDecoder)
, type_ "file"
, multiple True
]
[]
main : Program Flags Model Msg
main =
Browser.element
{ init = init
, view = view
, update = update
, subscriptions = subscriptions
}
subscriptions : Model -> Sub msg
subscriptions model =
Sub.none
filesDecoder : D.Decoder (List File)
filesDecoder =
D.at [ "target", "files" ] (D.list File.decoder)
elm.json:
{
"type": "application",
"source-directories": [
"src"
],
"elm-version": "0.19.0",
"dependencies": {
"direct": {
"elm/browser": "1.0.1",
"elm/core": "1.0.2",
"elm/file": "1.0.1",
"elm/html": "1.0.0",
"elm/http": "2.0.0",
"elm/json": "1.1.2"
},
"indirect": {
"elm/bytes": "1.0.7",
"elm/time": "1.0.0",
"elm/url": "1.0.0",
"elm/virtual-dom": "1.0.2"
}
},
"test-dependencies": {
"direct": {},
"indirect": {}
}
}
There is no null check in _Debug_toAnsiString.
https://github.com/elm/core/blob/ad161458f8d72d5ce89110fc767266afa0e155e5/src/Elm/Kernel/Debug.js#L80
Good catch, in addition to the check in _Debugger_init I'd argue that should be added as well.
@k-bx thank you for reporting this. I just ran into the same issue. Do you have a hack for making it work until elm/core is fixed?
@mingan yes, as mentioned, you need to make sure there are no null values objects in your Date.prototype keys
@k-bx thank you for your reply. I should phrased the question differently. To get Elm to work I added delete Date.prototype['_nth']. I'm just worried whether Date.js will be able to handle the key not being present - assuming you've applied a comparable patch, have you seen any side-effects in Date.js?
Oh, I'm not sure about that, it was a long time ago. Probably I just ended up not using Date.js at that time, it was all needed only as a process of migrating from a legacy codebase which had Date.js in it
