[QUESTION] Can't use this library

[joaoeduardo]

This lib needs some Babel plugin? I tried to replicate the examples, but I get this error:

Uncaught TypeError: Class constructor ServiceProvider cannot be invoked without 'new'

I am using this template:

https://github.com/vuejs-templates/webpack-simple

[aedart]

Hi Joaoeduardo

This package does make use of Babel presents. However, I do normally not see this kind of issue. Can you show an example of how to are trying to init the your service provider?

[aedart]

Anyways, I tend yo make use of Laravel Mix (Outside Laravel projects) and it takes care of most of my needs. Yet, without knowing the context of how you try to use it, I'm not too sure about the issue...

[joaoeduardo]

Here is an example:

import IoC from '@aedart/js-ioc';
import ServiceProvider from '@aedart/js-service-provider';

class Box
{
}

class MyBoxServiceProvider extends ServiceProvider
{
    register()
    {
        this.ioc.bind('my-box', (ioc, params) => {
            return new Box();
        });
    }

    boot()
    {
    }
}

let provider = new MyBoxServiceProvider(IoC);

provider.register();

provider.boot();

I see that you used some packages that vuejs webpack simple template doesn't have:

babel-plugin-external-helpers
babel-plugin-transform-builtin-extend

I installed them and updated .babelrs but it didn't work.

[joaoeduardo]

I tried with a stand alone Laravel Mix installation, but I get same error. I will try with a full Laravel project.

[aedart]

Hmmm... By all accounts, you example looks 100% correct. Thus, it must have something to do with the babel. Nevertheless, while I'm testing using Rollup, I use Laravel mix, as mentioned - meaning that it's Webpack.

The .babelrc that I use has the following content:

{
    "presets": [
        ["env", {
            "targets": {
                "chrome": 58,
                "firefox": 53,
                "uglify": false
            },
            "modules": false
        }]
    ]
}

This should correspond to the babel-preset-env. Additionally, this does not correspond to the babel rc file, which Laravel Mix provides. Therefore, I see that in my mix-file, I have ensured only to use my version the .babelrc, via the following:

mix.options({
    // Disable Uglifier JS
    uglify: false,

    // Ensure that root level babelrc file is the ONLY
    // thing being used and NOT whatever comes with
    // laravel mix, because it just screws up the
    // transpiling!
    babel: function(){
        let f = '.babelrc';
        let options = {};

        if (File.exists(f)) {
            options = JSON.parse(File.find(f).read());
        }
        return options;
    }
});

if (mix.inProduction()) {

    console.info('Building for production... This might take a while!');

    // Push Babili minifier into webpack.
    // NOTE: This should chance in the future. Either
    // improved Babili or new Uglifier JS for ES6+
    mix.webpackConfig({
        plugins : [
            new BabiliPlugin({
                removeConsole: true,
                removeDebugger: true
            }, {
                comments: false
            })
        ]
    });
}

In other words, at some point, I simply gave up making the transpilers work - which they didn't at the time of writing this package. I therefore allowed the code to remain un-transpiled due to newer es6 features that I'm using. Both Chrome and Firefox understand it. Edge, however, will only run the code if "experimental features" are turned on.

I'm really sorry for the trouble this is causing you. Sadly time is never on my side, so my documentation is clearly lacking on this front.

[aedart]

Hi @joaoeduardo

Have you had any more luck getting this to work?

[joaoeduardo]

I tried with a full Laravel project, and I got the same error.

[aedart]

Hmmm... really sorry for the trouble. Might I ask what browser you are running it on? Or what you are testing it in?

The main reason why you get the error is due to the new.target === ServiceProvider test inside the ServiceProvider. For some reason it is triggered. If the code is attempted transpiled to pre-es6, then I'm not sure how this line is modified.

In your setup (local copy), is it possible to just modify my `ServiceProvider and remove that check in it's constructor? Because if that is the only issue, surely I can simply just remove it. However, something tells me that your setup still tries to transpile it older browsers, which I know does not work.

If you haven't lost hope with my package, can you please try the mentioned?

---

More infor about `new.target https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/new.target

[joaoeduardo]

I tried with Chrome. I will try in another browser.

[joaoeduardo]

When I target a browser with ES 2015 support it works. Sorry for the inconvenience.

[aedart]

No worries - just happy that it works for you :)