Uncaught TypeError: fs.existsSync is not a function in browser

[drwatson1]

I've got an error "Uncaught TypeError: fs.existsSync is not a function" in Chrome.

Steps to reproduce:

1. Create app

   create-react-app app1 --scripts-version=react-scripts-ts
   cd app1
   npm install --save typescript-ioc

2. Add this to tsconfig.json:

{
  "compilerOptions": {
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true
  }
}

All other options leave as they are.

3. Add code to src/index.tsx

import { Container } from 'typescript-ioc';
Container.bind(Date).to(Date);

4. See a blank page and get an error: "Uncaught TypeError: fs.existsSync is not a function" in console

May be I should do anything else to make this work?

PS. For clearify I have exactly that tsconfig.json:

{
  "compilerOptions": {
    "outDir": "build/dist",
    "module": "commonjs",
    "target": "es5",
    "lib": ["es6", "dom"],
    "sourceMap": true,
    "allowJs": true,
    "jsx": "react",
    "moduleResolution": "node",
    "rootDir": "src",
    "forceConsistentCasingInFileNames": true,
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "suppressImplicitAnyIndexErrors": true,
    "noUnusedLocals": true,
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true
  },
  "exclude": [
    "node_modules",
    "build",
    "scripts",
    "acceptance-tests",
    "webpack",
    "jest",
    "src/setupTests.ts"
  ],
  "types": [
    "typePatches"
  ]
}

[thiagobustamante]

Hi,

The problem is that we delivery two compilations of the ioc library: one that output ES6 code and other that output ES5. It was necessary due to the particularities of the class syntax in ES6 (see this issue).

So, we choose which version of the library should be imported(es5 or es6) based on a configuration property (useES6: true) in the ioc.config file, to enable it to work for people that are compiling their typescript code with ES6 target set.

But the use of this configuration file is only compatible with the node version. if you are running it on browser, you must choose the implementation you desire to use directly, without any configuration file.

So, all of this should work:

import { Container } from 'typescript-ioc'; // The ES5 version is imported
// import { Container } from 'typescript-ioc/es5'; // The ES5 version is imported
// import { Container } from 'typescript-ioc/es6'; // // The ES6 version is imported

There is a bug in the index.js file (the one who tries to read the configuration file). It should use ES5 if running on browsers. I am fixing it, but you can use, as an workaround, the following in the meanwhile:

import { Container } from 'typescript-ioc/es5';

[thiagobustamante]

I published the 0.4.1 version to fix this issue. Please update typescript-ioc.

[drwatson1]

It's works now. Great job! Thanx a lot!