Import and dependency problems

[asbjornu]

If I add the following entry to import_map.json:

{
    "imports": {
        "react-router-dom": "https://esm.sh/react-router-dom@17.0.2"
    }
}

And then attempt to import react-router-dom like so:

import { Link } from 'react-router-dom'

…it fails:

Error: Cannot resolve module "file:///redacted/.aleph/development/-/esm.sh/react-router-dom@17.0.2.js" from "file:///redacted/.aleph/development/components/countries.js#/components/countries.tsx@8a4e99". at file:///redacted/.aleph/development/components/countries.js#/components/countries.tsx@8a4e99:6:0

TypeError: Cannot resolve module "file:///redacted/.aleph/development/-/esm.sh/react-router-dom@17.0.2.js" from "file:///redacted/.aleph/development/components/countries.js#/components/countries.tsx@8a4e99".
    at file:///redacted/.aleph/development/components/countries.js#/components/countries.tsx@8a4e99:6:0
    at async Application.importModule (https://deno.land/x/aleph@v0.3.0-alpha.33/server/app.ts:837:12)
    at async https://deno.land/x/aleph@v0.3.0-alpha.33/server/ssr.ts:118:40
    at async Promise.all (index 0)
    at async Renderer.renderPage (https://deno.land/x/aleph@v0.3.0-alpha.33/server/ssr.ts:114:34)
    at async https://deno.land/x/aleph@v0.3.0-alpha.33/server/app.ts:523:26
    at async Renderer.useCache (https://deno.land/x/aleph@v0.3.0-alpha.33/server/ssr.ts:89:24)
    at async Application.getPageHTML (https://deno.land/x/aleph@v0.3.0-alpha.33/server/app.ts:522:20)
    at async Server.handle (https://deno.land/x/aleph@v0.3.0-alpha.33/server/server.ts:204:30)

[asbjornu]

If I remove the version number from the URL:

"react-router-dom": "https://esm.sh/react-router-dom"

…the error changes to:

Error: The requested module '../-/esm.sh/react-router-dom@17.0.2.js' does not provide an export named 'Link'

TypeError: The requested module '../-/esm.sh/react-router-dom@17.0.2.js' does not provide an export named 'Link'
    at async Application.importModule (https://deno.land/x/aleph@v0.3.0-alpha.33/server/app.ts:837:12)
    at async https://deno.land/x/aleph@v0.3.0-alpha.33/server/ssr.ts:118:40
    at async Promise.all (index 0)
    at async Renderer.renderPage (https://deno.land/x/aleph@v0.3.0-alpha.33/server/ssr.ts:114:34)
    at async https://deno.land/x/aleph@v0.3.0-alpha.33/server/app.ts:523:26
    at async Renderer.useCache (https://deno.land/x/aleph@v0.3.0-alpha.33/server/ssr.ts:89:24)
    at async Application.getPageHTML (https://deno.land/x/aleph@v0.3.0-alpha.33/server/app.ts:522:20)
    at async Server.handle (https://deno.land/x/aleph@v0.3.0-alpha.33/server/server.ts:204:30)

[asbjornu]

However, if I change the import statement to the full URL, it works:

import { Link } from 'https://esm.sh/react-router-dom'

[thomascarvalho]

Hi, there is no version '17.0.2' for 'react-router-dom', be careful to don't confuse with 'react'.

Also alephjs already integrates a router, all you have to do is using <a href="xxx">xxx</a>, the framework will detect if it's an internal or external link.

[asbjornu]

Thanks! It's awsesome that Aleph provides its own router, but it's still much trouble and hard to decipher error messages related to dependencies. Here's a recent one:

"oak": "https://deno.land/x/oak/mod.ts"

import { Context } from 'oak'

ERROR Load module '/oak': No such file

[asbjornu]

And now I'm trying to import Application:

import { Application } from "https://deno.land/x/aleph@v0.3.0-alpha.33/server/mod.ts";

Or:

import { Application } from "aleph/server/mod.ts";

but it too fails:

Error: Cannot resolve module "file:///redacted/.aleph/development/-/deno.land/x/esbuild@v0.11.22/mod.d.ts" from "file:///redacted/.aleph/development/-/deno.land/x/esbuild@v0.11.22/mod.js". at file:///redacted/.aleph/development/-/deno.land/x/esbuild@v0.11.22/mod.js:1:0

TypeError: Cannot resolve module "file:///redacted/.aleph/development/-/deno.land/x/esbuild@v0.11.22/mod.d.ts" from "file:///redacted/.aleph/development/-/deno.land/x/esbuild@v0.11.22/mod.js".
    at file:///redacted/.aleph/development/-/deno.land/x/esbuild@v0.11.22/mod.js:1:0
    at async Application.importModule (https://deno.land/x/aleph@v0.3.0-alpha.33/server/app.ts:837:12)
    at async Renderer.renderPage (https://deno.land/x/aleph@v0.3.0-alpha.33/server/ssr.ts:113:42)
    at async https://deno.land/x/aleph@v0.3.0-alpha.33/server/app.ts:523:26
    at async Renderer.useCache (https://deno.land/x/aleph@v0.3.0-alpha.33/server/ssr.ts:89:24)
    at async Application.getPageHTML (https://deno.land/x/aleph@v0.3.0-alpha.33/server/app.ts:522:20)
    at async Server.handle (https://deno.land/x/aleph@v0.3.0-alpha.33/server/server.ts:204:30)

[thomascarvalho]

@asbjornu I don't understand why you want to install oak or get Application, alephjs is a Zero Config framework. If you installed your project with the aleph init app_name command you don't have to do anything to have a front and a back that works.

aleph dev will start the app in development mode and expose api endpoint for all files in the directory /api, same for the frontend for the directory /pages

Or maybe I didn't understand your need

[asbjornu]

Thanks, @thomascarvalho. I think my reasoning for wanting instances of Oak, Link or Application is beside the point. I agree that usually, neither of them should be required. But should it be so difficult to import dependencies regardless? Oak middleware exists and is desired (see #204), so I can only assume it's meant to be used?

https://github.com/alephjs/aleph.js/blob/2fa032203d75951adc3639b3da6bb269325ca15a/server/oak.ts#L8-L20

I think that especially getting access to Aleph's own classes should be much simpler. It doesn't help that the documentation is seemingly out of sync with the current implementation (see #333).

[thomascarvalho]

Yes, the documentation is outdated for the alpha version.

Regarding your import problems, I'm clearly not an expert with deno but you can try something like this I think :

"oak/": "https://deno.land/x/oak/"

import { Context } from "oak/mod.ts"

[asbjornu]

Thanks @thomascarvalho! I managed to figure out a solution that didn't require Oak (wrt. useRouter in #333), though. How about Aleph's Application – ideas on how that should be imported and instantiated in alpha 33 of Aleph?

[thomascarvalho]

For the import you can use import { Application } from "https://deno.land/x/aleph@v0.3.0-alpha.33/server/app.ts";

But I don't know how using Application like this, I have never tried.

[asbjornu]

For the import you can use import { Application } from "https://deno.land/x/aleph@v0.3.0-alpha.33/server/app.ts";

Thanks @thomascarvalho, really appreciated. However, that just gives me this error message again: https://github.com/alephjs/aleph.js/issues/334#issuecomment-856328686. The error only occurs when using the Application class so it seems like there's a dependency missing or being wrongly referenced somewhere.

But I don't know how using Application like this, I have never tried.

Are there other ways to get to an instance of Application or Configuration that you know of?

[shadowtime2000]

Can I ask what is the use case for trying to import Application? Application is meant to be more of a private class used for organizing and structuring the internal code. If you want to use Oak middleware, you can use the custom server feature.

But should it be so difficult to import dependencies regardless?

That just isn't relevant because Application is an internal class not meant to be used, that is why it isnt really exported @asbjornu.

[asbjornu]

I'm just fumbling about in the code base actually trying to find a way to perform some application startup tasks more thoroughly described in #336. Since Application reads and exposes Configuration I'm currently on the path of finding an instance of Application I can poke at. But if you have other ideas to solve #336, I'd be very thankful @shadowtime2000! 🙏🏼

[shadowtime2000]

@asbjornu Again, you probably shouldn't try to find an instance of Application to poke at. If you want to perform startup tasks, you should probably create a feature request issue because iirc we havent thought of that yet.