Cannot find module '@kitajs/html/jsx-runtime' or its corresponding type declarations.

[FedericoBiccheddu]

Prerequisites

• I have written a descriptive issue title
• I have searched existing issues to ensure the bug has not already been reported

Versions

{
	"dependencies": {
		"@kitajs/html": "3.1.2",
		"@kitajs/ts-html-plugin": "1.3.4",
	},
	"devDependencies": {
		"typescript": "5.4.2",
	}
}

Description

jsx-runtime is not installed/present in the html package.

Steps to Reproduce

• Install dependencies.
• Update tsconfig.json:

  {
    "extends": [
      "@tsconfig/strictest/tsconfig",
      "@tsconfig/node-lts/tsconfig",
    ],
    "compilerOptions": {
      "jsx": "react-jsx",
      "jsxImportSource": "@kitajs/html",
      "plugins": [
        {
          "name": "@kitajs/ts-html-plugin"
        }
      ]
    }
  }

• Add code to test like in README:

  console.log(<div safe>{String.name}</div>);`

• Hovering:
  Cannot find module '@kitajs/html/jsx-runtime' or its corresponding type declarations.ts(2307)
• Compiling:
  Error: Cannot find module '@kitajs/html/jsx-runtime'

Expected Behavior

No response

[anravell]

same problem

p.s. make new release please, I need alpine support, I see it's already done

[joncys]

I have the same problem. Very basic setup with express and @kitajs/html. Using pnpm, no idea if that's relevant.

The alternative configuration method seems to work fine.

import express from "express"
import Html from '@kitajs/html'

const html = (
  <div data-internet="wow">Hello</div>
)

const app = express()
app.get('/', (req, res) => {
  res.send(html)
})

app.listen(8080)

[arthurfiorette]

The main branch contains unreleased changes.

Please browse the readme for the last released version: v3.1.2

[anravell]

@joncys is there some blocker to release this changes? may be I can help and do some PR's

now I'm forced to build it myself with pnpm --prod deploy to my project node_modules and it make everything very complex

i wanted to temporary just copy code to ./src/lib and setup it from here, but tsconfig jsxImportSource requires it to be a package in node_modules and cant work with relative path to source code, so everything became very problematic: ci/cd, explaing to teammates how to set it up

can I help somehow so you release it

[arthurfiorette]

Please browse the readme for the last released version: v3.1.2

[anravell]

Please browse the readme for the last released version: v3.1.2

I did, but it says nothing about how to build main branch with unreleased changes to have alpine support in my project.

[arthurfiorette]

Copy this file into your definitions:

https://github.com/kitajs/html/blob/master/packages/html/alpine.d.ts

[arthurfiorette]

Hey @joncys @FedericoBiccheddu @anravell I just released next dist-tag. Would you guys mind trying it out?

npm i @kitajs/html@next

[FedericoBiccheddu]

Now it works, thank you Arthur!

[anravell]

@arthurfiorette thank you!

[7f8ddd]

Hey @joncys @FedericoBiccheddu @anravell I just released next dist-tag. Would you guys mind trying it out?

npm i @kitajs/html@next

I'm using Bun and it's saying error: Cannot find module "@kitajs/html/jsx-dev-runtime", 4.0.0@next. Not jsx-runtime.

[arthurfiorette]

Hey @7f8ddd, can you show your tsconfig?

[7f8ddd]

Hey @7f8ddd, can you show your tsconfig?

    "jsx": "react-jsx",
    "jsxImportSource": "@kitajs/html"

I think a Bun issue needs to be made, it's a Bun specific problem.

I worked around it by just copying the jsx-dev-runtime file and changing the export at the very bottom from jsx to jsxDEV:jsx.

[JacopoPatroclo]

@arthurfiorette I feel that we should export both jsx and jsxDEV functions from the jsx-runtime file and also create a jsx-dev-runtime file. They should have the same signature, this should be an easy thing to do.

@7f8ddd you should open an issue to Bun about this. Bun should handle the difference between dev and prod when it bundles. For this library, the difference is zero but for something like React you should not use the dev mode in a prod build.

[arthurfiorette]

I feel that we should export both jsx and jsxDEV functions from the jsx-runtime file and also create a jsx-dev-runtime file. They should have the same signature, this should be an easy thing to do.

Sure, this is probably the correct way to solve this.

However, I made some tests a week ago, and this scared me a little bit. Bun was rendering objects in production mode, even for KitaJS. Just like as if bun in prod mode was react-only compatible.

More tests using bun should be made, and probably also setup a CI for It.

[arthurfiorette]

Let's talk about it at #159.