• Recent
  • Tags
  • Unsolved
  • Solved
  • MagicMirror² Repository
  • Documentation
  • 3rd-Party-Modules
  • Donate
  • Discord
  • Register
  • Login
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.7k 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 Feb 19, 2018, 2:04 PM

    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 Feb 19, 2018, 2:59 PM

      @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 Feb 19, 2018, 4:26 PM Reply Quote 2
      • E Offline
        E3V3A @raywo
        last edited by Feb 19, 2018, 4:26 PM

        @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 Feb 19, 2018, 6:23 PM Reply Quote 1
        • N Offline
          ninjabreadman @E3V3A
          last edited by Feb 19, 2018, 6:23 PM

          @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 Feb 19, 2018, 8:22 PM Reply Quote 1
          • E Offline
            E3V3A @ninjabreadman
            last edited by Feb 19, 2018, 8:22 PM

            @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
            1 / 1
            • First post
              7/7
              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