Class no longer a class after build


#1

I’ve got these classes in my scripts like

import Component from '../Component';
export default class Dropdown extends Component {
...
}

export var __usedefault = true;

This works excellent in development mode. But when I build it using

var stealTools = require('steal-tools');

stealTools.build({
        config: __dirname + '/package.json!npm'
    },
    {
        bundleSteal: true,
    });

Later I load these files like so:

define(['./Dropdown'], function(Dropdown) {
                new Dropdown({label:'Language', name: 'language', required:true, defaultValue: 'en', options: {
                    'en': 'English',
                    'nl': 'Nederlands',
                    'de': 'Deutsch'
                }}),
    );

I get an error-message: ‘Dropdown is not a constructor’

Looking in the debugger I notice that de parameter Dropdown is no longer a function Dropdown(), but an object:

{
_esModule: true,
_useDefault:true,
default: Dropdown(),
__proto__: Object
}

How should I fix this?


#2

What does that do? Does removing it fix the issue?


#3

Without it ‘export default’ doesn’t work?


#4

Moving from

define(['./Dropdown'], function(Dropdown) { 

to

import Dropdown from './Dropdown' 

seemed to do the trick

Is there a preferred syntax for stealjs?
Should I use

var Dropdown = require('./Dropdown')

instead? Since that seems to be the method used in canjs.


#5

I don’t know if there’s a preferred syntax, or what the pros/cons are to the different formats. Maybe @matthewp or @pYr0x can comment on that.

I would go with CommonJS or ES6, depending on what you prefer.


#6

If you upgrade to Steal 1.0 this should be fixed now.