Uncaught (in promise) TypeError: Cannot read property 'onClick' of undefined

[marawan-nwh]

When I switched to preact using aliasing via Webpack, I get the following error:

Here is my webpack.config.js file:

var path = require('path');
var webpack = require('webpack');
var ignore = new webpack.IgnorePlugin(/\.svg$/);
var nodeModulesDir = path.resolve(__dirname, 'node_modules');
var CopyWebpackPlugin = require('copy-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
var CompressionPlugin = require("compression-webpack-plugin");
var SWPrecacheWebpackPlugin = require('sw-precache-webpack-plugin');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var CleanWebpackPlugin = require('clean-webpack-plugin');
var OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin')

module.exports = {
  entry: {
    main: './src/js/app.js',
  },
  output: {
    publicPath: './',
    path: './dist/',
    filename: 'js/[name].[hash].js',
  },
  resolve: {
    alias: {
      "react": "preact-compat",
      "react-dom": "preact-compat"
    }
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              presets:
                ['react', ['es2015', {modules: false}], 'stage-0']
              },
          }
        ]
      },
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: "style-loader",
          use: ['css-loader']
        })
      },
      {
        test: /\.(png|jpg)$/,
        use: {
          loader: 'url-loader',
          options: {
            limit: 5000,
            name: '[hash:8].[ext]',
          },
        },
      },
      { test: /\.(png|woff|woff2|eot|ttf|svg)$/,
        loader: 'url-loader?limit=50000'
      }
    ],
  },
  plugins: [
    ignore,
    new CleanWebpackPlugin(['./dist/']),
    new ExtractTextPlugin('./css/main-[hash:8].css'),
    // new LodashModuleReplacementPlugin,
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development')
    }),
    // new PrepackWebpackPlugin({}),
    new webpack.optimize.OccurrenceOrderPlugin,
    new webpack.optimize.UglifyJsPlugin({
        compress: { warnings: false },
        include: /\.js$/
      }),
    new OptimizeCssAssetsPlugin({
      assetNameRegExp: /\.css$/,
      cssProcessorOptions: { discardComments: { removeAll: true } }
    }),
    // new ClosureCompilerPlugin({
    //   compiler: {
    //     language_in: 'ECMASCRIPT6',
    //     language_out: 'ECMASCRIPT5',
    //     compilation_level: 'ADVANCED'
    //   },
    //   concurrency: 3,
    // }),
    new CompressionPlugin({
        asset: "[path].gz[query]",
        algorithm: "gzip",
        test: /\.js$|\.html$|\.css$/,
        threshold: 10240,
        minRatio: 0.8
    }),
    new CopyWebpackPlugin([
        // Copy directory contents to {output}/
        { from: './css', to: 'css' },
        { from: './img', to: 'img' },
        { from: './fonts', to: 'fonts' },
    ]),
    new HtmlWebpackPlugin({
      template: './_index.html',
      filename: 'index.html',
      inject: false,
    }),
    new SWPrecacheWebpackPlugin(
        {
          cacheId: 'play-ht-embed',
          filename: 'play-embed.sw.js',
          filepath: './dist/play-embed.sw.js',
          maximumFileSizeToCacheInBytes: 4194304,
          staticFileGlobs: ['./dist' + '/**/*.{js,png,jpg,gif,svg,eot,ttf,woff,css}'],
          stripPrefix: './dist'
          // runtimeCaching: [{
          //   handler: 'cacheFirst',
          //   urlPattern: /[.]js$/,
          // }],
        }
      ),
      // new BundleAnalyzerPlugin(),
  ],
};
// new BundleAnalyzerPlugin(),
// devtool: 'source-map',

Am I doing something wrong?

[developit]

Hmm, seems like that createTwoChains() method is doing something odd:

createTwoChains: function(t) {
    var e=this.props.children.props,  // this line
        n= this.props;
    return e[t] && n[t] ? this["fire"+t] : e[t] || n[t];
}

The line I noted above should be written:

var e = Children.only(this.props.children).props,

(also, this might be affected by #415?)

[cyyyu]

I got the same issue.

By using preact-compat/lib/create-react-class instead of create-react-class I could get rid of the error.

alias: {
  'create-react-class': 'preact-compat/lib/create-react-class'
}

But after that i got another issue, onClick just didn't get triggered at all, with no errors in the console.

[developit]

The create-react-class module does not work with Preact (and cannot).

[srghma]

I had similar error Cannot read property 'onMouseEnter' of undefined, adding

alias: {
  'create-react-class': 'preact-compat/lib/create-react-class'
}

have helped, tnx