Ember CLI Node Assets

0.2.2 · abandoned · verified Sun Apr 19

Ember CLI Node Assets is an Ember CLI addon designed to simplify the inclusion of stylesheets, images, and JavaScript assets directly from npm packages into Ember applications and other Ember addons. As of its last major update, v0.2.2, released in 2020, the package appears to be in an abandoned state with no recent maintenance or updates. Its primary function is to funnel specified files from an npm package into an Ember application's `vendor` (for `app.import` consumption) or `public` (for direct public access) directories during the build process. It differentiates itself by providing a consistent configuration API, handling npm package layout variations (npm 2 vs 3), and abstracting away direct interaction with Broccoli plugins, which are the underlying build tools for Ember CLI. It encourages a pattern of explicitly funneling assets rather than implicit imports, allowing for fine-grained control over asset placement and inclusion.

Common errors

```
File not found: vendor/my-package/some-file.js
```
cause The `nodeAssets` configuration for the specified package did not correctly funnel the file to the expected `destDir` within the `vendor` tree, or `app.import` path is incorrect.

fix Verify the `srcDir`, `destDir`, and `include` paths in your `nodeAssets` configuration for the package. Ensure the `app.import` path matches the funneled destination exactly.
```
Error: Path must be a string. Received type object.
```
cause An option passed to `broccoli-funnel` via `nodeAssets` configuration (e.g., `include`, `srcDir`, `destDir`) is not a string or array of strings as expected.

fix Inspect your `nodeAssets` configuration for the problematic package. Ensure all path-related options (like `include`, `srcDir`, `destDir`) are correctly formatted as strings or arrays of strings.
```
TypeError: Cannot read properties of undefined (reading 'nodeAssets')
```
cause The `nodeAssets` configuration was not correctly placed within the `options` object passed to `EmberApp` in `ember-cli-build.js`, or within the `module.exports.options` object for an addon's `index.js`.

fix Confirm that your `nodeAssets` object is a direct property of the `options` object passed to `EmberApp` for applications, or nested under `module.exports.options` for addons.
```
Error: dynamic configuration function for 'some-node-module' returned an invalid object. Expected an object with 'vendor' and/or 'public' keys.
```
cause A dynamic `nodeAssets` configuration function returned an object that does not conform to the expected structure (i.e., lacking `vendor` or `public` keys at the top level).

fix Ensure your dynamic configuration function returns a hash with `vendor` and/or `public` keys, each containing valid `broccoli-funnel` options for that target tree.

Warnings

breaking Upgrading to v0.2.0 impacts how addons included as transitive dependencies behave. Addon authors should review their asset inclusion strategy.
Fix: Review the new behavior documented for v0.2.0, especially regarding how assets are funneled and consumed when your addon is a transitive dependency. Reconfigure `nodeAssets` definitions as needed.
gotcha The `this` context for dynamic configuration functions was previously incorrect and was fixed in v0.2.0-beta.2. If you relied on an incorrect `this` value, your dynamic configurations may break or behave unexpectedly after upgrading.
Fix: Ensure that any dynamic configuration functions correctly use `this` to refer to the app or addon instance, as intended. The fix ensured `this` correctly refers to the addon or app instance.
gotcha Starting with v0.2.0-beta.1, documentation and recommended practice shifted towards explicit funneling of files into `vendor` and `public` trees, rather than relying on implicit imports. While older shorthand for importing specific files still works, it's now a funneling shortcut.
Fix: Adopt the recommended pattern of defining explicit `vendor` and `public` configurations with `srcDir`, `destDir`, and `include` options. Then, use `app.import` for assets placed in `vendor`.
deprecated The package `ember-cli-node-assets` appears to be abandoned, with no updates or commits since February 2020. It may not be compatible with newer versions of Ember CLI or Node.js, and potential security vulnerabilities will not be patched.
Fix: Consider migrating to alternative, actively maintained solutions for managing third-party assets in Ember, such as directly importing ES modules from `node_modules` where possible, or using build configuration for bundlers integrated into Ember CLI.

Install

npm install ember-cli-node-assets npm
yarn add ember-cli-node-assets yarn
pnpm add ember-cli-node-assets pnpm

Imports

nodeAssets Configuration
wrong:
```
import { nodeAssets } from 'ember-cli-node-assets';
```
correct:
```
let app = new EmberApp(defaults, {
  nodeAssets: { /* ... config ... */ }
});
```
This addon does not export JavaScript symbols for direct import. Its functionality is configured via the `nodeAssets` key within the `EmberApp` options in `ember-cli-build.js` for applications, or within the `options` hash of an addon's `index.js`.
app.import()
wrong:
```
import 'vendor/slick-carousel/slick.js';
```
correct:
```
app.import('vendor/slick-carousel/slick.js');
```
After configuring `ember-cli-node-assets` to funnel files into the `vendor` tree, developers use the standard Ember CLI `app.import()` method to explicitly include those assets in their build. This is not an import *from* `ember-cli-node-assets` but a usage pattern that relies on it.
Addon Configuration `options.nodeAssets`
wrong:
```
module.exports.nodeAssets = { /* ... */ };
```
correct:
```
module.exports = {
  name: 'my-addon',
  options: {
    nodeAssets: { /* ... config ... */ }
  }
};
```
When used within an Ember addon, `ember-cli-node-assets` is configured by placing the `nodeAssets` object within the `options` property of the addon's `module.exports` object in its `index.js` file.

Quickstart

This example demonstrates how to configure `ember-cli-node-assets` in an Ember application's `ember-cli-build.js` to funnel assets from the `slick-carousel` npm package into both the `vendor` and `public` trees, followed by `app.import` calls for vendor assets.

/* ember-cli-build.js for an Ember application */
const EmberApp = require('ember-cli/lib/broccoli/ember-app');

module.exports = function(defaults) {
  let app = new EmberApp(defaults, {
    nodeAssets: {
      'slick-carousel': {
        vendor: {
          srcDir: 'slick',
          destDir: 'slick-carousel',
          include: ['slick.js', 'slick.css', 'slick-theme.css']
        },
        public: {
          srcDir: 'slick',
          destDir: 'assets',
          include: ['ajax-loader.gif', 'fonts/*']
        }
      }
    }
  });

  // Import assets that were funneled into the vendor tree
  app.import('vendor/slick-carousel/slick.js');
  app.import('vendor/slick-carousel/slick.css');
  app.import('vendor/slick-carousel/slick-theme.css');

  return app;
};

view raw JSON →