packup v0.1.10 cli don't work in some cases

[elycheikhsmail]

I use packup v0.1.10 cli for running https://github.com/KyleJune/deno-tailwind-ui-react-example packup build index.html show messages but don't really build

[kt3k]

It seems that esm.sh now has issues about react and react-dom modules. If I changed the dependency in js/deps.ts to cdn.skypack.dev like the below then it worked

diff --git a/js/deps.ts b/js/deps.ts
index 2b638b2..44fea41 100644
--- a/js/deps.ts
+++ b/js/deps.ts
@@ -1,5 +1,5 @@
-import React, { Fragment } from "https://esm.sh/react@17.0.2";
-import ReactDOM from "https://esm.sh/react-dom@17.0.2";
+import React, { Fragment } from "https://cdn.skypack.dev/react@17.0.2";
+import ReactDOM from "https://cdn.skypack.dev/react-dom@17.0.2";

 export {
   BrowserRouter,
@@ -7,18 +7,18 @@ export {
   NavLink,
   Route,
   Switch,
-} from "https://esm.sh/react-router-dom@5.2.0";
+} from "https://cdn.skypack.dev/react-router-dom@5.2.0";

-export { tw } from "https://esm.sh/twind@0.16.16";
+export { tw } from "https://cdn.skypack.dev/twind@0.16.16";
 export {
   Disclosure,
   Menu,
   Transition,
-} from "https://esm.sh/@headlessui/react@1.4.0";
+} from "https://cdn.skypack.dev/@headlessui/react@1.4.0";
 export {
   BellIcon,
   MenuIcon,
   XIcon,
-} from "https://esm.sh/@heroicons/react@1.0.3/outline";
+} from "https://cdn.skypack.dev/@heroicons/react@1.0.3/outline";

 export { Fragment, React, ReactDOM };

The built result was shown like the below

Is this correctly rendered? cc @KyleJune

[KyleJune]

Yes, that looks correct. I'll update my example repository to use latest versions of packup/twd this weekend along with switching from esm.sh to skypack.dev. If esm.sh is what's causing the issue, there must have been a breaking change on their end since it worked before.

[KyleJune]

Looks like the esm.sh issue might be related to a change in Deno 1.16.0.

https://github.com/alephjs/esm.sh/issues/225

[KyleJune]

I tried making the change to using skypack, I started getting an error in vs code saying "JSX element implicitly has type 'any' because no interface 'JSX.IntrinsicElements' exists.deno-ts(7026)". When I ran packup index.html, it would log that the index.html was bundled but when I go to http://localhost:1234, it would be blank.

vs code wont show any issues when I am using esm.sh and it will show that index.html gets bundled but is blank when I go to it too.

@kt3k Were there any other changes you made to get it working? I tried both with deno 1.16.4 and 1.17.0.

[KyleJune]

Looks like the issue was related to upgrading react-router-dom@6.1.1, If I don't update react-router-dom but switch to skypack, it works but I still always get that deno-ts(7026) error in vs code.

[KyleJune]

I created a PR on my example repo. Not really happy with the experience of using skypack or esm. They each have different issues so I'm not going to merge it yet.

https://github.com/KyleJune/deno-tailwind-ui-react-example/pull/1

[elycheikhsmail]

thank you @kt3k and @KyleJune I was offline I will try this project after tomorrow

[elycheikhsmail]

thank you @kt3k and @KyleJune I think vitejs in compat mode - when available - will more stable for building frontend app using packup

[KyleJune]

This issue can be closed, the PR linked in my previous comment resolves the issue. However, I've made additional changes to my example and it now no longer uses packup.