How to override ionic-scripts in order to include react on build?

Question

I am trying to include in an Ionic2-Angular4 project some react components but without success. For the building process I am using ionic scripts

"build": "ionic-app-scripts build",
"serve": "ionic-app-scripts serve",

I have updated also on the tsconfig.json the compilerOptions with the below option :

{
  "compilerOptions": {
    "jsx": "react",
    "declaration": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": [
      "dom",
      "es2015"
    ],
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "target": "es5"
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ],
  "compileOnSave": false,
  "atom": {
    "rewriteTsconfig": false
  }
}

And the webpack.config.ts as below :

var path = require('path');
var webpack = require('webpack');
var ionicWebpackFactory = require(process.env.IONIC_WEBPACK_FACTORY);

module.exports = {
    entry: process.env.IONIC_APP_ENTRY_POINT,
    output: {
        path: '{{BUILD}}',
        publicPath: 'build/',
        filename: process.env.IONIC_OUTPUT_JS_FILE_NAME,
        devtoolModuleFilenameTemplate: ionicWebpackFactory.getSourceMapperFunction(),
    },
    devtool: process.env.IONIC_SOURCE_MAP_TYPE,

    resolve: {
        extensions: ['.ts', '.js', '.tsx', '.json'],
        modules: [path.resolve('node_modules')]
    },

    module: {
        loaders: [
            {
                test: /\.json$/,
                loader: 'json-loader'
            },
            {
                test: /\.tsx?$/,
                loader: process.env.IONIC_WEBPACK_TRANSPILE_LOADER
            },
            {
                test: /\.js$/,
                loader: process.env.IONIC_WEBPACK_TRANSPILE_LOADER
            }
        ]
    },

    plugins: [
        ionicWebpackFactory.getIonicEnvironmentPlugin(),
        new webpack.EnvironmentPlugin(['IONIC_ENV'])
    ],
    node: {
        fs: 'empty',
        net: 'empty',
        tls: 'empty'
    }
};

Also I have added on package.json the below libraries :

    "react": "^15.6.1",
    "react-dev-utils": "^4.0.1",
    "react-dom": "^15.6.1",
    "react-redux": "^5.0.6",
    "redux": "^3.7.2",

Every time I am trying to build, the build is finished correctly but I am getting the error :

Error: Cannot find module "./TestBar"

The TestBar is a ReactComponent which I am trying to import it on an Angular component. The code is below for

TestBar.tsx file:

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { Injector } from '@angular/core';
import { ValueStore}  from './redux/list.store';
import {Model} from './model';

interface ReactChildComponentViewProps {
    store: ValueStore;
    injector: Injector;
}

let TestBar = React.createClass<ReactChildComponentViewProps, any> ({

    getInitialState: function () {
        let model: Model = this.props.injector.get(Model);
        console.log('Using Angular 2 injector in React body, model.uuid: ' + model);
        this.props.store.store.subscribe(() => {
            this.setState({
                'elements': this.props.store.store.getState()
            });
        });
        return {
            'title': this.props.title,
            'elements': this.props.store.store.getState()
        };
    },
    render() {
        return (
                <div>aaaa</div>
        );
    }
});


export class ReactChildComponentView {

    static initialize( store, injector, containerId) {
        ReactDOM.render(<TestBar  store={store} injector={injector}/>, document.getElementById(containerId));
    }
}

Have ever someone tried something similar ?

Yes, I know that but I want to see if it is possible. I have seen this http://blog.robertjesionek.com/angular-2-and-react-components-within-a-single-app/ and I believed it will be really straightforward — geo, Sep 24 '17 at 12:24
@lilezek, react-native requires a complete rewrite of the JSX/TSX code. It has a completely different set of components. What geo is looking to do is reasonable. — Samuel Neff, Sep 24 '17 at 14:01

score 1 · Accepted Answer · answered Sep 25 '17 at 10:16

Finally, I managed to override the webpack. As, I saw in this post How to extend default webpack config in Ionic v2 in order to be able to override the webpackconfig you should do the steps below :

On the root folder of your project create config folder and copy the file webpack.config.js there (this file is located in ..\node_modules\@ionic\app-scripts\config
Modify the copied file as required
In the file package.json from your project add:

"config": {
   "ionic_bundler": "webpack",
   "ionic_webpack": "./config/webpack.config.js"
}

How to override ionic-scripts in order to include react on build?

1 Answers1