[0.3.0] module import issue from esm.sh

[FallingSnow]

$ deno install -A -f --location=http://localhost -n aleph https://deno.land/x/aleph@0.3.0-alpha.2/cli.ts
$ aleph dev
Download https://deno.land/x/aleph@0.3.0-alpha.2/cli/dev.ts
Download https://deno.land/x/aleph@0.3.0-alpha.2/server/mod.ts
Download https://deno.land/x/aleph@0.3.0-alpha.2/server/server.ts
Download https://deno.land/x/aleph@0.3.0-alpha.2/server/app.ts
Download https://deno.land/x/aleph@0.3.0-alpha.2/framework/core/routing.ts
Download https://deno.land/x/aleph@0.3.0-alpha.2/compiler/mod.ts
Download https://deno.land/x/aleph@0.3.0-alpha.2/framework/core/events.ts
Download https://deno.land/x/aleph@0.3.0-alpha.2/compiler/dist/wasm.js
Download https://deno.land/x/aleph@0.3.0-alpha.2/compiler/dist/wasm-checksum.js
Download https://deno.land/x/aleph@0.3.0-alpha.2/compiler/dist/wasm-pack.js
Check https://deno.land/x/aleph@0.3.0-alpha.2/cli/dev.ts
INFO Aleph server config loaded from aleph.config.js
INFO Download https://deno.land/x/aleph@v0.3.0-alpha.2/mod.ts
INFO Force download from https://deno.land/x/aleph@v0.3.0-alpha.2/mod.ts
ERROR swc: Expected \';\', \'}\' or <eof> at https://deno.land/x/aleph@v0.3.0-alpha.2/mod.ts:1:4

Notice the missing v (for version) in the download link. This is added in in the force download causing it to access a 404.

[ije]

thanks @FallingSnow, i just pushed the correct tag v0.3.0-alpha.3 and improved the fetchDependency method:

deno install -A -f --location=http://localhost -n aleph https://deno.land/x/aleph@v0.3.0-alpha.3/cli.ts

[FallingSnow]

Hmmm. Getting a couple different errors.

$ deno install -A -f --location=http://localhost -n aleph https://deno.land/x/aleph@v0.3.0-alpha.3/cli.ts
✅ Successfully installed aleph                                                                                                                                                                                                                                                                                                                                                                                                              
/home/ayrton/.deno/bin/aleph                                                                                                                                                                                                                                                                                                                                                                                                                 
                                                                                                                                                                                                                                                                                                                                                                                                                                             
$ aleph dev -L debug
INFO Aleph server config loaded from aleph.config.js                                                                                                                                                                                                                                                                                                                                                                                         
error: Is a directory (os error 21)                                                                                                                                                                                                                                                                                                                                                                                                          
Force download https://deno.land/x/aleph@v0.3.0-alpha.2/mod.ts                                                                                                                                                                                                                                                                                                                                                                               
error: Is a directory (os error 21)                                                                                                                                                                                                                                                                                                                                                                                                          
Force download https://deno.land/x/aleph@v0.3.0-alpha.2/framework/react/hooks.ts                                                                                                                                                                                                                                                                                                                                                             
error: Is a directory (os error 21)                                                                                                                                                                                                                                                                                                                                                                                                          
Force download https://deno.land/x/aleph@v0.3.0-alpha.2/framework/react/context.ts                                                                                                                                                                                                                                                                                                                                                           
error: Is a directory (os error 21)                                                                                                                                                                                                                                                                                                                                                                                                          
Force download https://deno.land/x/aleph@v0.3.0-alpha.2/framework/react/util.ts                                                                                                                                                                                                                                                                                                                                                              
error: Is a directory (os error 21)                                                                                                                                                                                                                                                                                                                                                                                                          
Force download https://deno.land/x/aleph@v0.3.0-alpha.2/framework/react/error.ts                                                                                                                                                                                                                                                                                                                                                             
Download https://esm.sh/swr?external=react&dev
...
Download https://cdn.esm.sh/v15/react-flow-renderer@8.7.0/dist/theme-default.css
Download https://cdn.esm.sh/v15/react-flow-renderer@8.7.0/dist/additional-components/ReactFlowProvider/index.d.ts
error: An unsupported media type was attempted to be imported as a module.
  Specifier: https://cdn.esm.sh/v15/react-flow-renderer@8.7.0/dist/theme-default.css
  MediaType: Unknown
