The Full-stack Framework for React and other in Deno.

I created a basic project with aleph init and the development server is basically not working. If I go to localhost:8080 I just get 404 page not found. This is the same case for the production server. The only thing that is working for me is aleph build which seems to be building properly.

• [x] swc via wasm-pack
• [x] jsx
  • [x] add __sourceFile prop in dev mode
  • [x] resolve Link component href prop
  • [x] resolve a to Anchor
  • [x] resolve head to Head
  • [x] resolve link to Link
  • [x] resolve script to Script
  • [x] resolve style to Style
  • [x] ~~React new JSX transform~~(https://github.com/swc-project/swc/pull/1223)
• [x] import/export resolve
• [x] sign useDeno hook
• [x] stable fast refresh plugin for the new compile
• [x] inline-style
• [x] bundle deps in production mode

Hello, on the latest version of Aleph, after running aleph init, i.e. when I then want to run aleph dev I get uncaught DomException Error telling me that Aleph is unable to set the location.

Hello Aleph.js team 👋. I was recently updating my blog post about Aleph and found that I was getting an error when following along with the current Getting Started guide. All three aleph commands, dev, start, and build result in the same error.

Commands entered:

deno install --unstable -A -f -n aleph https://deno.land/x/[email protected]/cli.ts
export PATH="/Users/ajcwebdev/.deno/bin:$PATH"
aleph init hello
cd hello
aleph dev

Error output:

Check https://deno.land/x/[email protected]/cli/dev.ts

error: Uncaught (in promise) TypeError: TS2345 [ERROR]: Argument of type 'TransformerFactory<SourceFile>' is not assignable to parameter of type 'TransformerFactory<SourceFile> | CustomTransformerFactory'.
  Type 'import("https://cdn.esm.sh/v41/[email protected]/lib/typescript.d.ts").TransformerFactory<import("https://cdn.esm.sh/v41/[email protected]/lib/typescript.d.ts").SourceFile>' is not assignable to type 'import("https://cdn.esm.sh/v41/[email protected]/lib/typescript.d.ts").TransformerFactory<import("https://cdn.esm.sh/v41/[email protected]/lib/typescript.d.ts").SourceFile>'.
    Types of parameters 'context' and 'context' are incompatible.
      Type 'import("https://cdn.esm.sh/v41/[email protected]/lib/typescript.d.ts").TransformationContext' is not assignable to type 'import("https://cdn.esm.sh/v41/[email protected]/lib/typescript.d.ts").TransformationContext'.
        The types of 'factory.createTypeParameterDeclaration(...).parent' are incompatible between these types.
          Type 'import("https://cdn.esm.sh/v41/[email protected]/lib/typescript.d.ts").DeclarationWithTypeParameterChildren | import("https://cdn.esm.sh/v41/[email protected]/lib/typescript.d.ts").InferTypeNode' is not assignable to type 'import("https://cdn.esm.sh/v41/[email protected]/lib/typescript.d.ts").DeclarationWithTypeParameterChildren | import("https://cdn.esm.sh/v41/[email protected]/lib/typescript.d.ts").InferTypeNode'.
            Type 'JSDocTemplateTag' is not assignable to type 'DeclarationWithTypeParameterChildren | InferTypeNode'.
              Type 'import("https://cdn.esm.sh/v41/[email protected]/lib/typescript.d.ts").JSDocTemplateTag' is not assignable to type 'import("https://cdn.esm.sh/v41/[email protected]/lib/typescript.d.ts").JSDocTemplateTag'.
                Types of property 'parent' are incompatible.
                  Type 'import("https://cdn.esm.sh/v41/[email protected]/lib/typescript.d.ts").JSDoc | import("https://cdn.esm.sh/v41/[email protected]/lib/typescript.d.ts").JSDocTypeLiteral' is not assignable to type 'import("https://cdn.esm.sh/v41/[email protected]/lib/typescript.d.ts").JSDoc | import("https://cdn.esm.sh/v41/[email protected]/lib/typescript.d.ts").JSDocTypeLiteral'.
                    Type 'JSDoc' is not assignable to type 'JSDoc | JSDocTypeLiteral'.
                      Type 'import("https://cdn.esm.sh/v41/[email protected]/lib/typescript.d.ts").JSDoc' is not assignable to type 'import("https://cdn.esm.sh/v41/[email protected]/lib/typescript.d.ts").JSDoc'.
                        Types of property 'parent' are incompatible.
                          Type 'import("https://cdn.esm.sh/v41/[email protected]/lib/typescript.d.ts").HasJSDoc' is not assignable to type 'import("https://cdn.esm.sh/v41/[email protected]/lib/typescript.d.ts").HasJSDoc'.
                            Type 'ImportEqualsDeclaration' is not assignable to type 'HasJSDoc'.
                              Property 'isTypeOnly' is missing in type 'import("https://cdn.esm.sh/v41/[email protected]/lib/typescript.d.ts").ImportEqualsDeclaration' but required in type 'import("https://cdn.esm.sh/v41/[email protected]/lib/typescript.d.ts").ImportEqualsDeclaration'.
    if (reactRefresh) transformers.before!.push(reactRefreshTS())
                                                ~~~~~~~~~~~~~~~~
    at https://deno.land/x/[email protected]/tsc/compile.ts:28:49

    'isTypeOnly' is declared here.
            readonly isTypeOnly: boolean;
                     ~~~~~~~~~~
        at https://cdn.esm.sh/v41/[email protected]/lib/typescript.d.ts:1601:18
    const { default: cmd } = await import(`./cli/${command}.ts`)
                             ^
    at async main (https://deno.land/x/[email protected]/cli.ts:163:30)

Aleph version

aleph.js v0.2.28

Deno version

deno 1.8.0

deno info

DENO_DIR location: "/Users/ajcwebdev/Library/Caches/deno"
Remote modules cache: "/Users/ajcwebdev/Library/Caches/deno/deps"
TypeScript compiler cache: "/Users/ajcwebdev/Library/Caches/deno/gen"

My system info

System Version: macOS 11.3 (20E232)
Kernel Version: Darwin 20.4.0
Boot Volume: Macintosh HD

Hopefully that's helpful, let me know if you need other system info or anything like that.

Visiting 8080 in the docker container can output Hello World-Aleph.js but outside the container (http://0.0.0.0:8080/http://172.17.0.2:8080) this page cannot be accessed

aleph start INFO Building... INFO - Bundling INFO {} deps • 159KB INFO {} shared • 398B INFO {} polyfill (ES5) • 8KB INFO Aleph server ready on http://localhost:8080

This is not a technical topic.

The name aleph matches Cult(アレフ) in Japan. https://en.wikipedia.org/wiki/Aleph_(Japanese_cult)

Japanese people are a bit afraid to talk about it. Concerns about the name have already erupted from the Japanese community. https://twitter.com/search?q=aleph.js%20lang%3Aja&src=typed_query&f=live

Throws:

TypeError: Cannot read property 'value' of undefined
    at http://localhost:8080/_aleph/-/deno.land/x/[email protected]/framework/react/hooks.js:88:28
    at mountMemo (http://localhost:8080/_aleph/-/cdn.esm.sh/v15/[email protected]/esnext/react-dom.development.js:12623:33)
    at Object.useMemo (http://localhost:8080/_aleph/-/cdn.esm.sh/v15/[email protected]/esnext/react-dom.development.js:12930:36)
    at useMemo2 (http://localhost:8080/_aleph/-/cdn.esm.sh/v15/[email protected]/esnext/react.development.js:1104:35)
    at useDeno (http://localhost:8080/_aleph/-/deno.land/x/[email protected]/framework/react/hooks.js:54:12)
    at App (http://localhost:8080/_aleph/app.a3093224d.js:21:5)
    at renderWithHooks (http://localhost:8080/_aleph/-/cdn.esm.sh/v15/[email protected]/esnext/react-dom.development.js:12007:32)
    at mountIndeterminateComponent (http://localhost:8080/_aleph/-/cdn.esm.sh/v15/[email protected]/esnext/react-dom.development.js:14188:29)
    at beginWork (http://localhost:8080/_aleph/-/cdn.esm.sh/v15/[email protected]/esnext/react-dom.development.js:14987:36)
    at HTMLUnknownElement.callCallback2 (http://localhost:8080/_aleph/-/cdn.esm.sh/v15/[email protected]/esnext/react-dom.development.js:4265:34)

Code to reproduce:

import type { ComponentType } from 'https://esm.sh/[email protected]'
import React from 'https://esm.sh/[email protected]'
import { useDeno } from 'https://deno.land/x/[email protected]/mod.ts'

export default function App({ Page, pageProps }: { Page: ComponentType<any>, pageProps: any }) {
  useDeno(() => {
    console.log('Hi')
  })
  return (
    <main>
      <Page {...pageProps} />
    </main>
  )
}

$ deno install -A -f --location=http://localhost -n aleph https://deno.land/x/[email protected]/cli.ts
$ aleph dev
Download https://deno.land/x/[email protected]/cli/dev.ts
Download https://deno.land/x/[email protected]/server/mod.ts
Download https://deno.land/x/[email protected]/server/server.ts
Download https://deno.land/x/[email protected]/server/app.ts
Download https://deno.land/x/[email protected]/framework/core/routing.ts
Download https://deno.land/x/[email protected]/compiler/mod.ts
Download https://deno.land/x/[email protected]/framework/core/events.ts
Download https://deno.land/x/[email protected]/compiler/dist/wasm.js
Download https://deno.land/x/[email protected]/compiler/dist/wasm-checksum.js
Download https://deno.land/x/[email protected]/compiler/dist/wasm-pack.js
Check https://deno.land/x/[email protected]/cli/dev.ts
INFO Aleph server config loaded from aleph.config.js
INFO Download https://deno.land/x/[email protected]/mod.ts
INFO Force download from https://deno.land/x/[email protected]/mod.ts
ERROR swc: Expected \';\', \'}\' or <eof> at https://deno.land/x/[email protected]/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.

Component:

import React from 'https://esm.sh/react'
import { PrimaryButton } from 'https://esm.sh/@fluentui/react';

export default function Button({ width = 75 }: { width?: number }) {
    return (
        <PrimaryButton/>
    )
}

Console:

ERROR TypeError: head.insertBefore is not a function
    at Stylesheet6._createStyleElement (file:///home/ayrton/Coding/node/mmes/server/.aleph/development.es2018/-/cdn.esm.sh/v13/@fluentui/[email protected]/es2018/react.development.js:254:22)
    at Stylesheet6._getStyleElement (file:///home/ayrton/Coding/node/mmes/server/.aleph/development.es2018/-/cdn.esm.sh/v13/@fluentui/[email protected]/es2018/react.development.js:226:39)
    at Stylesheet6.insertRule (file:///home/ayrton/Coding/node/mmes/server/.aleph/development.es2018/-/cdn.esm.sh/v13/@fluentui/[email protected]/es2018/react.development.js:181:67)
    at applyRegistration (file:///home/ayrton/Coding/node/mmes/server/.aleph/development.es2018/-/cdn.esm.sh/v13/@fluentui/[email protected]/es2018/react.development.js:695:29)
    at styleToClassName (file:///home/ayrton/Coding/node/mmes/server/.aleph/development.es2018/-/cdn.esm.sh/v13/@fluentui/[email protected]/es2018/react.development.js:708:9)
    at mergeCss (file:///home/ayrton/Coding/node/mmes/server/.aleph/development.es2018/-/cdn.esm.sh/v13/@fluentui/[email protected]/es2018/react.development.js:725:22)
    at mergeStyles (file:///home/ayrton/Coding/node/mmes/server/.aleph/development.es2018/-/cdn.esm.sh/v13/@fluentui/[email protected]/es2018/react.development.js:719:12)
    at file:///home/ayrton/Coding/node/mmes/server/.aleph/development.es2018/-/cdn.esm.sh/v13/@fluentui/[email protected]/es2018/react.development.js:1520:31

Browser:

TypeError: Cannot read property 'deno' of null
    at Home (http://localhost:8080/_aleph/pages/index.4d9dac55d.js:48:21)
    at renderWithHooks (http://localhost:8080/_aleph/-/cdn.esm.sh/v13/[email protected]/es2018/react-dom.development.js:11639:32)
    at mountIndeterminateComponent (http://localhost:8080/_aleph/-/cdn.esm.sh/v13/[email protected]/es2018/react-dom.development.js:13826:29)
    at beginWork (http://localhost:8080/_aleph/-/cdn.esm.sh/v13/[email protected]/es2018/react-dom.development.js:14651:32)
    at HTMLUnknownElement.callCallback2 (http://localhost:8080/_aleph/-/cdn.esm.sh/v13/[email protected]/es2018/react-dom.development.js:4054:34)
    at Object.invokeGuardedCallbackDev (http://localhost:8080/_aleph/-/cdn.esm.sh/v13/[email protected]/es2018/react-dom.development.js:4080:34)
    at invokeGuardedCallback (http://localhost:8080/_aleph/-/cdn.esm.sh/v13/[email protected]/es2018/react-dom.development.js:4115:45)
    at beginWork$1 (http://localhost:8080/_aleph/-/cdn.esm.sh/v13/[email protected]/es2018/react-dom.development.js:17853:25)
    at performUnitOfWork (http://localhost:8080/_aleph/-/cdn.esm.sh/v13/[email protected]/es2018/react-dom.development.js:17055:28)
    at workLoopSync (http://localhost:8080/_aleph/-/cdn.esm.sh/v13/[email protected]/es2018/react-dom.development.js:17007:21)

If you use "ssr": false, // SPA mode you still end up with the same browser error message. But no console error message.

This is a starting point for the discussion to this method.

In this way even if the JSON information is broken or it is a invalid will return null. What do you think?

I can reduce the code the code to a single line or anything like that, but I think it's cleaner to see the intend in this way.

What I can to to improve it?

$ aleph dev 
Check https://deno.land/x/[email protected]/cli.ts
Check https://deno.land/x/[email protected]/cli/dev.ts
error: Uncaught (in promise) NotSupportedError: Cannot set "location".
        throw new DOMException(`Cannot set "location".`, "NotSupportedError");
              ^
    at set (deno:op_crates/web/12_location.js:340:15)
    at Function.assign (<anonymous>)
    at Project._init (project.ts:600:16)
    at async project.ts:106:13
    at async start (server.ts:12:5)

$ deno --version
deno 1.7.0 (release, x86_64-unknown-linux-gnu)
v8 8.9.255.3
typescript 4.1.3

See https://github.com/denoland/deno/issues/4981#issuecomment-685205034

As the code is written, new entries appear in the demo.lock file

{
  "version": "2",
  "remote": {
    "http://localhost:3000/components/Footer.tsx?ssr&v=lbyjfzey": "945b8312124fbccd53c21b0d3b56679a43ba1ced154060233ecce9395531058a",
    "http://localhost:3000/components/Footer.tsx?ssr&v=lbyjvrnt": "945b8312124fbccd53c21b0d3b56679a43ba1ced154060233ecce9395531058a",
    "http://localhost:3000/components/Footer.tsx?ssr&v=lbyjwo92": "945b8312124fbccd53c21b0d3b56679a43ba1ced154060233ecce9395531058a",
    "http://localhost:3000/components/Footer.tsx?ssr&v=lbyk7km7": "945b8312124fbccd53c21b0d3b56679a43ba1ced154060233ecce9395531058a",
    "http://localhost:3000/routes/_404.tsx?ssr&v=lbyjfzey": "a560cb660c5852592758a1b08ed4edb0e8adb902ef3f034534e5ba48a862849e",
    "http://localhost:3000/routes/_404.tsx?ssr&v=lbyjvrnt": "a560cb660c5852592758a1b08ed4edb0e8adb902ef3f034534e5ba48a862849e",
    "http://localhost:3000/routes/_app.tsx?ssr&v=lbyjfzey": "2739b7b060150ed8e04aae61913fac41fe1ce31859a2234a368f8079e1cc1de7",
    "http://localhost:3000/routes/_app.tsx?ssr&v=lbyjvrnt": "45053290e17eec63072084ef7836f7d74a01d4081522868e80bd75dcf257bfde",
    "http://localhost:3000/routes/_app.tsx?ssr&v=lbyjwo92": "e7fb9663b7e87449c9d30442622a12f28bf741da33e30fa103dcb589f42e5086",
    "http://localhost:3000/routes/_app.tsx?ssr&v=lbyjwo93": "e7fb9663b7e87449c9d30442622a12f28bf741da33e30fa103dcb589f42e5086",
    "http://localhost:3000/routes/_app.tsx?ssr&v=lbyk7km7": "24c5f8dce19c08d4465655663f4aee0239a698223e876405eb9d06e72c609238",
    "http://localhost:3000/routes/index.tsx?ssr&v=lbyjfzey": "a807b3a4595f3f5867b20df890941ea2259e8043d196841c8e20a5ec323b931a",
    "http://localhost:3000/routes/index.tsx?ssr&v=lbyjvrnt": "a807b3a4595f3f5867b20df890941ea2259e8043d196841c8e20a5ec323b931a",
    "http://localhost:3000/routes/index.tsx?ssr&v=lbyjwo92": "a807b3a4595f3f5867b20df890941ea2259e8043d196841c8e20a5ec323b931a",
    "http://localhost:3000/routes/index.tsx?ssr&v=lbyk7km7": "a807b3a4595f3f5867b20df890941ea2259e8043d196841c8e20a5ec323b931a",
...
  }
}

Is there a way to not add new or delete old entries?

Deno 1.29.1 Aleph.js 1.0.0-beta.21

On the front page of the Aleph Documentation site, in the first section of prose, is this peculiar import statement right above the title text:

Unfortunately I don't have time today to investigate what's causing this (but I'm imagining it might be a parsing error with MDX...maybe?)

PS. the site also appears to be lacking a <title> tag, as it's just showing the page's URL for the tab I have open in Chrome.

See https://maximorlov.com/deploying-to-github-pages-dont-forget-to-fix-your-links/#prefix-all-links for more context, what is the equivalent solution in Aleph.js?

What I mean is that, is it possible to skip this import "cdn/external.css" expression at hydrate server side?

Since this expression can only be used at browser side.

My Deno version: 1.23.1

Project created by deno run -A https://deno.land/x/[email protected]/cli.ts init --template react

While execute deno task build, error occurs:

Warning deno task is unstable and may drastically change in the future
Task build deno run -A https://deno.land/x/[email protected]/cli.ts build
Download https://deno.land/x/[email protected]/cli.ts
Download https://deno.land/x/[email protected]/lib/serve.ts
Download https://deno.land/[email protected]/io/mod.ts
Download https://deno.land/[email protected]/io/streams.ts
Download https://deno.land/[email protected]/io/util.ts
Download https://deno.land/[email protected]/io/writers.ts
Download https://deno.land/[email protected]/io/files.ts
Download https://deno.land/x/[email protected]/commands/build.ts
Download https://deno.land/x/[email protected]/server/build.ts
Download https://deno.land/x/[email protected]/server/proxy_modules.ts
INFO Proxy modules on http://localhost:6060
error: Uncaught (in promise) TypeError: Import 'http://localhost:6060/server.tsx?t=181bf03e20b' failed: 503 Service Unavailable
    await import(
    ^
    at async https://deno.land/x/[email protected]/commands/build.ts:36:5