*.default is not a constructor, with a imported js plugin

问题

I tried to create a simple form validation and registered this via yarn link in a example project to test the set up. But it absolutely doesn't work and I have no idea how to continue.

export default class Proofr {
  constructor() {
    console.log('test');
  }
}

This "script" is then generated by webpack, with eslint-loader and babel-loader (presets env & stage-0).

So it shouldn't do much more than just for fun logging a message. But in when i try to call new Proofr() it tells me following:

 form.js:25 Uncaught TypeError: _proofr2.default is not a constructor

But if it is not a constructor what is ithen? It is a empty object, at least this is what the crome dev tools say. I import proofr which is linked via yarn link with my project in a js file.

import Proofr from 'proofr';

import PinguComponent from '../../assets/js/helpers/PinguComponent';

class Form extends PinguComponent {
  constructor(el) {
    const defaultOpts = {
      classes: {
        dom: {},
        state: {},
      },
      customEvents: {},
    };

    const defaultData = {};

    super(el, defaultOpts, defaultData);

    new Proofr();

    this.log('Form loaded');
  }
}

export default Form;

So am at the end of my knowledge, maybe someone sees the most possibly very small typo. Both repositories use the same babelrc so they use the same presets.

Here the by webpack and babel generated file for proofr

/******/ (function(modules) { // webpackBootstrap
/******/    // The module cache
/******/    var installedModules = {};
/******/
/******/    // The require function
/******/    function __webpack_require__(moduleId) {
/******/
/******/        // Check if module is in cache
/******/        if(installedModules[moduleId]) {
/******/            return installedModules[moduleId].exports;
/******/        }
/******/        // Create a new module (and put it into the cache)
/******/        var module = installedModules[moduleId] = {
/******/            i: moduleId,
/******/            l: false,
/******/            exports: {}
/******/        };
/******/
/******/        // Execute the module function
/******/        modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/        // Flag the module as loaded
/******/        module.l = true;
/******/
/******/        // Return the exports of the module
/******/        return module.exports;
/******/    }
/******/
/******/
/******/    // expose the modules object (__webpack_modules__)
/******/    __webpack_require__.m = modules;
/******/
/******/    // expose the module cache
/******/    __webpack_require__.c = installedModules;
/******/
/******/    // define getter function for harmony exports
/******/    __webpack_require__.d = function(exports, name, getter) {
/******/        if(!__webpack_require__.o(exports, name)) {
/******/            Object.defineProperty(exports, name, {
/******/                configurable: false,
/******/                enumerable: true,
/******/                get: getter
/******/            });
/******/        }
/******/    };
/******/
/******/    // getDefaultExport function for compatibility with non-harmony modules
/******/    __webpack_require__.n = function(module) {
/******/        var getter = module && module.__esModule ?
/******/            function getDefault() { return module['default']; } :
/******/            function getModuleExports() { return module; };
/******/        __webpack_require__.d(getter, 'a', getter);
/******/        return getter;
/******/    };
/******/
/******/    // Object.prototype.hasOwnProperty.call
/******/    __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/    // __webpack_public_path__
/******/    __webpack_require__.p = "";
/******/
/******/    // Load entry module and return exports
/******/    return __webpack_require__(__webpack_require__.s = 0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ (function(module, exports, __webpack_require__) {

"use strict";


Object.defineProperty(exports, "__esModule", {
  value: true
});

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

/**
 * Proofr a lightweight js tool
 */

var Proofr = function Proofr() {
  _classCallCheck(this, Proofr);

  console.log('test');
};

exports.default = Proofr;

/***/ })
/******/ ]);

If you want to see it by yourself you can add it via npm install proofr (or yarn proofr)

回答1:

Change the webpack build configuration of your proofr library by setting output.libraryTarget to umd:

output: {
  filename: '[name]',
  path: path.resolve(__dirname, '../dist'),
  libraryTarget: "umd"
},

See https://webpack.js.org/configuration/output/#output-librarytarget for more options.

I tested this by rebuilding proofr with npm run start and imported it in a node.js script:

var proofr = require('proofr');
console.log(proofr);

Without output.libraryTarget: "umd":

$ node index.js
{}

With it:

$ node index.js
{ default: [Function: Proofr] }

来源：https://stackoverflow.com/questions/47219943/default-is-not-a-constructor-with-a-imported-js-plugin

标签

javascript

Webpack

ecmascript-6

es6-class

babel-loader