When publishing NPM package I get an empty object my setup is (ES6,Babel,Webpack,React,Redux,Sagas)

Question

Maybe somebody can help me with this.

I try to publish 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 dealing with library publishing

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

My src/index.js file looks like this

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 looked at the following example and there everything is working.

strangely with my setup things don't work

In a different project when I install stewie-editor npm package and import exported classes from the package like so:

import { EditorFactory } from 'stewie-editor';

I get undefined. When I try to look at the contents of the whole package importing it like so:

import stewie from 'stewie-editor';

I get an empty Object.

Your help will be very appreciated.

Answer 1

The empty object is as a result of a missing keyword in your index.js file: default .

You can fix this by rewriting the index.js file to:

export default {
  EditorFactory,
  EditorComponent
}

Answer 2

Well I figured out what was the problem. Adding scss and .css in webpack entry point resulted in an empty object. So I removed them from entry point and added as imports inside my EditorComponent.js file. That fixed the issue. Everything got exported.