Reactor Webpack & TypeScript

[jsheely]

I am unable to get TypeScript to work probably with the reactor-webpack-plugin. It seems like it's having issues with the imports.

Using the reactor-conference-app as a starting point. I modified all the files to be .tsx

Used the import references to be valid for TypeScript

// Layout.tsx
import * as React from 'react';
import { Component } from 'react';
import { Container } from '@extjs/ext-react';
import Menu from './Menu';
import AppBar from './AppBar';
import Search from './Search';

But right now it looks like the weback plugin is not pulling in any of the react components. So I get this error

warning.js:36 Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in. Check the render method of `Layout`.
    in Layout (created by App)
    in Router (created by ConnectedRouter)
    in ConnectedRouter (created by App)
    in Provider (created by App)
    in App

Any advice?

[Mark.Brocato]

We don't have a good example configuration for TypeScript at the moment. We are hoping to include that as part of the 6.5.1 release in a few weeks.

[jsheely]

Are you suggesting that it can be done with the current tool chain and there just isn't an example template? Or there will be some modification of the current packages to get it to work?

I'll help test and work out and issues if you point me in the right direction. PUT ME IN COACH

Thank you,
Jon

[Mark.Brocato]

There will need to be a TypeScript-specific variant of the webpack plugin. There is already one available in the community: https://github.com/unional/reactor-webpack-ts-plugin. I've actually contributed to it but I haven't tested it with the latest release of ExtReact.

With that plugin, you use the reactify function instead of importing components from ext-react. So for example, instead of:

import { Grid } from '@extjs/ext-react';

you do:

import { reactify } from '@extjs/reactor';
const Grid = reactify('grid'); // use lower case component name here

I think we can make this difference go away, and we hope to offer official support for TypeScript soon.

[jsheely]

Thanks Mark,

Yea that's what I was afraid of. I actually went down that route and saw the modifications to the import statements. I ran into issues trying to do const TitleBar = reactify('titlebar') as any and it couldn't find titlebar. Container, Button, grid all worked fine.

Seems a little band-aide hacky. I agree we can probably figure out a way to keep the original import style and just run at a different point in the webpack pipeline.

Jon

[Mark.Brocato]

Are you able to share your current webpack configuration with me? That would help me find the least invasive path to improving our TypeScript support.

[jsheely]

Sure, I'm actually just using the one out of the reactor-conference-app with a couple modifications.

const webpack = require('webpack');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtJSReactorWebpackPlugin = require('@extjs/reactor-webpack-plugin');
// const ExtJSReactorWebpackTSPlugin = require('reactor-webpack-ts-plugin').default;
const CopyWebpackPlugin = require('copy-webpack-plugin');
const sourcePath = path.join(__dirname, './src');


module.exports = function (env) {
    const nodeEnv = env && env.prod ? 'production' : 'development';
    const isProd = nodeEnv === 'production';


    const plugins = [
        new ExtJSReactorWebpackPlugin({
            theme: 'theme-conference-app',
            production: isProd,
        }),
        new webpack.EnvironmentPlugin({
            NODE_ENV: nodeEnv
        }),
        new CopyWebpackPlugin([{
            from: path.join(__dirname, 'resources'),
            to: 'resources'
        }])
    ];


    if (isProd) {
        plugins.push(
            new webpack.LoaderOptionsPlugin({
                minimize: true,
                debug: false
            }),
            new webpack.optimize.UglifyJsPlugin({
                compress: {
                    warnings: false,
                    screw_ie8: true
                }
            })
        );
    } else {
        plugins.push(
            new webpack.HotModuleReplacementPlugin()
        );
    }


    plugins.push(new HtmlWebpackPlugin({
        template: 'index.html',
        hash: true
    }));


    return {


        devtool: isProd ? 'source-map' : 'cheap-module-source-map',
        context: sourcePath,


        entry: [
            './index.tsx'
        ],


        output: {
            path: path.join(__dirname, 'build'),
            filename: 'bundle.js'
        },


        module: {
            rules: [{
                    test: /\.ts(x?)$/,
                    exclude: /node_modules/,
                    use: [
                        'awesome-typescript-loader'
                    ]
                },
                {
                    test: /\.(js|jsx)$/,
                    exclude: /node_modules/,
                    use: [
                        'babel-loader'
                    ],
                },
                {
                    test: /\.css$/,
                    use: [
                        'style-loader',
                        'css-loader'
                    ]
                }
            ]
        },


        resolve: {
            extensions: ['.js', '.jsx', '.ts', '.tsx'],
            // The following is only needed when running this boilerplate within the extjs-reactor repo with lerna bootstrap.  You can remove this from your own projects.
            alias: {
                "react-dom": path.resolve('./node_modules/react-dom'),
                "react": path.resolve('./node_modules/react')
            }
        },


        plugins,


        stats: {
            colors: {
                green: '\u001b[32m',
            }
        },


        devServer: {
            contentBase: './build',
            historyApiFallback: true,
            port: 8085,
            compress: isProd,
            inline: !isProd,
            hot: !isProd,
            stats: {
                assets: true,
                children: false,
                chunks: false,
                hash: false,
                modules: false,
                publicPath: false,
                timings: true,
                version: false,
                warnings: true,
                colors: {
                    green: '\u001b[32m'
                }
            },
        }
    };
};

[Mark.Brocato]

Thank you! This will be very helpful.

[Mark.Brocato]

Updates:

The extjs-reactor repo now includes a TypeScript Boilerplate. For now it uses a prerelease of @extjs/reactor-webpack-plugin and @extjs/reactor v1.0.3. The stable release of 1.0.3 should come in the next week or two. Only minor modifications to the existing packages were needed. The key to getting ExtReact to work with TypeScript is to:

1.) Configure webpack to use babel-loader and @extjs/reactor-babel-plugin in addition to a typescript loader (the boilerplate uses awesome-typescript-loader):

module: {
    rules: [
        {
            test: /\.(ts|tsx)$/,
            exclude: /node_modules/,
            use: [
                {
                    loader: 'babel-loader',
                    options: {
                        "plugins": [
                            "@extjs/reactor-babel-plugin"
                        ]
                    }
                },
                {
                    loader: 'awesome-typescript-loader'
                }
            ]
        }
    ]
}

2.) Use the following in your tsconfig.json. This allows the the import statements to pass through to webpack where @extjs/reactor-webpack-plugin can use them to produce the Ext JS build.

"module": "es2015"

When you get a chance, could you try it out and let me know if that works for you?

[jsheely]

Mark,

That works perfectly. +10 on being able to write normal import statements as well. Great work!

Jon