Uploaded instant games weird behaviour

Phaser 3
1

Hi there,

First, I wanted to say I’m really having a good time with Phaser, really nice work, thanks guys :slight_smile:

Also, I’m having this weird behaviour on my instant game. I uploaded it and made it a test version. Everything is working fine when launch into discussion from my computer. Everything is also working fine when launch from messenger through my gf’s phone. But with mine, it seems like index.js is not even call… I get stuck at 0%. On another friend’s phone, it stucks at 97%-98%. I searched a lot about this but couldn’t find any solutions.

Here is the index.html

<!DOCTYPE html>
<html>

 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width, user-scalable=no, minimal-ui">
     <meta name="apple-mobile-web-app-capable" content="yes" />
     <meta name="full-screen" content="yes" />
     <meta name="screen-orientation" content="portrait" />
     <style>
         @font-face {
            font-family: 'sleeve';
            font-style: normal;
             font-weight: 400;
             src: url("assets/sleeve.ttf");
         }

         html {
             text-align: center;
         }

         body {
             padding: 0px;
             margin: 0 auto;
         }     
     </style>
     <script src="https://connect.facebook.net/en_US/fbinstant.6.2.js"></script>
 </head>

 <body>
     <div style="font-family:sleeve; position:absolute; left:-1000px; visibility:hidden;">.</div>
     <script src="build/project.bundle.js" charset="utf-8"></script>
 </body>

</html>

And here is index.js

import 'phaser';
import config from './config';
import Preloader from './Preloader'
import GameScene from './scenes/GameScene'
import MenuScene from './scenes/MenuScene';

FBInstant.initializeAsync().then(function () 
{
     new Game();
}).catch(function (error) 
{
     console.log(error.message);
})

class Game extends Phaser.Game 
{
    constructor() 
    {
        super(config);
        this.scene.add('Preloader', Preloader);
        this.scene.add('Game', GameScene);
        this.scene.add('Menu', MenuScene);
        this.scene.start('Preloader');
    }
}

But imo, on my phone (stuck at 0%) it’s no even going to there.
I tried to reduce my game size to output console.log / err through html in index.js. It doesn’t output anything so my guess is it’s not even going into index.js

Any similar issues / ideas ?
Thanks guys

2

Hi,

Is anyone encoutering the same issue ?

3

The browser is unable to load the file?

Try taking the contents of build/project.bundle.js and pasting it directly inside a script tag on the page and see what happens?

4

Is the file encoding of the .js different from the html? I remember some browsers having trouble with css files with a different encoding than the html, however I’m not sure about js files.

5

Not sure about your bundling process, does it transpile to ES 5? I not sure of Instant Games, its documentation does not mention what version of JavaScript it supports.

6

Thanks guys for the hints. I moved to Typescript for my project I’ll try when I’m back to this point ;). I’ll keep you updated