Islands Not Working in Latest Fresh 2 with Preact 10.26.6

[kylec32]

Even with a brand new generated application ex:deno run -Ar jsr:@fresh/[email protected] the generated code doesn't work (console error and interacting with buttons in the island don't do anything).

Console error:

fresh-runtime.js:29 Uncaught (in promise) ReferenceError: n is not defined
    at u (fresh-runtime.js:29:53)
    at l.__b (fresh-runtime.js:96:7)
    at l.__b (fresh-runtime.js:222:11)
    at c2.__b (parse.ts:130:1)
    at index.ts:831:1
    at O (constants.js:2:8)
    at E (constants.js:2:8)
    at _render (reviver.ts:114:5)

Downgrading to preact 10.26.5 on my personal Fresh 2 application things start to work again.

[SisyphusZheng]

Hi, could you share the link to the relevant repository?

[csvn]

I could not reproduce this after opening the dev app and pressing the buttons after running the following:

deno run -A -r jsr:@fresh/[email protected]
deno task dev

[csvn]

What Deno version are you using @kylec32? I think some things related to JSX have changed in newer Deno versions, and Fresh v2 is only tested on latest 2.x version and canary.

deno 2.3.3 (stable, release, x86_64-pc-windows-msvc)
v8 13.7.152.6-rusty
typescript 5.8.3

[SisyphusZheng]

I could not reproduce this after opening the dev app and pressing the buttons after running the following:

deno run -A -r jsr:@fresh/[email protected] deno task dev

I'm encountering the same problem as described in this issue—the button isn't functional, but I can't figure out why. I'll share the forked repository for reference.

[honmanyau]

@kylec32 @SisyphusZheng, could you please share your deno.json (or at least the imports part of it)? I have seen something similar a while ago when I was working with @testing-library/preact, and I suspect you may have a preact dependency conflict in there that's causing this.

I also can't reproduce the issue when initialising a new project (deno run -Ar jsr:@fresh/[email protected]), which seems to be what @kylec32 did.

However, I noticed in @SisyphusZheng's description in #2903 that it seems to be an update (`deno run -Ar jsr:@fresh/[email protected]) instead. For an update, I could reproduce the button not working issue (but not seeing any errors anywhere) by doing the following:

1. Initialise a new Fresh 1 project:

   deno run -A -r https://fresh.deno.dev issue-2973
   

2. Update to Fresh 2:

   cd issue-2973
   deno run -Ar jsr:@fresh/[email protected]
   ```
   

3. Follow the migration instructions for:
   • dev.ts and main.ts
   • _error.tsx.
   • Remove _req: Request from the handler in jokes.ts.
4. Start the project with deno run start and observe that the buttons don't work (I couldn't see any errors both client- and server-side.
5. Inspect dependencies in deno.json, observe that there are two preact dependencies:

   {
       "import": {
           "preact": "npm:preact@^10.26.6",
           "preact/": "https://esm.sh/[email protected]/"
       }
   }
   

6. Remove the old esm.sh dependency, the buttons should work again.

I personally haven't encountered this in my main project during migration to Fresh 2 because I switched over to npm:@preact months ago. If what's described above is indeed the problem, perhaps we should note that in the migration instructions.

[SisyphusZheng]

@kylec32 @SisyphusZheng, could you please share your deno.json (or at least the imports part of it)? I have seen something similar a while ago when I was working with @testing-library/preact, and I suspect you may have a preact dependency conflict in there that's causing this.

I also can't reproduce the issue when initialising a new project (deno run -Ar jsr:@fresh/[email protected]), which seems to be what @kylec32 did.

However, I noticed in @SisyphusZheng's description in #2903 that it seems to be an update (`deno run -Ar jsr:@fresh/[email protected]) instead. For an update, I could reproduce the button not working issue (but not seeing any errors anywhere) by doing the following:

1. Initialise a new Fresh 1 project: deno run -A -r https://fresh.deno.dev issue-2973

