TypeError: Elm.ElmI18Next.fullscreen is not a function

[mccrodp]

Hey, thanks for the package, looks to be just what I need :)

I cannot get it working though. I'd like to get it working inside the repo itself 1st, get it working and then try the custom methods / integrating it into my own project repo.

I'm using Elm 0.18 and have tried the following:

• Clone repo and run npm install
• Run npm start
• Visit http://localhost:8001/

I get the following error in the console with a blank screen:

TypeError: Elm.ElmI18Next.fullscreen is not a function

Any ideas? Thanks.

[mccrodp]

I also see this on npm install:

npm WARN elm-i18next-client@1.0.0 No repository field.

[mccrodp]

I then also ran elm-package install just incase I was missing elm packages, but still seeing original error after running npm start

[mccrodp]

Tried with an Ellie but I get fullscreen is not a function when using that code also:

https://ellie-app.com/3h27pnwb5H2a1/0

[ChristophP]

Hi @mccrodp,

cool glad if this lib is of use for you. :-) So it seems like the error was caused because the path wasn't pointed to the correct html which is in the public folder. I removed a second index.html (is was causing the error) and pointed the npm start task (which uses elm-live) to the public directory. When you pull and try again you should see a working testpage.

However, I started out with the Testpage but then kinda abandonned it when I added the tests. The test page is nice if you want something visual but to actually test the functionality running npm test is much nicer. Let me know if this fixes your problem.

[mccrodp]

Thanks for that, but I still don't see success here when I run npm start from root dir:

In Chrome console I see:

GET http://localhost:8000/elm.js (index):4 Uncaught ReferenceError: Elm is not defined at (index):4 (anonymous) @ (index):4

I believe it's not building properly as I had to manually run: elm-live public/Testpage.elm --output=public/elm.js --dir=public -- --debug --warn, then I get output in the browser:

Some model { translations = Translations (Dict.fromList [("a","Hello"),("b.c","bye"),("b.d","Good day {{name}}"),("b.e.f","Hello {{firstname}} {{lastname}}")]) } t "a" = Hello t "b.c" = bye t "b.d" = Good day {{name}} tr ( "{{ ", "}}" ) "b.e.f" [ ( "firstname", "Peter" ), ( "lastname", "Lustig" ) ]= Hello Peter Lustig t "notExisting" = notExisting

[mccrodp]

I had to install elm-test globally : npm install -g elm-test as even though it is in the node_modules running npm test was not working.

I'm still not getting what I imagine is correct behaviour here, so not seeing anything to do with translations at this point.

➜ elm-i18next git:(master) npm test

elm-i18next-client@1.0.0 test /Users/paulmccrodden/dev/elm-i18next elm-test

The test run failed because it encountered a runtime exception: elm-io config error: Elm is not defined. Make sure you provide a file compiled by Elm! npm ERR! Test failed. See above for more details.

➜ elm-i18next git:(master) elm-test Success! Compiled 1 module. Successfully generated /dev/null /Users/paulmccrodden/dev/elm-i18next/tests/Main.elm has an invalid module declaration. Check the first line of the file and make sure it has a valid module declaration there!

Any ideas? Can you let me know what your steps are to get this all running both through UI (npm start) and CLI (npm test)? Thank you!!

[ChristophP]

Okay about the issue with npm test. I tried to reproduce the issue by doing a fresh clone. Are you using elm-test 0.18.3? I have 0.18.2 installed and it works then I installed 0.18.3 and it broke. So I fixed the version in the package json. Also I changed the test command to not require a globally installed elm-make. Thanks for reporting that issue. So pulling and running npm install should fix that for you.

[ChristophP]

And the issue you have with npm start is weird. Seems like the building isn't working. I wasn't able to reproduce it though. I did a fresh clone of the repo, ran npm install and then npm start and everything worked. Can you do an npm ls elm-live to see what version of elm you have? Also what's the output when you run npm start? Let me know if the issue persists.

[mccrodp]

I have tried reinstalling and everything below using npm 4.20 and 3.10.10 separately.

elm-live v2.7.4 npm start:

npm start

elm-i18next-client@1.0.0 start /Users/paulmccrodden/dev/elm-i18next elm-live public/Testpage.elm --output=public/elm.js --dir=public -- --debug --warn

Success! Compiled 0 modules. Successfully generated public/elm.js

