Aurelia: Error: Attempted to register an Element when one with the same name already exists. Name: n. - Only occurs in production webpack build

I recently split my webpack builds into separate config files and merge them with a common one.

The only difference between the configurations besides the mode is a globally defined BASE_URL

mode

BASE_URL

const merge = require('webpack-merge');
const common = require('./webpack.common.js');
const DefinePlugin = require('webpack').DefinePlugin;
module.exports = merge(common,
mode: 'development',
devtool: 'inline-source-map',
plugins: [
new DefinePlugin(
BASE_URL: JSON.stringify('http://localhost:5000')
)
]
)


Prior to doing this, I was using a single webpack.config and the --mode production option from the CLI.

--mode production

In my code, I can see the proper BASE_URL in both bundles, but only the development one works; the other throws the error: Error: Attempted to register an Element when one with the same name already exists. Name: n. which is very unhelpful, since I don't have an element with the name of n.

BASE_URL

development

Error: Attempted to register an Element when one with the same name already exists. Name: n.

n

EDIT: The error appears to be occuring during the autoregistration of global resources, specifically, for this my DateFormat value converter:

DateFormat

date-format.ts

export class DateFormatValueConverter
toView(value: string)
return new Date(value).toLocaleString();




index.ts

import FrameworkConfiguration from 'aurelia-framework';
import DateInputFormatValueConverter from './value-converters/date-input-format';
import DateFormatValueConverter from './value-converters/date-format';

export function configure(config: FrameworkConfiguration)
config.globalResources(
[
DateInputFormatValueConverter,
DateFormatValueConverter
]
)



EDIT2: It appears to be anything that is resourced globally, except for the first entry.

EDIT3: It seems that if I declare global resources via strings (and PLATFORM.moduleName) works. This may be something the Aurelia team should look into.

PLATFORM.moduleName

export function configure(config: FrameworkConfiguration)
config.globalResources(
[
PLATFORM.moduleName('./value-converters/date-input-format'),
PLATFORM.moduleName('./value-converters/date-format'),
PLATFORM.moduleName('./value-converters/delay-format'),
...
]
)



1 Answer
1

The reason is because the class name got mangled into 1-2 letters. like this:

export class DatePicker
// turned into
// when inspecting the class for static resources declaration, name of the resource will be "n"
let n = class
exports.DatePicker = n;


The fix is to give them explicit name:

// either
@customElement('date-picker')
// or
export class DatePicker
static $resource =
name: 'date-picker',
type: 'element'

// if it's custom element, no need to specify type
static $resource = 'date-picker';



Thanks for contributing an answer to Stack Overflow!

But avoid …

To learn more, see our tips on writing great answers.

Required, but never shown

Required, but never shown

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.