Preact templates don't seem to work

[RickeyWard]

Just creating a new Preact Vite project results in a page that won't load.

In case its relevant, my OS is Windows 11, using windows terminal on powershell core 7 profile.

steps I followed

>deno --version
deno 1.34.3 (release, x86_64-pc-windows-msvc)
v8 11.5.150.2
typescript 5.0.4

>deno run -A npm:create-vite-extra@latest
test
deno-preact

# tried both JavaScript and TypeScript

cd test
deno task dev

  VITE v4.3.9  ready in 5272 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h to show help
Cannot find package '@babel/plugin-transform-react-jsx-development' imported from C:\Users\█████████████████████\\test\babel-virtual-resolve-base.js
12:05:36 AM [vite] Internal server error: Cannot find package '@babel/plugin-transform-react-jsx-development' imported from C:\Users\█████████████████████\test\babel-virtual-resolve-base.js

I get the vite error screen with a blank white page behind it, error shows as:

[plugin:vite:preact-jsx] Cannot find package '@babel/plugin-transform-react-jsx-development' imported from C:\Users\█████████████████████\test\babel-virtual-resolve-base.js

[bluwy]

Looks like it's happening since Deno is using strict hoisting installation in node_modules. Pretty sure it works with pnpm though, so I'm not sure why Deno is having this issue. Babel should try to resolve the plugins from @preact/preset-vite first, then fallback to resolving from /my-project/babel-virtual-resolve-base.js.

As a workaround, you can install the dep with:

// vite.config.mjs
import "npm:@babel/plugin-transform-react-jsx-development@^7.22.5"
import "npm:@babel/plugin-transform-react-jsx@^7.22.5"

Maybe this is somewhat related to denoland/deno#19418. cc @bartlomieju

[bartlomieju]

@dsherret could you take a look when you get a moment?