[TypeError: Class constructors cannot be invoked without 'new'] when using Babel about camo

[savoygu]

Just exclude transform-es2015-classes is ok for me

presets: [
    ["env", { exclude: ["transform-es2015-classes"] }]
]

[TroyAlford]

For anyone else running into this issue - I solved it by doing the following:

package.json

"scripts": {
  "prebuild": "babel node_modules/camo/lib --out-dir src/lib/camo",
  "build": "<build script here>"
}

document files

import Document from '@/lib/camo/document'
// ^^ instead of import { Document } from 'camo'

Now every time I run build, prebuild automatically dumps out a transpiled copy of camo into my src/lib/camo dir - and I reference the transpiled files directly. This avoids needing babel-preset-camo or putting anything particularly special in my .babelrc which conflicts with my other ES6-enabled modules.

[scottwrobinson]

Hi Ryan,

Which line is causing that error?

Looking at your code, I do see one problem with how you're creating documents. You're creating a new Site document with new Site(), but Camo objects need to be created with the static .create() function, like this:

const MA = Site.create({
  name: 'Mass',
  contacts: [
    {
      name: 'One Guy'
    },
    {
      name: 'Some Dude'
    }
  ]
});

Hope this helps!

[resistdesign]

@scottwrobinson Wow, I was really thinking that would be it, but I tried exactly that and I still get the same error :P

[tombatossals]

Hi, we have encountered the same issue in our project, finally have solved it transpiling camo, it seems that there's some kind of conflict extending an ES6 class when your ES6 code has been transpiled previously. Anyway, we have solved it this way:

$ cd node_modules/camo
$ mv lib lib-es6
$ babel lib-es6 --out-dir lib

This is a temporary patch, but has allowed us to continue our development with "camo". Anyone think is there a better way to solve this issue?

BTW, camo is a really great project, thanks for your work.

[niftylettuce]

I have the same issue.

This project has poorly written usage of model vs Model class definitions. new Model should return this.create automatically I'd think? Why would we call new Model().create .. that's just odd.

[niftylettuce]

@scottwrobinson Nevermind, I now see the benefit of static per http://odetocode.com/blogs/scott/archive/2015/02/02/static-members-in-es6.aspx. Very cool here.

[niftylettuce]

Eh, actually something is wrong... You can't use babel-node with your code.

let user = new UserModel().create(); // does not work; shows below err
let user = UserModel.create(); // does not work; shows below err

The readme suggests you can do the above UserModel.create() however this does not work.

This is my user model, which I am importing with import UserModel from '../path/to/model';.

import { Document } from 'camo';

export default class UserModel extends Document {

  constructor() {
    super();
    this.name = {
      type: String,
      required: true
    };
    this.created_at = {
      type: Date,
      default: Date.now
    };
  }

  static collectionName() {
    return 'users';
  }

  preSave() {
    this.updated_at = new Date();
  }

}

And here's the error

TypeError: Class constructors cannot be invoked without 'new': Class constructors cannot be invoked without 'new'
    at UserModel.Document (/Users/bazfoo/Public/foobar/node_modules/camo/lib/document.js:14:13)
    at new UserModel (user.js:4:31)
    at _callee2$ (user.js:20:18)
    at tryCatch (/Users/bazfoo/Public/foobar/node_modules/babel-regenerator-runtime/runtime.js:61:40)
    at GeneratorFunctionPrototype.invoke [as _invoke] (/Users/bazfoo/Public/foobar/node_modules/babel-regenerator-runtime/runtime.js:329:22)
    at GeneratorFunctionPrototype.prototype.(anonymous function) [as next] (/Users/bazfoo/Public/foobar/node_modules/babel-regenerator-runtime/runtime.js:94:21)
    at step (/Users/bazfoo/Public/foobar/src/controllers/user.js:16:191)
    at /Users/bazfoo/Public/foobar/src/controllers/user.js:16:423
    at new Promise (/Users/bazfoo/Public/foobar/node_modules/core-js/modules/es6.promise.js:197:7)
    at /Users/bazfoo/Public/foobar/src/controllers/user.js:16:99
    at create (user.js:27:6)
    at dispatch (/Users/bazfoo/Public/foobar/node_modules/koa-compose/index.js:41:32)
    at next (/Users/bazfoo/Public/foobar/node_modules/koa-compose/index.js:42:18)
    at /Users/bazfoo/Public/foobar/node_modules/koa-router/lib/router.js:321:16
    at dispatch (/Users/bazfoo/Public/foobar/node_modules/koa-compose/index.js:41:32)
    at next (/Users/bazfoo/Public/foobar/node_modules/koa-compose/index.js:42:18)

[niftylettuce]

http://stackoverflow.com/a/32982156

[niftylettuce]

