意外的“未捕获TypeError：XXX不是构造函数”与Babel和ES6的错误 [英] Unexpected "Uncaught TypeError: XXX is not a constructor" errors with Babel and ES6

问题描述

我正在尝试Webpack，并尝试本教程中的说明，给或采取一些自定义的东西。

这是一个简单的代码，真的，但我很困惑这个错误，觉得这是一个愚蠢的我错过了

我定义了两个ES6类，每个类对应一个Handlebars模板，我的应用程序的entrypoint应该通过其内容替换索引文件中的占位符HTML： / p>

Entrypoint：

  import'。 /bloj.less'
 
 //如果我们有一个链接，在其上渲染Button组件
 if（document.querySelectorAll（'a'）。length）{
 require .ensure（[]，（）=> {
 const Button = require（'./ Components / Button.js'）; 
 const button = new Button（'9gag.com'）; 
 
 button.render（'a'）; 
}，'button'）; 
} 
 
 //如果我们有一个标题，则将Header组件呈现给
 if（document.querySelectorAll（'h1'）。length）{
 require .ensure（）[
 const Header = require（'./ Components / Header.js'）; 
 
 new Header（）。render（'h1' ）; 
}，'header'）; 
} 
  

索引：

 <！DOCTYPE html> 
< html> 
< head> 
< / head> 
< body> 
< h1>我的标题< / h1> 
< a>点击我< / a> 
 
< script src =build / bloj.js>< / script> 
< / body> 
< / html> 
  

按钮：

  import'from'jquery'; 
 import'./Button.less'; 
 
导出默认类Button {
 
构造函数（链接）{
 this.link = link; 
} 
 
 onClick（event）{
 event.preventDefault（）; 
 alert（this.link）; 
} 
 
 render（node）{
 const text = $（node）.text（）; 
 var compiled = require（'./ Button.hbs'）; 
 
 //渲染我们的按钮
 $（node）.html（
 compile（{text：text，link：this.link}）
 ）; 
 
 //附加我们的听众
 $（'。button'）。点击（this.onClick.bind（this））; 
} 
} 
  

标题： p>

  import'from'jquery'; 
 import'./Header.less'; 
 
导出默认类标题{
 render（node）{
 const text = $（node）.text（）; 
 var compiled = require（'./ Header.hbs'）; 
 
 //渲染标题
 $（node）.html（
 compile（{text：text}）
）; 
} 
} 
  

可惜的是，这不行，显示页面时出现这些错误：

 未捕获TypeError：标题不是构造函数
未捕获TypeError：Button不是构造函数
  

我可能缺少什么？

这是我的webpack配置：

  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：主要'，
 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 //禁止uglification警告
} 
}），
 new webpack.DefinePlugin（{
 __SERVER__：false，
 __DEVELOPMENT__：false，
 __DEVTOOLS__：false，
'process.env'：{
 BABEL_ENV：JSON.stringify（process.env.NODE_ENV）
} 
 }）
]）; 
} 
 
 module.exports = {
条目：entryPoint，
输出：{
路径：outputDir，
文件名：appName +' .js'，
 chunkFilename：'[name] .js'，
 publicPath：publicDir 
}，
 debug：！production，
 devtool：production？ false：'eval'，
 module：{
 loaders：[
 {
 test：/\.js/，
 loader：babel，
 include：path.resolve（__ dirname，'src'），
查询：{
预设：['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：空//避免Handlebars错误消息
} 
}; 
  

解决方案

缺少？

Babel将默认导出分配给默认值属性。因此，如果您使用 require 导入ES6模块，则需要访问默认值属性：

  const Button = require（'./ Components / Button.js'）。 
  

I am giving a try to Webpack, and am giving a try to the instructions in this tutorial, give or take a few custom things.

This is simple code, really, but I'm quite puzzled about this error, and feel this is something silly that I missed.

I defined two ES6 classes, each corresponding to a Handlebars template, and my app's entrypoint is supposed to replace the placeholder HTML in the index file by their contents:

Entrypoint:

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');
}

Index:

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <h1>My title</h1>
    <a>Click me</a>

    <script src="build/bloj.js"></script>
</body>
</html>

Button:

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));
    }
}

Header:

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})
        );
    }
}

Sadly, it does not work, and I get both these errors when displaying the page:

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

What could I be missing?

Here is my webpack configuration:

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
    }
};

解决方案

What could I be missing?

Babel assigns default exports to the default property. So if you use require to import ES6 modules, you need to access the default property:

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

这篇关于意外的“未捕获TypeError：XXX不是构造函数”与Babel和ES6的错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！