DEV Community

Discussion on: Building React Applications using Deno: The Definite Guide

View post
Collapse
 
chasm profile image
Charles F. Munat •

Doesn't work for me at all. Import statements for react and framework/react give linting error relative import path "react" not prefixed with / or ./ or ../.

JSX returned from e.g.,Home gives linting error JSX element implicitly has type 'any' because no interface 'JSX.IntrinsicElements' exists.deno-ts(7026). I presume this is because it isn't finding React.

Running the app returns 500 - Cannot resolve module "file:///**/hello/.aleph/development/react" from "file:///**/hello/.aleph/development/app.js#e5507c". at file:///**/hello/.aleph/development/app.js#e5507c:3:0

aleph build also fails:

Bundle /_aleph/shared.bundle.entry.js
error: Unable to output bundle during Graph::bundle().

Caused by:
    0: load_transformed failed
    1: failed to analyze module
    2: failed to resolve ./react from </_aleph/app.bundling.js>
    3: The graph is missing a dependency.
         Specifier: /_aleph/react from /_aleph/app.bundling.js
Enter fullscreen mode Exit fullscreen mode

What am I missing here? Is Aleph broken or do I need to install something else, change versions, do something differently? I am running:

deno 1.8.2 (release, x86_64-apple-darwin)
v8 9.0.257.3
typescript 4.2.2
Enter fullscreen mode Exit fullscreen mode

Also, I don't know why Aleph is outputting this to pages/index.tsx:

import Logo from '~/components/logo.tsx'
import useCounter from '~/lib/useCounter.ts'
Enter fullscreen mode Exit fullscreen mode
Collapse
 
chasm profile image
Charles F. Munat •

Found the problem. The import_map.json file was empty.

{
    "imports": {}
}
Enter fullscreen mode Exit fullscreen mode

Should be:

{
  "imports": {
    "~/": "./",
    "aleph/": "https://deno.land/x/aleph@v0.3.0-alpha.24/",
    "framework": "https://deno.land/x/aleph@v0.3.0-alpha.24/framework/core/mod.ts",
    "framework/react": "https://deno.land/x/aleph@v0.3.0-alpha.24/framework/react/mod.ts",
    "react": "https://esm.sh/react@17.0.2",
    "react-dom": "https://esm.sh/react-dom@17.0.2"
  },
  "scopes": {}
}
Enter fullscreen mode Exit fullscreen mode

In case anyone else runs into this.

Collapse
 
laurogripa profile image
Lauro Gripa •

Thanks! I had the same problem.

Now I have another one when running aleph build:

ERROR module '/pages/components/logo.tsx' not found
ERROR module '/pages/lib/useCounter.ts' not found
Enter fullscreen mode Exit fullscreen mode

No idea why.

Thread Thread
 
laurogripa profile image
Lauro Gripa • • Edited

Ok, fixed by changing the import paths.

First, I tried changing the import map's first entry to this but didn't work:

    "~/": "../",
Enter fullscreen mode Exit fullscreen mode

Then I changed the import path themselves and it worked!

import Logo from '../components/logo.tsx'
import useCounter from '../lib/useCounter.ts'
Enter fullscreen mode Exit fullscreen mode
Collapse
 
chasm profile image
Charles F. Munat •

Got this working with:

deno run -A https://deno.land/x/aleph/install.ts
aleph -h
aleph init hello
cd hello
aleph dev
Enter fullscreen mode Exit fullscreen mode

Not sure what was broken before. Wrong version?