Download https://esm.sh/graphql-tag?dev
...
Download https://cdn.esm.sh/v15/graphql@15.4.0/jsutils/PromiseOrValue.d.ts                                                                                                                                                                                                                                                                                                                                                                   
error: Is a directory (os error 21)                                                                                                                                                                                                                                                                                                                                                                                                          
Force download https://deno.land/x/aleph@v0.3.0-alpha.3/framework/react/bootstrap.ts                                                                                                                                                                                                                                                                                                                                                         
DEBUG init compiler wasm in 659ms                                                                                                                                                                                                                                                                                                                                                                                                            
DEBUG compile 'https://deno.land/x/aleph@v0.3.0-alpha.3/framework/react/bootstrap.ts' in 673ms                                                                                                                                                                                                                                                                                                                                               
DEBUG compile 'https://deno.land/x/aleph@v0.3.0-alpha.3/shared/util.ts' in 12ms                                                                                                                                                                                                                                                                                                                                                              
DEBUG compile 'https://deno.land/x/aleph@v0.3.0-alpha.3/shared/constants.ts' in 1ms                                                                                                                                                                                                                                                                                                                                                          
DEBUG compile 'https://deno.land/x/aleph@v0.3.0-alpha.3/framework/core/routing.ts' in 26ms                                                                                                                                                                                                                                                                                                                                                   
DEBUG compile 'https://deno.land/x/aleph@v0.3.0-alpha.3/framework/core/events.ts' in 32ms                                                                                                                                                                                                                                                                                                                                                    
error: Is a directory (os error 21)                                                                                                                                                                                                                                                                                                                                                                                                          
Force download https://deno.land/x/aleph@v0.3.0-alpha.3/framework/react/pageprops.ts                                                                                                                                                                                                                                                                                                                                                         
DEBUG compile 'https://deno.land/x/aleph@v0.3.0-alpha.3/framework/react/pageprops.ts' in 5ms                                                                                                                                                                                                                                                                                                                                                 
DEBUG compile 'https://deno.land/x/aleph@v0.3.0-alpha.3/types.ts' in 4ms                                                                                                                                                                                                                                                                                                                                                                     
error: Is a directory (os error 21)
Force download https://deno.land/x/aleph@v0.3.0-alpha.3/framework/react/error.ts
DEBUG compile 'https://deno.land/x/aleph@v0.3.0-alpha.3/framework/react/error.ts' in 6ms 
error: Is a directory (os error 21)
Force download https://deno.land/x/aleph@v0.3.0-alpha.3/framework/react/util.ts
DEBUG compile 'https://deno.land/x/aleph@v0.3.0-alpha.3/framework/react/util.ts' in 11ms 
error: Is a directory (os error 21)
Force download https://deno.land/x/aleph@v0.3.0-alpha.3/framework/react/router.ts
DEBUG compile 'https://deno.land/x/aleph@v0.3.0-alpha.3/framework/react/router.ts' in 15ms 
error: Is a directory (os error 21)
Force download https://deno.land/x/aleph@v0.3.0-alpha.3/framework/react/context.ts
DEBUG compile 'https://deno.land/x/aleph@v0.3.0-alpha.3/framework/react/context.ts' in 3ms 
error: Is a directory (os error 21)
Force download https://deno.land/x/aleph@v0.3.0-alpha.3/framework/core/hmr.ts
DEBUG compile 'https://deno.land/x/aleph@v0.3.0-alpha.3/framework/core/hmr.ts' in 12ms 
error: Is a directory (os error 21)
...
DEBUG init project in 38605ms
INFO Start watching code changes...
INFO Aleph server ready on http://localhost:8080

Let me know if you need the full log.

When opening in the browser I get a white screen and

[ije]

ok, i am going to write a standalone cache instead of Deno.run({ cmd: ['deno', 'cache', url] })

[ije]

@v0.3.0-alpha.4 is released, please try again, thanks

[FallingSnow]

Console output looks ok. Now just getting a white page with these errors in the browser.

[ije]

@FallingSnow thanks, can you please post your component code?

[FallingSnow]

This is aleph init hello with a couple lines added to app.tsx. It produces a similar error.
https://github.com/FallingSnow/aleph.js-issue-118

[ije]

thanks, please use https://esm.sh/swr instead of https://esm.sh/swr?external=react, here no need to add the external, the new compiler will handle it to the correct React dep

[ije]

but i guess the 404 error in browser is caused by the ?external=react part in the import URL, i will try run your case, thank you @FallingSnow , great help!

[FallingSnow]

Got it. Now I'm running into Uncaught (in promise) SyntaxError: The requested module '../-/deno.land/x/aleph@v0.3.0-alpha.4/mod.js' does not provide an export named 'Link'. I already removed my references to Import and Head, but this seems like a bit much, has the way these components are referenced changed?

[FallingSnow]

I think the download with ?external=react is OK. It's the part where the browser is told to access it at swr_external=react that seems to be the issue.

[shadowtime2000]

Got it. Now I'm running into Uncaught (in promise) SyntaxError: The requested module '../-/deno.land/x/aleph@v0.3.0-alpha.4/mod.js' does not provide an export named 'Link'. I already removed my references to Import and Head, but this seems like a bit much, has the way these components are referenced changed?

Use <a> instead it will automatically resolve to <Link> if it is relative I think @FallingSnow

[ije]

@FallingSnow as @shadowtime2000 mentioned, the new compiler also will transpile the native <a> tag to direct between pages, no need to import Link Component at all.

[ije]

Smart JSX Transform

The new compiler will transpile the JSX intelligently, with this you don't need to import Aleph's specific components, like Head, Link, Import, etc. Just use the native JSX elements instead:

export default function App() {
  return (
    <>
      {/* head for ssr */}
      <head>
        <title>Hello World</title>
      </head>

      {/* import css */}
      <link rel="stylesheet" href="../styles/app.css" />

      {/* import componeny asynchronously */}
      <link
        rel="component"
        href="../components/logo.tsx"
        data-props={{ size: 200 }}
        data-fallback={<div>Loading...</div>}
      />

      {/* redirct pages */}
      <a href="/about">About</a>

      {/* nav link */}
      <a
       rel="nav"
       href="/about"
       data-active-className="active"
       data-active-style={{ color: 'purple' }}
     >About</a>

      {/* prefetch pages */}
      <a rel="prefetch" href="/about">About</a>

      {/* custom scripts */}
      <script src="https://cdn.google.com/ga.js"></script>
      <script>{`
        function gtag() {
          dataLayer.push(arguments)
         }
         window.dataLayer = window.dataLayer || [];
         gtag("js", new Date());
         gtag("config", "G-1234567890");
      `}</script>
    </>
  )
}

Inline CSS

Add inline CSS by style tag with SSR support:

const color = '#d63369'

export default function App() {
  return (
    <>
      <h1>Hello World</h1>
      <style>{`
        h1 {
          color: ${color};
        }
      `}</style>
    </>
  )
}