MagicMirror Forum
    • Recent
    • Tags
    • Unsolved
    • Solved
    • MagicMirror² Repository
    • Documentation
    • 3rd-Party-Modules
    • Donate
    • Discord
    • Register
    • Login
    A New Chapter for MagicMirror: The Community Takes the Lead
    Read the statement by Michael Teeuw here.

    Best practice for `import` ESM in MM module?

    Scheduled Pinned Locked Moved Unsolved Development
    3 Posts 2 Posters 739 Views 2 Watching
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • M Offline
      MMRIZE
      last edited by MMRIZE

      Hey guys,
      I have a small question about development.

      When you have to import ESM into your module, how you can do that?

      This is my way.

      start: function() {
        this._domCreated = null
        this._modules = {}
        let _imports = []
        let _domReady = new Promise((resolve, reject) => {
          this._domCreated = resolve
        })
        _imports.push(new Promise((resolve, reject) => {
          import('/' + this.file('something.mjs')).then(({ moduleA }) => {
            this._modules.moduleA = moduleA
          })
        }))
      
        Promise.allSettled([..._imports, _domReady]).then((result) => {
          console.log('All ESM modules and DOM are readied. Now I can do anything...')
          this._modules.moduleA.doSomeInitializing()
        })
      
      }
      
      notificationReceived: function(notification, payload, sender) {
        if (notification === 'DOM_OBJECTS_CREATED') {
          this._domCreated()
        }
      }
      

      But I’m not sure this is the best way. Is there any different approach?

      S 1 Reply Last reply Reply Quote 0
      • S Offline
        sdetweil @MMRIZE
        last edited by sdetweil

        @mmrize u cannot read files directly in browser.

        u can load them via web server, but I don’t know how u ‘import’ them. u would have to inject script like

        <script src=
        

        tag

        looks like adding type=module
        https://www.sitepoint.com/using-es-modules/

        or getScripts in mm module name.js

        Screenshot_20211019-143628_Chrome.jpg

        but still loaded from server url

        Sam

        How to add modules

        learning how to use browser developers window for css changes

        M 1 Reply Last reply Reply Quote 0
        • M Offline
          MMRIZE @sdetweil
          last edited by MMRIZE

          @sdetweil

          1. Modern browsers can directly import ESM through JS regardless it exists locally or externally. . (Anyway, the above code works really.)
          2. Loading ESM via <script type="module">tag will probably be the one way but It will have a global namespace scope. I’m afraid of the risks of collision among MM modules that might be using the same namespace.
          3. getScripts() doesn’t support script type. So some codes for injecting proper script tag is needed by the developer himself,
          4. To load ESM with MM-module-level scoping, using import() and binding the namespace to the MM module would be possible. however, there will be some pitfalls, import() is an asynchronous function. To prevent referencing unloaded ES modules or to avoid handling of DOM by ES Modules before DOM is created, so some tricks might be needed to confirm everything is ready. (Above my code is that.).
          5. So I’m just seeking another or better way if exists.
          1 Reply Last reply Reply Quote 0
          • M MMRIZE referenced this topic on
          • 1 / 1
          • First post
            Last post
          Enjoying MagicMirror? Please consider a donation!
          MagicMirror created by Michael Teeuw.
          Forum managed by Sam, technical setup by Karsten.
          This forum is using NodeBB as its core | Contributors
          Contact | Privacy Policy