OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

Vanila Javascript Es6 Modules not working on Safari browser on Windows

  • Thread starter Thread starter Jeú Casulo
  • Start date Start date
J

Jeú Casulo

Guest
I have a small code which works fine on Chrome, Opera, Edge and Firefox. But it's not working on Safari.

I am a windows user so I not that familiar with Safari in order to find out what is wrong.

I was using this website as reference but I am not sure if it's updated or if maybe i could have misunderstood something. But I guess it suppose to work.

https://caniuse.com/?search=javascript modules

I am using apache and php

I have 3 files (index.php > index.js > Entities/Contato.js)

Tried to let it as simple as possible but let me know if you need anything else.

Thanks

index.php

Code:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

</head>
<body>

<!-- This one works just fine -->
<script>
    console.log('init'); 
</script>

<!-- This one does not work -->
<script type="module" src="./js/index.js"></script>

</body>
</html>

index.js

Code:
import {
ContatoEntity,
} from './Entities/Contato.js';

$(document).ready(()=>{   
Main.ContatoCreate();
})


class Main {    
static ContatoCreate(){
        let contatoCreate = new ContatoEntity();
        console.log(contatoCreate.getContatoId());
    }
}

Contato.js

Code:
class ContatoEntity{
    constructor(form) {
        this.form = form;
    }
    #contatoId='123';
    #contatoNome;
    #telefones = [];
    getContatoId(){
        return this.#contatoId;
    }
}
export {
    ContatoEntity,
}

<p>I have a small code which works fine on Chrome, Opera, Edge and Firefox. But it's not working on Safari.</p>
<p>I am a windows user so I not that familiar with Safari in order to find out what is wrong.</p>
<p>I was using this website as reference but I am not sure if it's updated or if maybe i could have misunderstood something. But I guess it suppose to work.</p>
<p><a href="https://caniuse.com/?search=javascript modules" rel="nofollow noreferrer">https://caniuse.com/?search=javascript modules</a></p>
<p>I am using apache and php</p>
<p>I have 3 files (index.php > index.js > Entities/Contato.js)</p>
<p>Tried to let it as simple as possible but let me know if you need anything else.</p>
<p>Thanks</p>
<p><strong>index.php</strong></p>
<pre><code><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

</head>
<body>

<!-- This one works just fine -->
<script>
console.log('init');
</script>

<!-- This one does not work -->
<script type="module" src="./js/index.js"></script>

</body>
</html>
</code></pre>
<p><strong>index.js</strong></p>
<pre><code>import {
ContatoEntity,
} from './Entities/Contato.js';

$(document).ready(()=>{
Main.ContatoCreate();
})


class Main {
static ContatoCreate(){
let contatoCreate = new ContatoEntity();
console.log(contatoCreate.getContatoId());
}
}
</code></pre>
<p><strong>Contato.js</strong></p>
<pre><code>class ContatoEntity{
constructor(form) {
this.form = form;
}
#contatoId='123';
#contatoNome;
#telefones = [];
getContatoId(){
return this.#contatoId;
}
}
export {
ContatoEntity,
}
</code></pre>
 

Latest posts

Top