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

編輯：

這是當前應用程序的結構：

app.html

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

待辦事項-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> 

讓我知道，如果這有助於。

編輯：

現在我看到你的問題的根源：

export default class todoList

需求，成爲

export class TodoList

奧裏利亞VM沒有導出爲默認值，也你需要遵循命名約定。