inversify with typescript using module: 'es6'

[faisalil]

hey,

I am trying to add inversify to 2 projects that I am working on! (great library so why not!).

The only difference between the 2 projects in terms of typescript configuration is the that one of them uses ("module": "es6") and the other one uses ("module": "commonjs").

For the one that uses ("module": "commonjs"), all things are going fine, complication is good and got no errors.

For the one that uses ("module": "es6"), I keep getting Cannot find module 'inversify'. I am puzzled as I know that for both projects the definition files are in the package buy why won't the definitions work in the project with ("module": "es6")?

[remojansen]

Hi, thanks for reporting. Can you please share your tsconfig.json and package.json from both projects?

[faisalil]

for the "commonjs" project, tsconfig.json:

{
  "compilerOptions": {
    "noImplicitAny": false,
    "module": "commonjs",
    "target": "es6",
    "jsx": "react",
    "allowJs": true,
    "experimentalDecorators": true,
    "inlineSourceMap": true,
    "allowSyntheticDefaultImports": true
  },
  "include": [
    "js/**/*"
  ]
}

package.json:

{
  "version": "1.0.0",
  "name": "somename",
  "private": true,
  "scripts": {
    "start": "webpack"
  },
  "devDependencies": {
    "babel-core": "^6.3.17",
    "babel-loader": "^6.2.0",
    "babel-plugin-transform-es2015-classes": "^6.9.0",
    "babel-preset-es2015": "^6.3.13",
    "babel-preset-react": "^6.3.13",
    "babel-preset-stage-3": "^6.11.0",
    "copy-webpack-plugin": "^3.0.1",
    "image-webpack-loader": "^2.0.0",
    "jest": "^15.0.2",
    "jest-cli": "^15.0.2",
    "react-addons-test-utils": "^15.3.1",
    "react-test-renderer": "^15.3.1",
    "sinon": "^1.17.6",
    "source-map-loader": "^0.1.5",
    "ts-loader": "^0.8.2",
    "typescript": "^2.0.3",
    "typings": "^1.3.2",
    "webpack": "1.13.1"
  },
  "dependencies": {
    "adal-angular": "^1.0.11",
    "immutable": "^3.8.1",
    "moment": "^2.14.1",
    "radium": "^0.18.1",
    "react": "^15.2.1",
    "react-custom-scrollbars": "^4.0.0",
    "react-dom": "^15.2.1",
    "react-redux": "^4.4.5",
    "react-router": "^2.6.0",
    "redux": "^3.5.2",
    "redux-actions": "^0.10.1",
    "redux-form": "^5.3.2",
    "redux-thunk": "^2.1.0"
  }
}

For the other project (es6 module project), tsconfig:

{
    "compilerOptions": {
        "allowJs": true,
        "outDir": "built",
        "module": "es6",
        "target": "es6",
        "jsx": "react",
        "inlineSourceMap": true,
        "noEmitOnError": true,
        "experimentalDecorators": true,
        "allowSyntheticDefaultImports": true
    },
    "compileOnSave": true,
    "include": [
        "../js/src/**/*",
        "typings/**/*"
    ]
}

and package.json:

{
  "name": "someothername",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start"
  },
  "dependencies": {
    "deep-equal": "^1.0.1",
    "immutable": "^3.8.1",
    "moment": "^2.13.0",
    "react": "^15.3.2",
    "react-native": "^0.34.1",
    "react-native-button": "^1.7.1",
    "react-native-communications": "^2.1.2",
    "react-native-elements": "^0.6.1",
    "react-native-extra-dimensions-android": "^0.17.0",
    "react-native-gifted-spinner": "^0.1.0",
    "react-native-parsed-text": "^0.0.16",
    "react-native-router-flux": "^3.35.0",
    "react-native-vector-icons": "^2.1.0",
    "react-native-video": "^0.8.0",
    "react-redux": "^4.4.5",
    "redux": "^3.6.0",
    "redux-actions": "^0.12.0",
    "redux-thunk": "^2.1.0"
  }
}

[faisalil]

@remojansen any idea?

[remojansen]

I see a few things. You are using typings and InversifyJS uses @types because it requires typescript 2.0. It looks like you are missing some compilation options required by InversifyJS you can learn more at https://github.com/inversify/InversifyJS#installation

Also, in one project you are using webpack configured by yourself and in the other you are using the react-native cli.

The error:

Cannot find module 'inversify'

Could be caused because typescript is < 2.0 you need to find a way to ensure that ts-loader and the react-netive CLI are using TS > =2.0.

[faisalil]

I am using typescript 2.0.3 for all projects so I don't think its a typescript issue. Why would the fact that I am using typings be a problem if I am using typescript@2?

The error is a typescript compile error and its happening on the react native project not the project using webpack. I doubled checked the compilation options and I am not missing anything.

[remojansen]

They have changed the distributuion of dts files in ts > 2.0 https://blogs.msdn.microsoft.com/typescript/2016/06/15/the-future-of-declaration-files/. I'm researching will let you know if I find the problem but it is probably the way the react-native cli works.

[remojansen]

Hi @faisalil the project that is using ts-loader + webpack works because it supports TypeScript. However the react native cli seems to support Flow not typescript (https://github.com/facebook/react-native/issues/5691#issuecomment-178411082).

I think you are going to have to create your own build process an not use the React native CLI just like in the project that is working fine. I found some TS < 2.0 examples online:

• https://raygun.com/blog/2016/07/react-native-typescript/
• https://github.com/mrpatiwi/ReactNativeTS

You can use them as guide but you will need to upgrade them to TS >= 2.0.

[remojansen]

Closing this as I don't think it is a inversify issue. It seems to be a react-native + ts 2.0 issue. Sorry we can't help here :cry:

[faisalil]

@remojansen this is not a react-native issue ! The reason I am saying that is that typescript complication is where things break down (even if I don't have a single typescript file). This is a legit issue in the typescript definitions.