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

Upgrade to a more stable configuration version for Nodemailer as the current configuration is not supported. Consider down

Automatically browserify files whenever there is a change using tsc -w

Switch out the content within a div upon selection

Swap out a div identifier and reload the page without a full page refresh

Extracting information from JSON using jQuery

Running a cfquery in a cfc and passing parameters through AJAX

Adding a JavaScript widget to a WordPress page

Showcasing Portfolio Work in a User-Friendly Mobile Design

Locating the save directory with fileSystem API

The execution of the npm command was unsuccessful due to the dashlane/cli issue

What is the best way to transform a standard select input into a React select with multiple options?

Determine if a certain value is present in a JSON data structure

I downloaded NPM using PIP, however I am receiving the error message "npm: command not found"

How to Fetch Byte Image with Ajax and Display it on the Client Side in ASP.Net MVC

Encountered issue while converting half of the string array to JSON using JavaScript

What is the best way to retrieve the name of a Meteor package from within the

Resolving redundancy in Typescript Material-UI Table codebases

Do we need to use the render method in ReactJs?

I keep encountering the "Error: EACCES, mkdir" message every time I attempt to install a new package using bower

The absence of the 'Access-Control-Allow-Origin' CORS header was noticed in the response from the Wikipedia API