Results 1 to 10 of 10

Thread: Reactor Webpack & TypeScript

  1. #1
    Sencha User
    Join Date
    Mar 2012
    Location
    Pennsylvania
    Posts
    37
    Answers
    1

    Default Reactor Webpack & TypeScript

    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
    Code:
    // 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
    Code:
    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?

  2. #2
    Sencha User Mark.Brocato's Avatar
    Join Date
    Mar 2015
    Location
    Maryland
    Posts
    482
    Answers
    114

    Default

    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.

  3. #3
    Sencha User
    Join Date
    Mar 2012
    Location
    Pennsylvania
    Posts
    37
    Answers
    1

    Default

    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

  4. #4
    Sencha User Mark.Brocato's Avatar
    Join Date
    Mar 2015
    Location
    Maryland
    Posts
    482
    Answers
    114

    Default

    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:

    Code:
    import { Grid } from '@extjs/ext-react';
    you do:

    Code:
    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.

  5. #5
    Sencha User
    Join Date
    Mar 2012
    Location
    Pennsylvania
    Posts
    37
    Answers
    1

    Default

    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

  6. #6
    Sencha User Mark.Brocato's Avatar
    Join Date
    Mar 2015
    Location
    Maryland
    Posts
    482
    Answers
    114

    Default

    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.

  7. #7
    Sencha User
    Join Date
    Mar 2012
    Location
    Pennsylvania
    Posts
    37
    Answers
    1

    Default

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

    Code:
    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'
                    }
                },
            }
        };
    };

  8. #8
    Sencha User Mark.Brocato's Avatar
    Join Date
    Mar 2015
    Location
    Maryland
    Posts
    482
    Answers
    114

    Default

    Thank you! This will be very helpful.

  9. #9
    Sencha User Mark.Brocato's Avatar
    Join Date
    Mar 2015
    Location
    Maryland
    Posts
    482
    Answers
    114

    Default

    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):

    Code:
    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.

    Code:
    "module": "es2015"

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

  10. #10
    Sencha User
    Join Date
    Mar 2012
    Location
    Pennsylvania
    Posts
    37
    Answers
    1

    Default

    Mark,

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

    Jon

Similar Threads

  1. Replies: 2
    Last Post: 18 Sep 2017, 9:16 AM
  2. [FIXED] Cannot start reactor-classic-boilerplate
    By ZVONDIC in forum Bugs
    Replies: 5
    Last Post: 24 May 2017, 1:03 AM
  3. Replies: 2
    Last Post: 19 May 2017, 9:20 AM
  4. [CLOSED] Cannot get reactor-boilerplate started
    By dkelly in forum Bugs
    Replies: 2
    Last Post: 18 May 2017, 1:17 PM
  5. TypeScript
    By ccg in forum Community Discussion
    Replies: 185
    Last Post: 14 Apr 2016, 10:51 AM

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •