aurelia：同じ名前の要素がすでに存在する場合、要素を登録しようとしました。名前：デフォルト

Question

Error: Attempted to register an Element when one with the same name already exists. Name: default. 
    at register (http://localhost:8080/scripts/aurelia.bundle.js:12108:13) 
    at ViewResources.registerElement (http://localhost:8080/scripts/aurelia.bundle.js:12211:5) 
    at HtmlBehaviorResource.register (http://localhost:8080/scripts/aurelia.bundle.js:14788:16) 
    at ResourceDescription.register (http://localhost:8080/scripts/aurelia.bundle.js:13862:19) 
    at ResourceModule.register (http://localhost:8080/scripts/aurelia.bundle.js:13787:12) 
    at http://localhost:8080/scripts/aurelia.bundle.js:14171:28 

私はテンプレートから必要としようとしたとき、私はこのエラーを取得：

<template> 
    <require from="./components/todoList/todoList"></require> 
    <todoList></todoList> 
</template> 

私が代わりにHTMLを追加したときにレンダリングが正常に動作します：

<template> 
    <require from="./components/todoList/todoList.html"></require> 
    <todoList></todoList> 
</template> 

しかし、その後、関数が宣言todoList.jsは機能しません（...は関数/未定義ではありません）。

webpack内で使用します。ここに私のWebPACKの設定です：

const webpack = require('webpack'); 
const ProgressBarPlugin = require('progress-bar-webpack-plugin'); 
const JavaScriptObfuscator = require('webpack-obfuscator'); 
const AureliaWebpackPlugin = require('aurelia-webpack-plugin'); 
const HtmlWebpackPlugin = require('html-webpack-plugin'); 
const path = require('path'); 

const isProductionBuild = process.argv.indexOf('-p') !== -1; 

const plugins = [ 
    new ProgressBarPlugin(), 
    new webpack.HotModuleReplacementPlugin(), 
    new webpack.optimize.CommonsChunkPlugin({ name: ['aurelia'] }), 
    new AureliaWebpackPlugin(), 
    new HtmlWebpackPlugin({ 
    filename: 'index.html', 
    template: './src/index.html', 
    }), 
]; 

if (isProductionBuild) { 
    const obfuscator = new JavaScriptObfuscator({ 
    compact: true, 
    controlFlowFlattening: true, 
    controlFlowFlatteningThreshold: 0.75, 
    debugProtection: true, 
    debugProtectionInterval: true, 
    disableConsoleOutput: true, 
    reservedNames: [], 
    rotateStringArray: true, 
    seed: 0, 
    selfDefending: true, 
    sourceMap: true, 
    sourceMapBaseUrl: '', 
    sourceMapFileName: '', 
    sourceMapMode: 'separate', 
    stringArray: true, 
    stringArrayEncoding: true, 
    stringArrayThreshold: 0.8, 
    unicodeEscapeSequence: true, 
    }); 

    plugins.push(new webpack.optimize.UglifyJsPlugin()); 
    plugins.push(obfuscator); 
} 

module.exports = { 
    entry: { 
    app: ['./src/index'], 
    aurelia: [ 
     'aurelia-bootstrapper-webpack', 
     'aurelia-polyfills', 
     'aurelia-pal', 
     'aurelia-pal-browser', 
     'aurelia-binding', 
     'aurelia-dependency-injection', 
     'aurelia-event-aggregator', 
     'aurelia-framework', 
     'aurelia-history', 
     'aurelia-history-browser', 
     'aurelia-loader', 
     'aurelia-loader-webpack', 
     'aurelia-logging', 
     'aurelia-logging-console', 
     'aurelia-metadata', 
     'aurelia-path', 
     'aurelia-route-recognizer', 
     'aurelia-router', 
     'aurelia-task-queue', 
     'aurelia-templating', 
     'aurelia-templating-binding', 
     'aurelia-templating-router', 
     'aurelia-templating-resources', 
    ], 
    }, 
    output: { 
    path: path.join(__dirname, 'build'), 
    filename: 'scripts/[name].bundle.js', 
    sourceMapFilename: 'scripts/[name].bundle.js.map', 
    }, 
    module: { 
    rules: [ 
     { 
     test: /\.p?css$/, 
     include: /src/, 
     exclude: /(node_modules)/, 
     use: [ 
      'style-loader', 
      'css-loader?importLoaders=1', 
      'postcss-loader', 
     ], 
     }, 
     { 
     test: /\.jsx?$/, 
     include: /src/, 
     exclude: /(node_modules)/, 
     use: [ 
      'babel-loader', 
      'eslint-loader', 
     ], 
     }, 
     { 
     test: /\.html$/, 
     include: /src/, 
     exclude: [path.join(__dirname, 'index.html'), /(node_modules)/], 
     use: 'html-loader', 
     }, 
    ], 
    }, 
    plugins, 
    devServer: { 
    port: 8080, 
    contentBase: path.join(__dirname, 'build'), 
    hot: true, 
    inline: true, 
    }, 
}; 

EDIT：

これは、現在のアプリケーション構造です：

app.html

<template> 
    <require from="./components/todo-list/todo-list"></require> 
    <todo-list></todo-list> 
</template> 

のtodo-するlist.html

<template> 
    <h1>TODO List</h1> 
    <input type="text" value.bind="newTodoTitle"> 
    <button click.trigger="addTodo()">test</button> 
    <p repeat.for="todo of todos"> 
     ${todo} 
    </p> 
</template> 

todo-list.js

export default class todoList { 
    constructor() { 
    this.newTodoTitle = ''; 
    this.todos = []; 
    } 

    addTodo() { 
    this.todos.push(this.newTodoTitle); 
    } 
} 

Answer 1

これはおそらく<todoList></todoList>と関係があります。 HTMLは大文字と小文字を区別しないため、Aureliaが見る前にtodoListがtodolistに変換されるため、AureliaはTodolistという名前のクラスを検索しています。

これの最も簡単な修正は、標準命名規則に従うことです。あなたのファイル名は大したことではありませんが、私はそれをtodo-list.js/htmlと名づけています。 todo-list.jsでは、あなたのクラス名はTodoListになり、その後、かかるテンプレート（app.htmlまたは何でも）に、あなたは

<template> 
    <require from="./components/todoList/todo-list"></require> 
    <todo-list></todo-list> 
</template> 

は、このことができますなら、私に教えてください必要があります。

EDIT：

私は今、あなたの問題の原因を参照してください。

export class TodoList

アウレリアのVMになるための

export default class todoList

ニーズをデフォルトとしてエクスポートされていない、とも命名規則に従う必要があります。