DEV Community

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

View post

Replies for: 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 ...

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