elm-live: The build has succeeded. Starting the server!

[0001] info Server running at http://localhost:8001/ (connect) [0001] info LiveReload running on 35729

At localhost:8001 I see:

Some model { translations = Translations (Dict.fromList [("a","Hello"),("b.c","bye"),("b.d","Good day {{name}}"),("b.e.f","Hello {{firstname}} {{lastname}}")]) } t "a" = Hello t "b.c" = bye t "b.d" = Good day {{name}} tr ( "{{ ", "}}" ) "b.e.f" [ ( "firstname", "Peter" ), ( "lastname", "Lustig" ) ]= Hello Peter Lustig t "notExisting" = notExisting

What am I supposed to see?

elm-test 0.18.3 npm test:

When I run npm test I get this common error:

Could not find Elm compiler "./node_modules/.bin/elm-make". Is it installed? npm ERR! Test failed. See above for more details.

When I run elm-test I get this error:

Success! Compiled 1 module. Successfully generated /dev/null /Users/paulmccrodden/dev/elm-i18next/tests/Main.elm has an invalid module declaration. Check the first line of the file and make sure it has a valid module declaration there!

Could you give an indication on what the working behaviour is for both of the start and test, might help working towards it. Any other details required for debugging, let me know, thanks.

[ChristophP]

Sure, so the output you are seeing from npm start is what you are supposed to be seeing. I admit that it doesn't look very good :-/, it was just originally meant to test some example translations in a browser environment. E.g. the line t "a" = Hello shows that it's working because Hello on the right side is the actual translated string for the key "a", and so on. I never bothered to make it pretty because I figured the only people who are ever gonna see this page are people that actually clone the repo to develop on it. Anyone simply using the package with elm package install ChristophP/elm-i18next will just use the lib. However the output for npm test should be something like this.

deedo@JOHANNES[±|master U:1 ✗]:~/experiments/elm-i18next $ npm test

> elm-i18next-client@1.0.0 test /home/deedo/experiments/elm-i18next
> elm-test --compiler $(realpath node_modules/.bin/elm-make)

Success! Compiled 1 module.                                         
Successfully generated /tmp/elm_test_117427-10449-1o2e589.8bbvxtj4i.js

elm-test
--------
Running 15 tests. To reproduce these results, run: elm-test --seed 1789665870

TEST RUN PASSED

Duration: 24 ms
Passed:   15
Failed:   0

I made another fix in the package.json because there seem to be some issues with the node-test-runnner and the current build is also failing as you can see here https://github.com/rtfeldman/node-test-runner. Anyhow if you pull my latest changes and do a clean reinstall of your node_modules I expect everything to work for you. Please let me know.

[ChristophP]

So I pushed the changes now.

[mccrodp]

Thanks a lot for this, it got me to where I wanted (with latest changes and https://github.com/ChristophP/elm-i18next/pull/2). I have the base repo working, now I can look closer at the Elm code.

I'm upskilling in Elm at the moment, so where I am I'm more comfortable learning from example rather than purely the docs. Working on a project, so need to hit the ground running. haha

On that note, I'll open another issue which is more a support request on a particular use case. Thanks!

On a related note to the above, I think you're right re: styling, not necessary, I just wasn't sure what to expect. Things I might suggest would be to make it obvious in the text what people are looking at. Rather than using a key as now, use an example with a key as a language code. I think that would be 2 birds with 1 stone then. Would make sense in UI and would be a good base for someone like me to start with. That should make sense, but I haven't started with the repo yet 😄 Cheers

[mccrodp]

^ I misunderstood the keys, the local JSON is for the particular languages, so they keys are more for the particular string, e.g.

{
  "welcome_msg": "Hello",
  "greetings": {
    "exit": "bye",
    "meeting": "Good day {{name}}",
    "intro": {
      "personal": "Hello {{firstname}} {{lastname}}"
    }
  }
}

Something like that 😄 Get it now

[mccrodp]

Just saw you had this in the example, perhaps good to use that or similar in the example json, looks good:

{
    "hallo": "Hallo",
    "greetings": {
      "goodDay": "Good Day.",
      "greetName": "Hi {{name}}"
    }
  }

[ChristophP]

Yeah, you are right I could do I a more descriptive JSON file on the test page. Like I said, I kind of abandonned the test page in favor of the tests but yeah I guess I can update them to be more explicit.