Using react2angular, react isn't recognized, no erros

Issue

I am transitioning an angularjs project to react. For this I'm using react2angular. I've followed the tutorials, but for some reason, react isn't recognized. I'm not receiving any errors. Note: I've also tried ngReact and had the same problem.

I have a very simple react component:
MyComponent.jsx

import { Component } from 'react'
import { react2angular } from 'react2angular'

class MyComponent extends Component {
  render() {
    console.log('MyComponent Render');
    return <div>
      <p>FooBar: {this.props.fooBar}</p>
      <p>Baz: {this.props.baz}</p>
    </div>
  }
}

angular
    .module('deuiApp', [])
    .component('myComponent', react2angular(MyComponent, ['fooBar', 'baz']));

I added the component to:
text.tpl.html

<div>
  <div class="QuestText">
    <my-component foo-bar="3" baz="'baz'"></my-component>
  </div>
</div>

When it's running and I inspect the html page in Chrome's Developer Tools, I see this.

<div class="QuestText">
  <my-component foo-bar="3" baz="'baz'"></my-component>
</div

Nothing shows up in the console. It's as if it doesn't even recognize react.

More Information:

In package.json -- npm packages are installed

dependencies: {
    "angular": "1.6.10",
    "angular-cookies": "1.6.10",
    "angular-i18n": "1.6.10",
    "angular-resource": "1.6.10",
    "angular-sanitize": "1.6.10",
    "prop-types": "^15.7.2",
    "react": "^16.11.0",
    "react-bootstrap": "0.32.1",
    "react-dom": "^16.11.0",
    "react2angular": "^4.0.6",
},
devDependencies: {
    "babel-loader": "7.1.2",
    "babel-plugin-transform-react-jsx": "6.24.1",
    "webpack": "3.11.0",
    "webpack-dev-server": "2.11.2",
}

Relevant information in webpack.config.js

module.exports = function () {
  const config = {};

  config.resolve = {
    extensions: ['.js', '.jsx', '.ts', '.css', '.scss']
  };
  config.devtool = 'source-map'
  config.module = {
    rules: [
      {
        test: /\.(js|jsx)$/,
        use: ['ng-annotate-loader', {
          loader: 'awesome-typescript-loader',
          options: {
            entryFileIsJs: true,
            transpileOnly: true
           }
        }],
        exclude: [/node_modules/],
      }]
  }

 return config;
}();

.babelrc

{
  "plugins": ["transform-react-jsx"],
  "presets": [
    ["env", {
      "modules": false,
      "targets": {
        "node": "current",
        "browsers": [
          "chrome >= 59",
          "firefox >= 50",
          "ie >= 11",
          "edge >= 40"
        ]
      }
    }]
  ]
}

I'm at a loss. I'd appreciate any help I can get.

Solution

I think you are missing the right injection way, because in the documentation of react2angular it says

Dependency Injection It's easy to pass services/constants/etc. to your React component: just pass them in as the 3rd argument, and they will be available in your component's Props. For example:

angular
  .module('myModule', [])
  .constant('FOO', 'FOO!')
  .component('myComponent', react2angular(MyComponent, [], ['$http', 'FOO']))

your code must be in this order

angular
    .module('deuiApp', [])
    .component('myComponent', react2angular(MyComponent, [], ['fooBar', 'baz']));

Answered By - FarukT