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.

    MMM-Tabulator: How to port HTML JS imports to node JS imports? [solved]

    Scheduled Pinned Locked Moved Troubleshooting
    7 Posts 3 Posters 3.6k Views 3 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.
    • E Offline
      E3V3A
      last edited by E3V3A

      I’m trying to correctly import and use the Tabulator imports (that work fine from my HTML file) but refuses to load in the JS file. The getScripts and getStyles seem completely blind to my ./node_modules.

      My code is here.

      	getScripts: function() {
      		return [
      /*			"modules/MMM-tabulator/node_modules/jquery/dist/jquery.min.js",
      			"node_modules/jquery-ui-dist/jquery-ui.min.js",
      			"node_modules/jquery.tabulator/dist/js/tabulator.js",
      */		];
      	},
      
      	getStyles: function () {
      		return [
      /*			"node_modules/jquery-ui-dist/jquery-ui.css",
      			"node_modules/jquery.tabulator/dist/css/tabulator.css",
      */			"MMM-Tabulator.css",
      		];
      },
      

      I’ve tried just about every path possible but I get some security errors. Including some tricks to manually import files.

      The resource from node_modules was blocked due to MIME type mismatch (X-Content-Type-Options: nosniff)
      

      Any idea what’s going on?

      BTW: I’m totally lost (and new to this)!
      BTW2: Is this even the right place in the forum to post this? Or should it be in development part?

      "Everything I do (here) is for free – altruism is the way!"
      MMM-FlightsAbove, MMM-Tabulator, MMM-Assistant (co-maintainer)

      R 1 Reply Last reply Reply Quote 0
      • E Offline
        E3V3A
        last edited by E3V3A

        From here:

        If the "nosniff" directive is received on a response received by a styleSheet reference, 
        Windows Internet Explorer will not load the "stylesheet" file unless the MIME type matches "text/css".
        
        If the "nosniff" directive is received on a response retrieved by a script reference, 
        Internet Explorer will not load the "script" file unless the MIME type matches one of the following values: 
        

        How do yo pass the correct MIME type in the MMM relevant node.js language?

        "Everything I do (here) is for free – altruism is the way!"
        MMM-FlightsAbove, MMM-Tabulator, MMM-Assistant (co-maintainer)

        1 Reply Last reply Reply Quote 0
        • E Offline
          E3V3A
          last edited by

          Is there really nobody who knows how to import a CSS stylesheet from a ./node_modules/ installed package?

          The package(s) in question are jquery, jquery-ui, and were installed with: npm install jquery --save in my module directory.

          "Everything I do (here) is for free – altruism is the way!"
          MMM-FlightsAbove, MMM-Tabulator, MMM-Assistant (co-maintainer)

          1 Reply Last reply Reply Quote 0
          • R Offline
            raywo Module Developer @E3V3A
            last edited by

            @E3V3A I don’t know whether that helps but you need to write this.file("node_modules/jquery-ui-dist/jquery-ui.min.js") in your getStyles and getScripts functions.

            E 1 Reply Last reply Reply Quote 2
            • E Offline
              E3V3A @raywo
              last edited by

              @raywo Hi! Yeah, that worked! Thank you! I was going really crazy here…

              Anything other than what’s shown below, results in an error as mentioned above.
              Apparently the only types of paths that work, are the following (including the out-commented ones):

                      getScripts: function() {
              //              return ["moment.js"];
                              return [
                                      this.file('node_modules/jquery/dist/jquery.min.js'),
                                      this.file('node_modules/jquery-ui-dist/jquery-ui.min.js'),
                                      this.file('node_modules/jquery.tabulator/dist/js/tabulator.js')
              //                      'modules/MMM-Tabulator/node_modules/jquery/dist/jquery.min.js',
              //                      'modules/MMM-Tabulator/node_modules/jquery-ui-dist/jquery-ui.min.js',
              //                      'modules/MMM-Tabulator/node_modules/jquery.tabulator/dist/js/tabulator.js'
                              ]
                      },
              
                      getStyles: function() {
                              return [
                                      this.file('node_modules/jquery-ui-dist/jquery-ui.css'),
                                      this.file('node_modules/jquery.tabulator/dist/css/tabulator.css'),
                                      "MMM-Tabulator.css"
                              ];
                      },
              
              

              That took considerable trial-and-error, as this is not at all apparent from the documentation. At least not how I interpret it. (I was clearly under the incredibly naive impression that MM would search the file tree in node_modules directory and elsewhere, looking for the file names specified.)

              "Everything I do (here) is for free – altruism is the way!"
              MMM-FlightsAbove, MMM-Tabulator, MMM-Assistant (co-maintainer)

              N 1 Reply Last reply Reply Quote 1
              • N Offline
                ninjabreadman @E3V3A
                last edited by

                @E3V3A These paths are relative to your module file, which is why this.file() is needed.

                I believe you could have alternately start with a slash, which makes the path relative to the server root:

                '/modules/MMM-Tabulator/node_modules/jquery/dist/jquery.min.js',
                '/modules/MMM-Tabulator/node_modules/jquery-ui-dist/jquery-ui.min.js',
                '/modules/MMM-Tabulator/node_modules/jquery.tabulator/dist/js/tabulator.js'
                

                Problem with config or JavaScript? Copy/paste it into JSHint.
                Check out the detailed walkthroughs on install, config, modules, etc.

                E 1 Reply Last reply Reply Quote 1
                • E Offline
                  E3V3A @ninjabreadman
                  last edited by

                  @ninjabreadman Thank you very much for trying to help. But I’m pretty sure I tried that as well…at some point, giving me a “double” path. (Perhaps a browser cache issue?).

                  Anyway, this is resolved, and I have a new problem of a completely different sort in this thread.

                  "Everything I do (here) is for free – altruism is the way!"
                  MMM-FlightsAbove, MMM-Tabulator, MMM-Assistant (co-maintainer)

                  1 Reply Last reply Reply Quote 0
                  • 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