Overall, the lack of updates and maintenance to something as core as a DB ODM, signifies that camo is just not ready for production. Looking through the codebase here, it's really organized.

[scottwrobinson]

Hi all,

If you're using babel-register then another alternative to @tombatossals's workaround is to use this:

require("babel-register")({
  // This will override `node_modules` ignoring and transform all dependencies, including camo
  ignore: false
});

But then this brings up some errors you have to fix in the Camo dependencies.

Even better, add something like this to your .babelrc file:

{
  "only": ["src/", "node_modules/camo"]
}

This should transform only your code and the Camo code, which worked well for me when testing it on @resistdesign's code from above.

I'm still familiarizing myself with Babel, so hopefully I'll find a better solution soon. Although, looking at the SO link provided by @niftylettuce, it may be out of my hands. One idea, however, is to make all of Camo's internal classes in to prototypes and see if ES6 classes can extend those. If anyone knows if this works, please let me know.

Suggestions and feedback are welcome! Thanks everyone!

[rschwabco]

@scottwrobinson - your first suggestion could cause other modules (which need to be ignored) to break the entire build. In addition, I tried to use the second solution you mention without much success.

[ThomasWilliams]

I had struggled with this issue as well, but the stackoverflow answer posted above helped me figure it out. A transpiled class may not extend a native class. So if you are using babel, you must make sure that you do not include the transform-es2015-classes plugin in your .babelrc. This is included in the es2015 preset as well, so if there are other plugins in the es2015 preset that you'd like to use, you'll need to add them individually to avoid including the classes plugin. Once I replaced that preset with the plugins I needed, I stopped having this issue.

[scottwrobinson]

@ThomasWilliams yes, you're right about excluding transform-es2015-classes.
What I might end up doing is create my own "camo plugin" for Babel. It
would be same as es2015, just without the classes.

In addition to this, I'll look in to other options that don't require extra
plugins.

@roieki - that didn't work for you? Worked for me, granted it was on a
small project. I'll look in to it more.

Thanks!

Scott

I had struggled with this issue as well, but the stackoverflow answer
posted above helped me figure it out. A transpiled class may not extend a
native class. So if you are using babel, you must make sure that you do not
include the transform-es2015-classes plugin in your .babelrc. This is
included in the es2015 preset as well, so if there are other plugins in the
es2015 preset that you'd like to use, you'll need to add them individually
to avoid including the classes plugin. Once I replaced that preset with the
plugins I needed, I stopped having this issue.

—
Reply to this email directly or view it on GitHub
#17 (comment).

[scottwrobinson]

Okay, so I finally got around to creating a Babel preset that's specific to Camo, called babel-preset-camo. All I did was remove the babel-plugin-transform-es2015-classes plugin and it seems to work great.

@resistdesign, the code in your original post works with this new preset (after fixing its issues and adding the stage-0 preset). See this gist for the full example.

If you want to try it out, just do:

$ npm install --save-dev babel-preset-camo

And add this to your .babelrc:

{
  "presets": ["camo"]
}

And finally, a quick example of some es2015 features with Camo:

'use strict';

import { connect, Document } from 'camo';

class Person extends Document {
    constructor () {
        super();

        this.fullName = String;
    }
}

connect('nedb://memory').then(db => {
    const billy = Person.create({
        ['full' + 'Name']: 'Billy Bob'
    });

    billy.save().then(data => {
        console.log('Saved people...');
        return Person.loadOne();
    }).then(p => {
        console.log(`See? We found ${billy.fullName}!`);
    });
});

From my limited testing it seems to work well and doesn't require any hacks (like "only": ["src/", "node_modules/camo"], ignore, etc). Let me know if you find any problems with this, or have any ideas to improve it.

I'll leave the issue open for a bit so you all can leave feedback.

Thanks everyone!

[resistdesign]

Sorry, I haven't had time to work with this lately. Thank you for the preset :)

[tom3012]

Hey, thank you for the preset, but it doesn't work for me: It seems that just removing babel-plugin-transform-es2015-classes isn't an option if you are using react js. One of the most frequently errors:

Warning: setState(...): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op.

So, if I use babel-preset-camo camo works, but react components are broken. If I use es2015 my react components are working, but I can't use camo anymore. Also the other workarounds doesn't work...

---

Update: Ok, now it's working. I don't know if this is more a problem in react components... My react components have jsx as file extension and the other modules (like api...) have js as file extension. Eventually I have set the camo preset for js and es2015 preset for jsx in my webpack config and it works.

[DecentM]

In case anyone else finds this and using the camo preset doesn't work, here's my .babelrc which works with babel-preset-env and babel-preset-stage-3 without this issue:

{
  "presets": [
    [
      "env", {
        "targets": {
          "node": "5.12.0"
        }
      }
    ],
    "stage-3"
  ]
}

Thanks for the project Scott!