Ember Fastboot / don't import node_modules Script

Question

I first want to point out I'm crossposting from here:https://github.com/ember-fastboot/ember-cli-fastboot/issues/621 So far the issue hasn't gained any traction so I'm opening it to the wider community.

I'm trying to make ember-cli-slick fastboot compliant. It uses slick.js from node_modules like so:

included: function(app) {
this._super.included(app);

app.import("node_modules/slick-carousel/slick/slick.js");

I'm attempting to get the treeforvendor working but not having much luck. I'm following the documentation here https://www.ember-fastboot.com/docs/addon-author-guide#third-party-dependencies but I suspect it's targetting bower rather than npm/node_modules.

treeForVendor(defaultTree) {        
    var browserVendorLib = new Funnel('node_modules/slick-carousel/slick/slick.js');    

    browserVendorLib = map(browserVendorLib, (content) => `if (typeof FastBoot === 'undefined') { ${content} }`);

    return new mergeTrees([defaultTree, browserVendorLib]);
  },

This results in the error:

Build Error (broccoli-persistent-filter:Mapper)

ENOTDIR: not a directory, scandir 'projectdir/tmp/broccoli_persistent_filtermapper-input_base_path-FOInixjr.tmp/'

I've also tried

  treeForVendor(defaultTree) {        
    var map = require("broccoli-stew").map;
    var Funnel = require("broccoli-funnel");
    const mergeTrees = require('broccoli-merge-trees');

    let tree=new Funnel('node_modules/slick-carousel/slick/', {
      destDir: 'slick-carousel',
      files: ['slick.js']
    })

    tree = map(tree, (content) => `if (typeof FastBoot === 'undefined') { ${content} }`);


    return new mergeTrees([defaultTree, tree]);
  },

This at least builds.. but then I get back to the Fastboot error

ReferenceError: jQuery is not defined at projectfolder/tmp/broccoli_merge_trees-output_path-8cGO0zCl.tmp/assets/node_modules/slick-carousel/slick/slick.js:25:1

I've created a clean and otherwise empty Ember addon project with just the import and treeforvendor functions to demonstrate the issue https://github.com/MrChriZ/ember-slicker

slick.js requires jQuery, so you are probably stuck just disabling your addon in fastboot. — Gaurav

Chris Nevill Chris Nevill · Accepted Answer · 2018-09-26T14:15:16

There was a couple of things I was missing that perhaps the addon guide could have been clearer on.

Firstly Funnel I think takes a directory path rather than a full file path. On top of this the path must be the complete file path. This was not immediately clear from the Fastboot Addon Guide.
So this looks something like this:

const assetDir = path.join(this.project.root, 'node_modules', 'slick-carousel', 'slick');
       var browserVendorLib = new Funnel(assetDir, {
         files: ['slick.js'],
         destDir: 'slick'
       });

What you can't do is

const assetDir = path.join(this.project.root, 'node_modules', 'slick-carousel', 'slick', 'slick.js);
var browserVendorLib = new Funnel(assetDir);

This throws up:

ENOTDIR: not a directory

I believe because funnel is expecting a directory path not a file path.

Secondly in the included hook Gaurav correctly pointed out on Github that the import statement needed to be changed to point at the vendors directory.

So the final solution for me was:

treeForVendor(defaultTree) {        
   var map = require("broccoli-stew").map;
   var Funnel = require("broccoli-funnel");
   const mergeTrees = require('broccoli-merge-trees');

   const assetDir = path.join(this.project.root, 'node_modules', 'slick-carousel', 'slick');
   var browserVendorLib = new Funnel(assetDir, {
     files: ['slick.js'],
     destDir: 'slick'
   });    

   browserVendorLib = map(browserVendorLib, (content) => `if (typeof FastBoot === 'undefined') { ${content} }`);

   return new mergeTrees([defaultTree, browserVendorLib]);
 },
 included: function(app) {
   this._super.included(app);

   app.import('node_modules' + '/slick-carousel/slick/slick.css');
   app.import('node_modules'+ '/slick-carousel/slick/slick-theme.css');
   app.import('node_modules' + '/slick-carousel/slick/fonts/slick.ttf', { destDir: 'assets/fonts' });
   app.import('node_modules' + '/slick-carousel/slick/fonts/slick.svg', { destDir: 'assets/fonts' });
   app.import('node_modules' + '/slick-carousel/slick/fonts/slick.eot', { destDir: 'assets/fonts' });
   app.import('node_modules' + '/slick-carousel/slick/fonts/slick.woff', { destDir: 'assets/fonts' });
   app.import('node_modules' + '/slick-carousel/slick/ajax-loader.gif', { destDir: 'assets' });

   // import the above library into vendor.js that was merged with the vendor trees. In browser the library will be eval'd and run
   // In fastboot, the library will not be eval'd
   app.import('vendor/slick/slick.js');
 }

Ember Fastboot / don't import node_modules Script

1 Answers