After attempting to publish my NPM package, I encountered an issue where I received an empty object. This occurred despite utilizing a setup that includes ES6, Babel,

Is there anyone out there who can assist me with this issue?

I am attempting to publish an npm package with the following configuration:

webpack:

   production: {
    entry: [
      './src',
      './src/app.scss',
      'draft-js/dist/Draft.css'
    ],
    devtool: "source-map",
    output: {
      path: path.join(__dirname, 'lib'),
      filename: 'stewie-editor.js',
      library: 'stewie-editor',
      libraryTarget: 'umd',
      umdNamedDefine: true
    }
  },

package.json section for library publishing

  "main": "lib/stewie-editor.js",
  "files": [
    "lib",
    "src"
  ],

The content of my src/index.js file is as follows:

import EditorComponent from 'EditorComponent';
import EditorFactory from 'EditorFactory';

export {
  EditorFactory,
  EditorComponent
}

.babelrc

{
  "presets": ["es2015", "stage-2", "react"],
  "plugins": ["babel-plugin-add-module-exports"],
  "env": {
    "test": {
      "plugins": [
        ["css-modules-transform", {
            "generateScopedName": "[name]__[local]",
            "extensions": [".css", ".scss"]
        }]
      ]
    },
    "dev": {
      "plugins": [["react-transform", {
        "transforms": [{
          "transform": "react-transform-hmr",
          "imports": ["react"],
          "locals": ["module"]
        }]
      }]]
    }
  }
}

I have checked this example where everything works fine.

However, in my current setup, things are not functioning correctly.

In another project, when I install the stewie-editor npm package and import the exported classes like this:

import { EditorFactory } from 'stewie-editor';

I receive 'undefined'. When I try to inspect the whole package by importing it like this:

import stewie from 'stewie-editor';

I get an empty Object.

Any assistance or guidance on this matter would be greatly appreciated.

Answer №1

The absence of content within the object is due to a lack of the keyword in your index.js script: default.

To address this issue, you can rectify the index.js script by the following changes:

export default {
  EditorFactory,
  EditorComponent
}

Answer №2

After investigating, I identified the issue. Including scss and .css in the webpack entry point caused an empty object to be generated. To resolve this, I removed them from the entry point and instead imported them inside my EditorComponent.js file. This solution successfully resolved the problem and all components were successfully exported.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is it possible to update the variable value in one controller from another controller after an http.get request has been made

I have encountered an issue with updating a variable from one controller to another using a service. Despite my efforts, the variable is not being updated. The goal is to have the variable $scope.names in controller 'select' update in controller ...

Error in NextJS group routing compilation: "Path is neither a posix nor a windows path"

Currently, I am learning Next.js by taking their online course at https://nextjs.org/learn/dashboard-app/streaming. During the process of creating a folder named (overview) within my project structure, I encountered an error while compiling: "Uncaugh ...

How to prioritize indices when querying multiple indexes in Elasticsearch?

Utilizing the Elasticsearch multi index API, I am able to query across multiple indices. However, it is important for me to prioritize my queries. As an illustration, when querying in the indices index1 and index2, the syntax would look like: /index1,ind ...

Searching within a container using jQuery's `find` method can sometimes cause jQuery to lose control

I am trying to extract information from an input field within a table in a specific row. Here is the code I am using: var myElements = $('#myTable tbody').find('tr'); console.log(myElements); This correctly displays the items in the ...

Utilizing jQuery and Isotope for intricate filtering

My isotope instance contains elements with multiple parameters, as shown below: <element data-a="1 2 3 4 5" data-b="1 2 3 4 5" data-c="1 2 3 4 5" Filtering for an element that has A1, B2, and C3 is straightforward: .isotope({ filter: '[data-a~=1 ...

Ways to prevent other users from clicking or modifying a particular row

I have a data table in my project that will be accessed by multiple users simultaneously. My requirement is that once a row is selected and edited by one user, it should become unclickable for other users who are also viewing the same page or data table. ...

After receiving the go-ahead from JavaScript, I am planning on integrating PHP into my project. I have come across some recommendations

Looking for assistance with AJAX functionality on a website. Specifically, users should be prompted to confirm a purchase before completing it. If they confirm, the purchase goes through; if they decline, it does not. Originally considered using PHP within ...

Tips for efficiently loading data into a vuex module only when it is required and addressing issues with async/await functionality

Is there a method to load all the data for a Vuex store once and only load it when necessary? I believe there is, but I am having trouble implementing it. I'm not sure if it's due to my misunderstanding of Vuex or Async/Await in Javascript promi ...

What is the best way to organize a table with multiple state variables using nested loops?

What is the best way to display multiple variables in a table using a loop, such as i,j,k? this.state = { materials: ['m1', 'm2'], quantity: ['2', '4'], unitPrice : ['12&apo ...

Setting up a CentOs Linux environment to host and run a node.js server

Just installed node.js on my new VPS server. I have written a basic script called "server.js" and it is currently running on port 8080. The location of the script is in the "var/www/html/" directory. However, whenever I try to access my domain, it only dis ...

What is the correct way to transform an Error object to a string in Node.js?

Every time I input a duplicate entry in mysql, this error pops up. { [Error: ER_DUP_ENTRY: Duplicate entry '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="35465458455950755258545c591b-565a58">[email protected]< ...

Vuetify - Implementing a search feature in a table that automatically navigates to the matching row

Currently, I am working with 2 Vuetify data tables that do not have pagination enabled. Each row in the second table corresponds to exactly one parent in the first table. My goal is to be able to click on an entry in the second table and have it automati ...

Monitor the closure of a programmatically opened tab by the user

Currently, I am in the process of developing a web application using Angular 11 that interacts with the msgraph API to facilitate file uploads to either onedrive or sharepoint, and subsequently opens the uploaded file in the Office online editor. Although ...

Step-by-step guide to adding products to your Supabase shopping cart

I have managed to insert a row into the "order" table with user information. Now, I want to individually add item details to a separate table named "order_storeItems" to create a relationship between the order and storeItems tables. I attempted using Pro ...

Leveraging Scrapy/Selenium for populating fields and conducting searches on LinkedIn's advanced search page

Discover the URL for LinkedIn's advanced search feature: In my attempt to complete fields and submit a form on the LinkedIn advanced search page using Selenium with Python, I encountered a challenge. Whenever I try typing in information for fields l ...

Node.js can browse through directories to access files, rather than relying on a specific

Just dipping my toes into the world of nodejs, I attempted to create a basic server on a linux machine. Strangely, when I navigate to the URL, I am able to see all the files in the folder. To aid my learning process, I've been creating separate folder ...

creating images using express.js

Exploring the world of node.js and express.js is an exciting journey for me as a newcomer. I've been working on upgrading my front-end project with these technologies, and everything seems to be falling into place perfectly except for one roadblock - ...

What is the best method to reset the chosen option in a dynamic select dropdown using React?

I have a form set up with a Select dropdown that is populated dynamically from the server. The issue I'm facing is that after selecting an option from the dropdown and then saving or canceling the form, the selected value remains in the field when I ...

What measures can be taken to prevent the reloading of a subfolder within the same parent in the Fuel

var DataSourceTree = function (options) { this.source = options.source; } DataSourceTree.prototype = { data: function (options, callback) { var self = this; var ...

Is it possible for jquery to run an entire HTML file using ajax?

Based on information from a discussion on Stack Overflow, it seems that I can utilize the jquery getScript() method to run a remote JavaScript file loaded via Ajax. However, in my specific scenario, the script file is located within an HTML file. Is ther ...