Preact: TypeError: VNode is undefined in Fable.io app

Created on 8 Dec 2019  路  2Comments  路  Source: preactjs/preact

Running preact 10.0.5 with preact-compat 3.19.0 in a fable 2.4.10 results in error

TypeError: VNode is undefined

Steps to reproduce

package.json

{
    "private": true,
    "scripts": {
        "start": "webpack-dev-server",
        "build": "webpack"
    },
    "dependencies": {
        "preact": "10.0.5",
        "preact-compat": "3.19.0"
    },
    "devDependencies": {
        "@babel/core": "^7.7.5",
        "fable-compiler": "^2.4.10",
        "fable-loader": "^2.1.8",
        "webpack": "^4.41.2",
        "webpack-cli": "^3.3.10",
        "webpack-dev-server": "^3.9.0"
    }
}

webpack.config.js

var path = require('path')

module.exports = {
    mode: 'development',
    entry: './src/App.fsproj',
    resolve: {
        alias: {
            react: 'preact-compat',
            'react-dom': 'preact-compat'
        }
    },
    output: {
        path: path.join(__dirname, './public'),
        filename: 'bundle.js',
    },
    devServer: {
        contentBase: './public',
        port: 8080,
    },
    module: {
        rules: [{
            test: /\.fs(x|proj)?$/,
            use: 'fable-loader'
        }]
    }
}

preact 8.5.3 works fine.

Most helpful comment

You need to alias to preact/compat instead of preact-compat. The latter is meant for 8.x while the former is meant for 10.

All 2 comments

You need to alias to preact/compat instead of preact-compat. The latter is meant for 8.x while the former is meant for 10.

Thanks a lot @JoviDeCroock !

Was this page helpful?
0 / 5 - 0 ratings

Related issues

k15a picture k15a  路  3Comments

kossnocorp picture kossnocorp  路  3Comments

marcosguti picture marcosguti  路  3Comments

philipwalton picture philipwalton  路  3Comments

matthewmueller picture matthewmueller  路  3Comments