Losing scope when using package from node modules

Question

I am trying to create a game template with pixi.js, using the robotlegsjs framework and typescript to include dependency injection and view management.

Everything is working great if I work in a single repository, but I moved most of the generic code I already wrote in a separate node module to use as a 'core'. And this is where everything breaks.

I moved all the game to a separate node module and only copied one file to check if it will work on top level. Everything in the code below is working if it is in the same directory as the other files, but taken from node modules it crashes with the error below the code:

@injectable()
export class PresentationConfig implements IConfig {
    @inject(IInjector)
    private injector: IInjector;

    public configure(): void {
        this.mapActions();
    }

    private mapActions(): void {
        this.injector.bind(UpdateModelsCommand).toSelf();
    }
}

Uncaught Error: No matching bindings found for serviceIdentifier: Symbol(IInjector)
    at _validateActiveBindingCount (planner.js:62)
    at _getActiveBindings (planner.js:48)
    at _createSubRequests (planner.js:91)
    at planner.js:115
    at Array.forEach (<anonymous>)
    at planner.js:114
    at Array.forEach (<anonymous>)
    at _createSubRequests (planner.js:94)
    at Object.plan (planner.js:136)
    at container.js:317

I believe that my problem is coming somewhere from my webpack config, possibly losing scope when taking the package from outer directory. Here is my config:

const path = require("path");
const outDir = path.resolve(__dirname, "dist");
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const webpack = require("webpack");
let env = process.env.NODE_ENV || "development";
const isProduction = env === "production";
let plugins = [new webpack.DefinePlugin({ isProduction: isProduction })];

if (!isProduction) {
    plugins.push(new webpack.SourceMapDevToolPlugin({ test: /\.ts$/i }));
    plugins.push(new webpack.optimize.ModuleConcatenationPlugin());
}

module.exports = {
    mode: env,
    entry: "./src/index.ts",
    devtool: isProduction ? undefined : "inline-source-map",
    module: {
        rules: [
            {
                test: /\.ts?$/,
                use: {
                    loader: 'awesome-typescript-loader',
                }
            }
        ]
    },
    resolve: {
        extensions: [".ts", ".js"]
    },
    output: {
        filename: "bundle.js",
        path: outDir
    },

    plugins: plugins,
    optimization: isProduction
        ? {
              concatenateModules: true,
              minimize: true,
              minimizer: [
                  new UglifyJsPlugin({
                      cache: true,
                      parallel: 4,
                      uglifyOptions: {
                          output: {
                              comments: false
                          }
                      }
                  })
              ]
          }
        : {}
};

Can anyone help, please?

Answer 1

After all, the problem was coming from the fact that there were duplicated dependencies and webpack was creating multiple instances for a single dependency.

This fixed the issue:

let DuplicatePackageCheckerPlugin = require("duplicate-package-checker-webpack-plugin"); plugins.push(new DuplicatePackageCheckerPlugin());

Answer 2

I think what is wrong here is nothing about the webpack, but how you are binding the object. Inversify expects to bind an object to a variable inside a constructor, so the right flow should be:

@injectable()
export class PresentationConfig implements IConfig {
    private injector: IInjector;

    constructor(@inject(IInjector)
                newInjector: IInjector){
          this.injector = newInjector
    }


    public configure(): void {
        this.mapActions();
    }

    private mapActions(): void {
        this.injector.bind(UpdateModelsCommand).toSelf();
    }
}

And did you created a container.ts file where you create an object of type Container(from inversify) and bind to this object to your dependencies?