Inversify.js - Reflect.hasOwnMetadata is not a function

Question

I'm trying out Inversify.js for a Typescript application I'm using. Right now, there is no framework involved, so it's pure ES2015.

I'm trying to follow along the example in the main page, but I'm being hit with: "Reflect.hasOwnMetadata is not a function" when I try to run it in the browser.

I'm using Webpack as package bundler.

Here is my folder structure:

Here is the main app.ts file:

/// <reference path="../typings/index.d.ts" /> /// <reference path="./domain/abstract/match.interface.ts" /> import kernel from "../inversify/inversify.config.ts"; import {symbols} from "../inversify/symbols.ts"; var ninja = kernel.get<INinja>("INinja"); ninja.fight(); ninja.sneak();

interfaces.d.ts:

interface INinja { fight(): string; sneak(): string; } interface IKatana { hit(): string; } interface IShuriken { throw(); }

inversify.config.ts

/// <reference path="../node_modules/inversify/type_definitions/inversify/inversify.d.ts" /> /// <reference path="../node_modules/reflect-metadata/reflect-metadata.d.ts" /> /// <reference path="inversify.ts" /> import {Kernel} from "inversify" //import {MatchHub} from "../app/components/Hubs/match/match-hub.component.ts"; //import {symbols} from "./symbols.ts"; import {Ninja, Katana, Shuriken} from "./inversify.ts"; var kernel = new Kernel(); kernel.bind<INinja>("INinja").to(Ninja); kernel.bind<IKatana>("IKatana").to(Katana); kernel.bind<IShuriken>("IShuriken").to(Shuriken); export default kernel;

symbols.ts:

export const symbols = { Match : Symbol("Match") }

tsconfig.json:

{ "compilerOptions": { "noImplicitAny": false, "experimentalDecorators": true, "emitDecoratorMetadata": true, "removeComments": true, "sourceMap": true, "target": "es5" }, "exclude": [ "node_modules", "bower_components", "wwwroot" ] }

Webpack.config.js:

module.exports = { entry: './app/app.ts', output: { filename: '../Scripts/app/app.js' }, resolve: { extensions: ['', '.Webpack.js', '.web.js', '.ts','.js', '.tsx'] }, module: { loaders: [ { test: /\.ts?$/, exclude: /(node_modules|bower_components)/, loader: 'ts-loader' } ] }, watch: true }

Firefox Console Error:

Webpack output:

When I tried to install Inversify the following warnings popped up:

Is it a bug? Or am I doing something wrong? Thanks!

PS: Tried following the sample files, but I couldn't understand anything!

I come from ASP.NET MVC 5 with Ninject so I can relate for most of the syntax.

I'm not finding any reference that Reflect.hasOwnMetadata is defined by any specification. Why do you think it should be available? — Alexander O'Mara
– Alexander O'Mara, Commented May 30, 2016 at 23:51
@AlexanderO'Mara: That's not a function that I defined, but inversify's. I just don't know why it is giving me that error. — Jose A
– Jose A, Commented May 30, 2016 at 23:57
Might want to ask the developers, it's not a method in Firefox, Chrome, or in the ES7 draft as far as I can see. — Alexander O'Mara
– Alexander O'Mara, Commented May 30, 2016 at 23:59
Did you solve this problem? Can you you post an answer or flag the one of the answers below as valid? — Remo H. Jansen
– Remo H. Jansen, Commented Dec 2, 2016 at 9:43

David Sherret · Accepted Answer · 2016-05-31 13:57:17Z

123

It seems you will need to include the reflect-metadata package. Try adding an import to it in inversify.config.ts by doing:

import "reflect-metadata";

edited May 31, 2016 at 13:57

answered May 31, 2016 at 0:35

David Sherret

108k28 gold badges197 silver badges190 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Jose A Over a year ago

Hi David, thanks for the answer! I used npm for installing inversify. The last picture shows the errors that npm threw at me.

David Sherret Over a year ago

@JoseA oh yeah, you're right. I didn't read it closely the first time, sorry. I think you just need to import reflect-metadata or make sure webpack includes it (I'm not so familiar with webpack)

Jose A Over a year ago

Thanks :D! I will try that later on. Will post back once I've tried it. Will finish something first before trying it.

Remo H. Jansen Over a year ago

Hi I'm the main author of inversifyJS, importing "reflect-metadata" should solve your problem.

Cristian Vrabie Over a year ago

I would recommend placing the "reflect-metadata" import at the top (of inversify.config.ts). I was having this problem when importing @injectable classes before importing it.

|

Mahesh · Accepted Answer · 2017-03-30 10:47:58Z

May be a silly thing to point out, I ran into a the same issue but it was because of the order of imports. Its unlikely to be the case for any other imports but in case of reflect-metadata it has to be imported before any classes that use it.

import { Container } from "inversify"; //reflect-metadata should be imported //before any interface or other imports //also it should be imported only once //so that a singleton is created. import "reflect-metadata"; import Battle from "./interfaces/battle"; import EpicBattle from "./interfaces/epic_battle";

Then call me silly. Seems kind of silly in hindsight, but it would be good if this was pointed out in the docs.
The reflect metadata import will parse the js files and actually create the container. If things are imported before the initialisation happens, it could keep a check and give a proper error.

Collectives™ on Stack Overflow

Inversify.js - Reflect.hasOwnMetadata is not a function

2 Answers 2

8 Comments

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

2 Comments

Linked

Related