HyperappでJSX記法を使うことができない。

Hyperappの導入にチャレンジしています。
h関数でレンダリングするところまでは成功しているのですが、
JSX記法を使ってレンダリングしようとすると、何も表示されず、コンソールにエラーも出ません。
BabelやWebpackの設定部分に誤りがあるのだろうと予測していますが、
調べても情報が少なく、公式サイトやGithubにもJSXの導入部分の説明が見当たらないため、
手詰まりしています。
解決法がわかる方、ご教示いただけたら幸いです。

ローカル環境にNode.js(Express)のサーバーを起動して開発しています。

ディレクトリ構造

***/
├─ node_modules
├─ public
│   ├─ css
│   │  ├─ common.css
│   │  └─ reset.css
│   ├─ dist
│   │  └─ bundle.js
│   └─ html
│      └─ index.html
├─ script
│   └─ hyperapp.js
├─ .babelrc
├─ .gitignore
├─ package-lock.json
├─ package.json
├─ web-server.js
└─ webpack.config.js

package.json

{
  "name": "***",
  "version": "1.0.0",
  "description": "",
  "main": "web-server.js",
  "scripts": {
    "start": "node node_modules/nodemon/bin/nodemon.js web-server.js & npx webpack --watch"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/***/***.git"
  },
  "author": "***",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/***/***/issues"
  },
  "homepage": "https://github.com/***/***#readme",
  "dependencies": {
    "@babel/plugin-transform-react-jsx": "^7.9.4",
    "ejs": "^3.1.2",
    "express": "^4.17.1",
    "hyperapp": "^2.0.4",
    "nodemon": "^2.0.3"
  },
  "devDependencies": {
    "@babel/core": "^7.9.6",
    "@babel/preset-env": "^7.9.6",
    "babel-core": "^6.26.3",
    "babel-loader": "^8.1.0",
    "babel-plugin-transform-react-jsx": "^6.24.1",
    "babel-preset-es2015": "^6.24.1",
    "babelify": "^10.0.0",
    "browserify": "^16.5.1",
    "bundle-collapser": "^1.4.0",
    "uglifyify": "^5.0.2",
    "uglifyjs": "^2.4.11",
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.11"
  }
}

webpack.config.js

module.exports = {
    mode: 'development',
    entry: `${__dirname}/script/hyperapp.js`,
    output: {
        path: `${__dirname}/public/dist`,
        filename: "bundle.js"
    },
    module: {
        rules: [{
            test: /.js$/,
            exclude: /node_modules/,
            loader: "babel-loader"
        }]
    }
}

.babelrc

{
    "presets": ["@babel/preset-env"],
    "plugins": [[
        "transform-react-jsx",
        { "pragma": "h" }
    ]]
}

web-server.js

const express = require('express');
const server = express();
const port = 3000;
const path = require('path');

server.set( 'view engine', 'ejs' );
server.use( '/' , express.static( __dirname+'/public' ) );
server.use( '/' , express.static( __dirname+'/public/html' ) );
server.use( '/' , express.static( __dirname+'/public/css' ) );
server.use( '/' , express.static( __dirname+'/public/dist' ) );

server.get( '/', ( request, response )=>{
    response.status(200).sendfile( 'index' );
});

server.listen(port);

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>***</title>
    <script type="module" src="bundle.js"></script>
</head>
<body>
  <main id="app"></main>
</body>
</html>

hyperapp.js

import { h, app } from "hyperapp";

const state = {
    greeting: "こんにちは世界"
};
const actions = {};
const view = state => <h1 id="title">{state.greeting}</h1>;

app(state, actions, view, document.body);

[試してみたこと]
webpack.config.jsのpresetsは、このサイトによると"es2015"と指定することになっていますが、
ビルド時にエラーが出たので、他サイトを検索して"@babel/preset-env"に書き換えております。

行動規範の内容に同意します

回答1件

ベストアンサー

とりあえず以下の変更で動きました。

index.html

diff
1 <!DOCTYPE html>
2 <html lang="ja">
3 <head>
4     <meta charset="UTF-8">
5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
6     <title>***</title>
7-    <script type="module" src="bundle.js"></script>
8 </head>
9 <body>
10   <main id="app"></main>
11+  <script src="bundle.js"></script>
12 </body>
13 </html>

hyperapp.js

diff
1 import { h, app } from "hyperapp";
2 
3 const state = {
4     greeting: "こんにちは世界"
5 };
6 const actions = {};
7 const view = state => <h1 id="title">{state.greeting}</h1>;
8 
9-app(state, actions, view, document.body);
10+app({
11+  init: state,
12+  view: view,
13+  node: document.getElementById("app")
14+});

投稿2020/04/30 18:46

hoshi-takanori

総合スコア7901

H40831

2020/05/01 04:10 編集

ご回答ありがとうございます！ちょうど、公式のSlackコミュニティにも質問してみて解決していたところです。 scriptタグはhead内でも動いたのですが、 app関数の引数の渡し方は完全に間違っていたみたいです！きっと、古い情報を参考にしていたのですね。 h関数の描画ができていたのは何故なのか疑問ですが、解決してよかったです！初歩的な質問にご回答いただき、ありがとうございました！

行動規範の内容に同意します