2. Update to Fresh 2: cd issue-2973 deno run -Ar jsr:@fresh/[email protected]

3. Follow the migration instructions for:

   • dev.ts and main.ts
   • _error.tsx.
   • Remove _req: Request from the handler in jokes.ts.

4. Start the project with deno run start and observe that the buttons don't work (I couldn't see any errors both client- and server-side.

5. Inspect dependencies in deno.json, observe that there are two preact dependencies: { "import": { "preact": "npm:preact@^10.26.6", "preact/": "https://esm.sh/[email protected]/" } }

6. Remove the old esm.sh dependency, the buttons should work again.

I personally haven't encountered this in my main project during migration to Fresh 2 because I switched over to npm:@preact months ago. If what's described above is indeed the problem, perhaps we should note that in the migration instructions.

I completely agree with your analysis. Based on your description, I realized that I forgot to remove the old version of Preact. However, even after deleting it, the functionality did not restore and there were no error messages.

To troubleshoot further, I created a brand new project using deno run -Ar jsr:@fresh/[email protected] and directly ran deno task dev. Unfortunately, I encountered the same issue where the buttons are unresponsive. The Chrome DevTools console shows the following error:

fresh-runtime.js:29 Uncaught (in promise) ReferenceError: n is not defined at u (fresh-runtime.js:29:53) at l.__b (fresh-runtime.js:96:7) at l.__b (fresh-runtime.js:222:11) at c2.__b (parse.ts:130:1) at index.ts:831:1 at O (constants.js:2:8) at E (constants.js:2:8) at _render (reviver.ts:114:5)

Digging into the fresh-runtime.js file, the error occurs at the line return "function" == typeof e3.type && e3.type != n; where n is undefined.

It seems this might be an issue with the Fresh framework itself or how it's configured in the new project. Could this be a bug in the 2.0.0-alpha.34 version? Maybe both init script and update script need adjustments to some extent, and the documentation should be fixed.

[kylec32]

Interestingly I am now unable to reproduce my issue. I did run deno run --reload on my project so maybe that cleared out something weird with my dependencies state. I had upgraded this project a long time ago from Fresh 1 and was upgrading from Fresh 2 alpha 29 -> 34 when I ran into this issue. No duplicate preact references though like mentioned above. I wish I understood why it all of a sudden is working for me though.

[SisyphusZheng]

This project was modified using the update script from 1.7.3 and according to the migration guide, encountering the same issue

• https://github.com/SisyphusZheng/fresh-project-test/tree/main/fresh-project

This project was generated via deno run -Ar jsr:@fresh/[email protected] and then directly executed dev, also encountering the same issue.

• https://github.com/SisyphusZheng/fresh-project-test/tree/main/fresh-project-2

I started another project with 1.7.3, which had no issues. I don't have time to handle this for now, just for reference.

[honmanyau]

Thank you for looking into those again @kylec32 and @SisyphusZheng! Maybe is some sort of weird dependency caching (super handwavy). 😓

This project was modified using the update script from 1.7.3 and according to the migration guide, encountering the same issue

* https://github.com/SisyphusZheng/fresh-project-test/tree/main/fresh-project

This project was generated via deno run -Ar jsr:@fresh/[email protected] and then directly executed dev, also encountering the same issue.

* https://github.com/SisyphusZheng/fresh-project-test/tree/main/fresh-project-2

I started another project with 1.7.3, which had no issues. I don't have time to handle this for now, just for reference.

Just for future reference: I cloned those and don't seem to be able to reproduce the error on my machine (macOS). 😞

[SisyphusZheng]

Hello everyone, I'd like to confirm that both the project I initialized and the one upgraded from version 1.7.3 encounter the aforementioned issue after running with .deno task dev. However, they work fine when executed with deno task build && deno task start

v2-test: https://github.com/SisyphusZheng/fresh-project-test/tree/main/freshv2-project-test

[liquanall]

I encountered the same issue. After running this command, the error disappeared, and Island works normally.

deno install -r --allow-scripts