Error: Conflicting reflect.metadata polyfill found

I updated my packages to latest, and I’m getting the following:

index.js?8978:527 Uncaught (in promise) Error: Conflicting reflect.metadata polyfill found. If you have 'reflect-metadata' or any other reflect polyfill imported, please remove it, if not (or if you must use a specific polyfill) please file an issue at https://github.com/aurelia/aurelia/issues so that we can look into compatibility options for this scenario. Implementation summary:

metadata:
function (metadataKey, metadataValue) {
      return function (target, targetKey) {
        Reflect....

defineMetadata:
function (metadataKey, metadataValue, target, targetKey) {
      var metadataContainer = target.hasO...

getOwnMetadata:
function (metadataKey, target, targetKey) {
      if (target.hasOwnProperty(metadataContainerKey)) {...
    at applyMetadataPolyfill (index.js?8978:527)
    at eval (di.js?eadc:2)
    at Module../node_modules/@aurelia/kernel/dist/native-modules/di.js (vendors~cb931f6e.091214a8336b64f777e5.chunk.js:71)
    at __webpack_require__ (runtime~app.091214a8336b64f777e5.bundle.js:849)
    at fn (runtime~app.091214a8336b64f777e5.bundle.js:151)
    at eval (platform.js?620e:1)
    at Module../node_modules/@aurelia/kernel/dist/native-modules/platform.js (vendors~cb931f6e.091214a8336b64f777e5.chunk.js:143)
    at __webpack_require__ (runtime~app.091214a8336b64f777e5.bundle.js:849)
    at fn (runtime~app.091214a8336b64f777e5.bundle.js:151)
    at eval (index.js?3116:1)

npm ls:

β”œβ”€β”€ @aurelia/fetch-client@0.9.0
β”œβ”€β”€ @popperjs/core@2.10.2
β”œβ”€β”€ @types/bootstrap@5.1.6
β”œβ”€β”€ @types/gulp@4.0.9
β”œβ”€β”€ @types/jest@26.0.24
β”œβ”€β”€ @types/jquery@3.5.8
β”œβ”€β”€ @types/node@16.11.6
β”œβ”€β”€ @types/webpack@4.41.31
β”œβ”€β”€ @typescript-eslint/eslint-plugin@4.33.0
β”œβ”€β”€ @typescript-eslint/parser@4.33.0
β”œβ”€β”€ app-settings-loader@2.0.2
β”œβ”€β”€ aurelia-animator-css@1.0.4
β”œβ”€β”€ aurelia-bootstrapper@2.3.3
β”œβ”€β”€ aurelia-cli@2.0.3
β”œβ”€β”€ aurelia-loader-nodejs@1.1.0
β”œβ”€β”€ aurelia-pal-nodejs@2.0.0
β”œβ”€β”€ aurelia-testing@1.0.0
β”œβ”€β”€ aurelia-webpack-plugin@4.0.0
β”œβ”€β”€ autoprefixer@10.4.0
β”œβ”€β”€ babel-eslint@10.1.0
β”œβ”€β”€ bindings@1.5.0 extraneous
β”œβ”€β”€ bootstrap@5.1.3
β”œβ”€β”€ clean-webpack-plugin@3.0.0
β”œβ”€β”€ copy-webpack-plugin@6.4.1
β”œβ”€β”€ css-loader@5.2.7
β”œβ”€β”€ cssnano@4.1.11
β”œβ”€β”€ cypress@6.9.1
β”œβ”€β”€ duplicate-package-checker-webpack-plugin@3.0.0
β”œβ”€β”€ eslint-plugin-cypress@2.12.1
β”œβ”€β”€ eslint@7.32.0
β”œβ”€β”€ expose-loader@1.0.3
β”œβ”€β”€ file-loader@6.2.0
β”œβ”€β”€ file-uri-to-path@1.0.0 extraneous
β”œβ”€β”€ gulp-eslint@6.0.0
β”œβ”€β”€ gulp@4.0.2
β”œβ”€β”€ html-loader@1.3.2
β”œβ”€β”€ html-webpack-plugin@4.5.2
β”œβ”€β”€ istanbul-instrumenter-loader@3.0.1
β”œβ”€β”€ jest-cli@26.6.3
β”œβ”€β”€ jest-transform-stub@2.0.0
β”œβ”€β”€ jest@26.6.3
β”œβ”€β”€ jquery@3.6.0
β”œβ”€β”€ json-loader@0.5.7
β”œβ”€β”€ mini-css-extract-plugin@1.6.2
β”œβ”€β”€ minimatch@3.0.4
β”œβ”€β”€ nan@2.15.0 extraneous
β”œβ”€β”€ postcss-loader@4.3.0
β”œβ”€β”€ postcss@8.3.11
β”œβ”€β”€ promise-polyfill@8.2.1
β”œβ”€β”€ sass-loader@10.2.0
β”œβ”€β”€ sass@1.43.4
β”œβ”€β”€ style-loader@2.0.0
β”œβ”€β”€ tree-kill@1.2.2
β”œβ”€β”€ ts-jest@26.5.6
β”œβ”€β”€ ts-loader@8.3.0
β”œβ”€β”€ typescript@4.4.4
β”œβ”€β”€ url-loader@4.1.1
β”œβ”€β”€ webpack-bundle-analyzer@4.5.0
β”œβ”€β”€ webpack-cli@3.3.12
β”œβ”€β”€ webpack-dev-server@3.11.2
└── webpack@4.46.0

Is there a problem with one of the Aurelia packages that I should downgrade?

UPDATE. So, following this workaround β€œfixes” the issue. Is this standard going forward?

import {Aurelia} from 'aurelia-framework';
import * as environment from './config/environment.json';
import {PLATFORM} from 'aurelia-pal';
import * as Bootstrap from 'bootstrap';
import { applyMetadataPolyfill } from '@aurelia/metadata';

export function configure(aurelia: Aurelia): void {

  applyMetadataPolyfill(Reflect, false, true, false, false);

  aurelia.use
    .standardConfiguration()
    .feature(PLATFORM.moduleName('resources/index'));

  aurelia.use.developmentLogging(environment.debug ? 'debug' : 'warn');

  if (environment.testing) {
    aurelia.use.plugin(PLATFORM.moduleName('aurelia-testing'));
  }

  aurelia.start().then(() => aurelia.setRoot(PLATFORM.moduleName('view/app')));
}
1 Like

Maybe use aurelia-metadata for now, @aurelia/metadata is for v2, and hasn’t been verified with v1 usages, since there could be some duplications. Though if you are using latest version of alpha, the error should go away