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?

score 0 · Answer 1 · answered Aug 29 '19 at 07:41

0

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?

answered Aug 29 '19 at 07:41

corrado4eyes

283
2
11

Tried it, but it does not work. The syntax works perfectly if used in the project, but when moving the entire project to node modules and extending classes it seems that it loses connection somehow – Ivan Dzhurov Aug 29 '19 at 08:26
Idk if I'm saying something wrong, but maybe because the tsconfig.json from default exclude node_modules, so you are having this error – corrado4eyes Aug 29 '19 at 08:31
Nope, i had that problem, but i fixed it – Ivan Dzhurov Aug 29 '19 at 08:39

score 0 · Answer 2 · answered Dec 16 '19 at 14:28

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());

Losing scope when using package from node modules

2 Answers2