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>

待办事项-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

Aurelia虚拟机不会默认导出，您还需要遵循命名约定。

aurelia：当已存在具有相同名称的元素时，尝试注册元素。名称：默认

1 个答案: