inferno-hyperscript hyperscript-helpers declaration error

Question

I'm using:

• Inferno
• webpack
• typescript
• hyperscript-helpers
• hyperscript
• inferno-hyperscript

I have this 3 code line:

import h from 'inferno-hyperscript';  
import hh from 'hyperscript-helpers';  
const html = hh(h);  

this code give me this error:
TypeError: hyperscript_helpers_1.default is not a function

My package.json is:

{
  "name": "frontend",
  "version": "0.0.1",
  "private": true,
  "description": "Typescript inferno prove",
  "main": "index.js",
  "scripts": {
    "build": "webpack",
    "start": "webpack-dev-server --inline"
  },
  "author": "Leonardo Saracini",
  "license": "MIT",
  "engines": {
    "node": "7.7.4"
  },
  "dependencies": {
    "@types/ramda": "^0.24.4",
    "classnames": "^2.2.5",
    "hyperscript": "^2.0.2",
    "inferno": "^3.6.4",
    "inferno-hyperscript": "^3.6.4",
    "hyperscript-helpers": "^3.0.3",
    "inferno-redux": "^3.6.4",
    "ramda": "^0.24.1",
    "redux": "^3.7.2"
  },
  "devDependencies": {
    "@types/classnames": "^2.2.0",
    "awesome-typescript-loader": "^3.2.1",
    "css-loader": "^0.28.4",
    "ejs-loader": "^0.3.0",
    "file-loader": "^0.11.2",
    "html-webpack-plugin": "^2.29.0",
    "source-map-loader": "^0.2.1",
    "style-loader": "^0.18.2",
    "typescript": "^2.4.2",  
    "webpack": "^3.3.0",  
    "webpack-bundle-analyzer": "^2.8.3",  
    "webpack-dev-server": "2.5.1"  
  }
}  

My webpack.config.js is:

var webpack = require('webpack');
var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
//var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
// definePlugin takes raw strings and inserts them, so you can put strings of JS if you want.
var definePlugin = new webpack.DefinePlugin({
  __DEV__: JSON.stringify(JSON.parse(process.env.BUILD_DEV || 'true')),
  __PRERELEASE__: JSON.stringify(JSON.parse(process.env.BUILD_PRERELEASE || 'false'))
});

module.exports = {
  entry: path.resolve(__dirname, 'src/index.ts'), //entrata da compilare. Se ne possono aggiungere molte creando vari profili
  output: {
    filename: 'bundle.js', //file di output dove mettere il compilato
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/'
  },
  devServer: {
    hot: true, // Tell the dev-server we're using HMR
    contentBase: path.resolve(__dirname, 'dist'),
    publicPath: '/'
  },
    devtool: "inline-source-map",
  plugins: [
        definePlugin,
    new webpack.LoaderOptionsPlugin({
      debug: true
    }),
    new HtmlWebpackPlugin({
      title: 'Prima prova',
      template: 'src/index.ejs'
    }),
    new webpack.HotModuleReplacementPlugin() // Enable HMR
    //, new BundleAnalyzerPlugin()
    ],
  module: {
    rules: [// rules was named loaders in webpack 1 or 2; but is be renamed "rules" in now
            // All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'.
      {
        test: /\.ejs$/,
        loader: 'ejs-loader'
      },
      {
        test: /\.tsx?$/,
        loader: 'awesome-typescript-loader',
        options: {
          transpileOnly: true
        }
      },
            // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
      {
        test: /\.js$/,
                enforce: 'pre',
        loader: 'source-map-loader'
      },
            { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192' }, // inline base64 URLs for <=8k images, direct URLs for the rest
            { test: /\.css$/, use: ['style-loader', 'css-loader'] },
      { test: /\.(png|svg|jpg|gif)$/,
        use: [
          'file-loader'
        ]
      },
      { test: /\.(woff|woff2|eot|ttf|otf)$/,
        use: [
          'file-loader'
        ]
      }

    ]
  },
  resolve: {
    modules: [__dirname, 'node_modules'],
    // Add `.ts` and `.tsx` as a resolvable extension.
    extensions: ['.webpack.js', '.web.js', '.ts', '.tsx', '.js', '.json'] // note if using webpack 1 you'd also need a '' in the array as well
  }
};  

My tsconfig.json is:

{
"compilerOptions": {
    "module": "commonjs",
    "target": "es6",
    "lib": ["es6", "es7", "dom"],
    "types": [ "inferno" ],
    "noImplicitAny": true,
    "allowJs": false,
    "allowSyntheticDefaultImports": true,
    "moduleResolution": "node",
    "preserveConstEnums": true,
    "outDir": "./dist/",
    "listFiles": true,
    "sourceMap": true,
    "jsx": "preserve",
    "noImplicitReturns": false,
    "noFallthroughCasesInSwitch": true,
    "experimentalDecorators": false,
    "noUnusedLocals": true,
    "strictNullChecks": true,
    "removeComments": false
},
"exclude": [ "node_modules" ],
"include": [
    "./typing.d.ts",
    "./src/**/*.ts",
    "./src/**/*.tsx"
],
"compileOnSave": false,
"formatCodeOptions": {
    "indentSize": 2,
    "tabSize": 2,
    "newLineCharacter": "\n",
    "convertTabsToSpaces": true,
    "insertSpaceAfterCommaDelimiter": true,
    "insertSpaceAfterSemicolonInForStatements": true,
    "insertSpaceBeforeAndAfterBinaryOperators": true,
    "insertSpaceAfterKeywordsInControlFlowStatements": true,
    "insertSpaceAfterFunctionKeywordForAnonymousFunctions": false,
    "insertSpaceAfterOpeningAndBeforeClosingNonemptyParenthesis": false,
    "placeOpenBraceOnNewLineForFunctions": false,
    "placeOpenBraceOnNewLineForControlBlocks": false
},
"atom": {
    "rewriteTsconfig": true
}
}  

My typings.json is:

{
  "dependencies": {
  "debug": "registry:npm/debug#2.0.0+20160723033700",
  "ramda": "registry:dt/ramda#0.0.0+20170322181526"
  },
  "globalDependencies": {
  "classnames": "registry:dt/classnames#0.0.0+20161113184211",
  "hyperscript": "registry:dt/hyperscript#0.0.0+20161005184000",
  "node": "registry:dt/node#7.0.0+20170322231424",
  "redux": "registry:dt/redux#3.5.2+20160703092728"
  }
}  

I cannot find the right manner to declare this code.
I find a lot of examples using hyperscript and hyperscript-helpers on other framework like React and no examples mixing webpack, inferno and typescript.

Someone knows the right syntax? The error was firing executing the line const html = hh(h);
best regards

Answer 1

The solution to this error's type is to change this tsconfig.json from:

{
"compilerOptions": {
    "module": "commonjs",
    "target": "es6",
    "lib": ["es6", "es7", "dom"],

to:

{
"compilerOptions": {
    "module": "es6",
    "target": "es6",
    "lib": ["es6", "es7", "dom"],