4. MMM-Tabulator: How to port HTML JS imports to node JS imports? [solved]
MagicMirror² v2.4.1 is available! For more information about this release, check out this topic.
Please read the release notes carefully since this update requires adjustments to your Raspberry Pi configuration!

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

  • E

    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?

    0
    R
     1 Reply
  • E

    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?

    0
  • E

    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.

    0
  • R
    Module Developer

    @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.

    2
    E
     1 Reply
  • E

    @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.)

    1
    N
     1 Reply
  • N

    @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'
    1
    E
     1 Reply
  • E

    @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.

    0