I'm making a website to learn PHP and Javascript/JQuery, i don't have much experience yet and i'm trying to understand what's the best structure to implement

PHP creates an array of strings 
i can access the array from index.php via json\_encode
then i want to send the array to a function in a class which is in a .mjs file
the problem is that in the index.php file, by the *script* tags i can't import the module, and if i use *script type="module"* i can use the import 
but i get this error:

*Failed to load module script: The server responded with a non-JavaScript MIME type of ""* in main.mjs::1

the MDN reference the mjs extension is used to prevent that.
that's why i'm stuck.

server directory looks like this:

* index.php
* js/main.mjs
* js/index.mjs

Code snippets:

**index.php**

```
    <head>
      <meta charset="utf-8">
      <title>Website</title>

      <link rel="stylesheet" type="text/css" href="style.css">
      <script src="js/jquery-3.4.1.slim.min.js"></script>
      <script src="js/main.mjs" type="module"></script>

      <script type="module">

        import {start_index} from "./js/main.mjs";
        initialize();

        function initialize()
        {
          var arr = <?php echo json_encode($images_arr); ?>;
          start_index(arr);
        }

      </script>

    </head>

```

**main.mjs**

```
    function start_index(arr)
    {
      import {gallery_manager} from './index.mjs';
      var gallery_mngr = new gallery_manager();
      gallery_mngr.initialize(arr);
    }

    export {start_index};

```

**index.mjs**

```
    class gallery_manager
    {
      constructor(){}

      var images = "";
      var placeholder = "../images/common/placeholder.png";

      public function initialize(arr)
      {
        images = arr;
        alert(images[0]);
      }

      function switchByTimer()
      {

      }

      function switchImage(new_image, direction)
      {

      }
    }

    export {gallery_manager};

```