Errores inesperados de "Unkeught TypeError: XXX no es un constructor" con Babel y ES6

Estoy probando Webpack, y estoy probando las instrucciones en este tutorial , dar o tomar algunas cosas personalizadas.

Este es un código simple, realmente, pero estoy bastante desconcertado acerca de este error, y siento que esto es algo tonto que eché de less.

Definí dos classs de ES6, cada una de las cuales corresponde a una plantilla de manubrios, y se supone que el punto de input de mi aplicación reemplaza el código de position HTML en el file de índice por su contenido:

Punto de input:

import './bloj.less' // If we have a link, render the Button component on it if (document.querySelectorAll('a').length) { require.ensure([], () => { const Button = require('./Components/Button.js'); const button = new Button('9gag.com'); button.render('a'); }, 'button'); } // If we have a title, render the Header component on it if (document.querySelectorAll('h1').length) { require.ensure([], () => { const Header = require('./Components/Header.js'); new Header().render('h1'); }, 'header'); } 

Índice:

 <!DOCTYPE html> <html> <head> </head> <body> <h1>My title</h1> <a>Click me</a> <script src="build/bloj.js"></script> </body> </html> 

Botón:

 import $ from 'jquery'; import './Button.less'; export default class Button { constructor(link) { this.link = link; } onClick(event) { event.preventDefault(); alert(this.link); } render(node) { const text = $(node).text(); var compiled = require('./Button.hbs'); // Render our button $(node).html( compiled({"text": text, "link": this.link}) ); // Attach our listeners $('.button').click(this.onClick.bind(this)); } } 

Encabezamiento:

 import $ from 'jquery'; import './Header.less'; export default class Header { render(node) { const text = $(node).text(); var compiled = require('./Header.hbs'); // Render the header $(node).html( compiled({"text": text}) ); } } 

Lamentablemente, no funciona, y recibo ambos estos errores al mostrar la página:

 Uncaught TypeError: Header is not a constructor Uncaught TypeError: Button is not a constructor 

¿Qué podría estar perdiendo?

Aquí está mi configuration de package web:

 var path = require('path'); var webpack = require('webpack'); var CleanPlugin = require('clean-webpack-plugin'); var ExtractPlugin = require('extract-text-webpack-plugin'); var production = process.env.NODE_ENV === 'production'; var appName = 'bloj'; var entryPoint = './src/bloj.js'; var outputDir = './build/'; var publicDir = './build/'; // ************************************************************************** // var plugins = [ //new ExtractPlugin(appName + '.css', {allChunks: true}), new CleanPlugin(outputDir), new webpack.optimize.CommonsChunkPlugin({ name: 'main', children: true, minChunks: 2 }) ]; if (production) { plugins = plugins.concat([ new webpack.optimize.DedupePlugin(), new webpack.optimize.OccurenceOrderPlugin(), new webpack.optimize.MinChunkSizePlugin({ minChunkSize: 51200 // 50ko }), new webpack.optimize.UglifyJsPlugin({ mangle: true, compress: { warnings: false // Suppress uglification warnings } }), new webpack.DefinePlugin({ __SERVER__: false, __DEVELOPMENT__: false, __DEVTOOLS__: false, 'process.env': { BABEL_ENV: JSON.stringify(process.env.NODE_ENV) } }) ]); } module.exports = { entry: entryPoint, output: { path: outputDir, filename: appName + '.js', chunkFilename: '[name].js', publicPath: publicDir }, debug: !production, devtool: production ? false : 'eval', module: { loaders: [ { test: /\.js/, loader: "babel", include: path.resolve(__dirname, 'src'), query: { presets: ['es2015'] } }, { test: /\.less/, //loader: ExtractPlugin.extract('style', 'css!less') loader: "style!css!less" }, { test: /\.html/, loader: 'html' }, { test: /\.hbs/, loader: "handlebars-template-loader" } ] }, plugins: plugins, node: { fs: "empty" // Avoids Handlebars error messages } }; 

¿Qué podría estar perdiendo?

Babel asigna exportaciones pnetworkingeterminadas a la propiedad default . Entonces, si usa require para importar modules ES6, necesita acceder a la propiedad default :

 const Button = require('./Components/Button.js').default; 

Me doy count de que ya tienes una respuesta. Sin embargo, tuve un problema similar al que encontré una respuesta. Comenzar mi propia pregunta y responderla parece extraño. Así que voy a dejar esto aquí.

Tuve el mismo error que tuviste. Sin embargo, logré resolverlo cambiando mi

 export default {Class} 

a

 export default Class 

No sé por qué envolví la Clase en un object, pero recuerdo haberlo visto en alguna parte, así que simplemente comencé a usarlo.

Entonces, en lugar de devolver una class por defecto, devolvía un object como este {Class: Class} . Esto es completamente válido pero romperá webpack + babel.

EDITAR: Desde entonces, he llegado a saber por qué esto probablemente rompe el package web Babel +. El export default solo tiene 1 export. Un object JavaScript puede contener muchas properties. Lo que significa que puede tener más de 1 export. (Ver: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export ).

Para exportaciones múltiples use: export {definition1, definition2} .

Caso de uso: lo he usado en una situación en la que creé una biblioteca que exportaba diferentes types de editor (mientras que el código subyacente era el mismo, la apariencia del editor cambia según la export que use).

Puedes simplemente poner export var __useDefault = true; justo después de exportar su class.

 export default class Header { ... } export var __useDefault = true;