Discovering an npm module within an ember-cli addon component

Question

Discovering an npm module within an ember-cli addon component

I recently encountered an issue while using ember-browserify to locate npm modules in my ember-cli applications - it seems to not function properly for ember-cli addons.

This leads me to wonder: Are there alternative methods for importing npm modules into an ember-cli addon?

Update:

Although I faced difficulties importing the npm module, I discovered that the specific module I needed was also available as a bower component. Therefore, I successfully installed it and imported it through the index.js file as shown below:

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

  app.import('bower_components/dropzone/dist/dropzone.js');
}

Using this approach resolved the issue. Unfortunately, importing npm modules directly from node_modules proved to be challenging. It's frustrating that incorporating npm modules into an ember-cli addon is so complicated.

javascript ember.js npm ember-cli

Answer 1

Answer №1

If you're looking to implement this functionality, ember-fetch has a solution available. The code may seem a bit complicated at first glance:

treeForVendor: function(tree) {

  // Determining the path for whatwg-fetch in node modules
  var fetchPath = require.resolve('whatwg-fetch');

  // Applying a utility function to expand it into a pattern
  var expandedFetchPath = expand(fetchPath);

  // Renaming all files in a tree with items matching the pattern
  var fetch = rename(find(expandedFetchPath), function(path) {
    return 'whatwg-fetch/fetch.js'
  });

  // Implementing a template for each file in the tree and then merging them
  return mergeTrees([
    new Template(fetch, templatePath, function variables(content) {
      return {
        moduleBody: content
      };
    })
  ]);
},

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

  // Importing the created tree from the treeForVendor function
  app.import('vendor/whatwg-fetch/fetch.js', {
    exports: {
      default: [
        'default',
        'Headers',
        'Request',
        'Response'
      ]
    }
  });
}

Extracted from https://github.com/stefanpenner/ember-fetch/blob/master/index.js

Hopefully, this explanation aids your understanding.

Answer 2

If you're looking to implement this functionality, ember-fetch has a solution available. The code may seem a bit complicated at first glance:

treeForVendor: function(tree) {

  // Determining the path for whatwg-fetch in node modules
  var fetchPath = require.resolve('whatwg-fetch');

  // Applying a utility function to expand it into a pattern
  var expandedFetchPath = expand(fetchPath);

  // Renaming all files in a tree with items matching the pattern
  var fetch = rename(find(expandedFetchPath), function(path) {
    return 'whatwg-fetch/fetch.js'
  });

  // Implementing a template for each file in the tree and then merging them
  return mergeTrees([
    new Template(fetch, templatePath, function variables(content) {
      return {
        moduleBody: content
      };
    })
  ]);
},

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

  // Importing the created tree from the treeForVendor function
  app.import('vendor/whatwg-fetch/fetch.js', {
    exports: {
      default: [
        'default',
        'Headers',
        'Request',
        'Response'
      ]
    }
  });
}

Extracted from https://github.com/stefanpenner/ember-fetch/blob/master/index.js

Hopefully, this explanation aids your understanding.

Answer 3

Answer №2

To implement the addon, remember to include the import statement for the app/ version of the object (which typically only exports the object).

In the applications that utilize the addon, make sure to install both ember-browserify and the required npm module.

For instance, in the app/models/user.js file within an addon:

import TimezoneDetect from 'npm:jstimezonedetect';

export { default } from 'common/models/user';

Refer to https://github.com/ef4/ember-browserify#using-ember-browserify-in-addons

Answer 4

To implement the addon, remember to include the import statement for the app/ version of the object (which typically only exports the object).

In the applications that utilize the addon, make sure to install both ember-browserify and the required npm module.

For instance, in the app/models/user.js file within an addon:

import TimezoneDetect from 'npm:jstimezonedetect';

export { default } from 'common/models/user';

Refer to https://github.com/ef4/ember-browserify#using-ember-browserify-in-addons

Discovering an npm module within an ember-cli addon component

Answer №1

Answer №2

Similar questions

Explain the concept of render hijacking in react technology

The issue with angular JavaScript in the child component is causing the left side navigation dropdown to malfunction

Different ways to split up information on the client side into separate "pages"

Develop a simple application using the MEAN stack framework

Analyzing the attributes of an array object in JavaScript

The NPM Install process seems to be skipping certain files that were successfully installed in the past

Plugin for managing responses other than 200, 301, or 302 in forms

Stop zombie.js from loading exclusively third-party resources

The JScolor Color Picker has a slight misalignment

Loading JSON data from a file in an AngularJS service

Encountering Laravel npm installation warnings with npm showing deprecated graceful-fs notifications

The Axios GET request was not functioning properly after attempting to use Axios stream.on("data")

Accessing a Variable in one JavaScript File from Another JavaScript File

Is it possible to integrate semantic-release with Jenkins CI?

What is the process for adding an item to an object?

Content briefly appears and then vanishes with the use of ng-if

Methods to maintain the select2 dropdown event open while interacting with another select2 dropdown

The error message "Unable to retrieve property 'commands' of undefined (discord.js)" indicates that the specified property is not defined

"Convert a date string to a date object using the verbose moment date

I'm looking for a method in JavaScript that can search through my XML file to locate specific attributes and return the entire parent element containing that attribute. Can anyone help with