CODEWITHSUNDEEP
javascriptwebpack
Iannazzi
Iannazzi

Reputation: 1388

Webpack authoring libraries import errors with TypeError: xxx is not a constructor

I am having trouble importing a javascript package I wrote (and published to npm) into a new project.

I created an ES6 package and bundled it using webpack. Within the package I can import the library using the bundled file using a script tag,

<script src='../dist/awesome-table-dist.js'></script>

then new up the class like so:

let awesomeTable = new AwesomeTable.AwesomeTable('record');

Works like a charm! awesome-table

I pushed the package up to npm, now I want to bring it into a new project like so:

import AwesomeTable from '@iannazzi/awesome-table'

then

let awesomeTable = new AwesomeTable('record');

which is erroring: TypeError: _iannazzi_awesome_table__WEBPACK_IMPORTED_MODULE_0___default.a is not a constructor

Now that I am importing it to a new project I have tried a variety of ways new up the class, but seem completely stuck.

I can use the package by including the script again, but obviously I want to import so I can re-package: <script src='node_modules/@iannazzi/awesome-table/dist/awesome-table-dist.js'></script>

Here is the webpack configuration for the package:

var path = require('path');
const ExtractTextPlugin = require("extract-text-webpack-plugin");

const SRC_DIR = path.resolve(__dirname,'../src');
const DIST_DIR = path.resolve(__dirname, '../dist');

module.exports = {
    entry: {
        app: SRC_DIR + '/table/AwesomeTable.js'
    },
    output: {
        path: DIST_DIR,
        filename: 'awesome-table-dist.js',
        library: 'AwesomeTable',
        // libraryTarget: 'window'
    },
    module: {
        rules: [
            {
                test: /\.scss$/,
                use: ["style-loader", "css-loader", "sass-loader"],
            },
        ],
    },
    plugins: [
        new ExtractTextPlugin('style.css')
        //if you want to pass in options, you can do so:
        //new ExtractTextPlugin({
        //  filename: 'style.css'
        //})
    ]
};

Upvotes: 1

Views: 418

Answers (1)

felixmosh
felixmosh

Reputation: 35503

First of all, you need to expose your lib, you can do that via defining library & libraryTarget: 'umd' properties.

Second, it is not recommended to publish lib as a bundle. Think about that scenario, You lib is composed from several parts, but not all of them are mandatory. When you ship your lib a a bundle, you are forcing your users to download redundant extra code.

The best practice today is to transpile your code via Babel to be compatible es5 and commonjs as a module system. Recently, there is a trend to ship es6 modules in a separate folder, so that whenever your users will use bundles that supports tree-shaking, they will able to use it.

Upvotes: 2

Related Questions