Relative import path "wouter" not prefixed with / or ./ or ../ and not in import

Question

Relative import path "wouter" not prefixed with / or ./ or ../ and not in import

bobwatcherx opened this issue 2 years ago · comments

i try you example code in github about wouter
but errro message you now this error ?
thanks
DENO version : 1.25.3

error: Relative import path "wouter" not prefixed with / or ./ or ../ and not in import map from "file:///home/ubuntux/belajar/ultrajs/ultramilk/src/app.tsx"
    at file:///home/ubuntux/belajar/ultrajs/ultramilk/src/app.tsx:1:37

import { Link, Route, Switch } from "wouter";
import Home from "./pages/Home.tsx";
import About from "./pages/About.tsx";
import { useSearchParams } from "./context/SearchParams.tsx";

export default function App() {
  const searchParams = useSearchParams();
  return (
    <html lang="en">
      <head>
        <meta charSet="utf-8" />
        <title>with-wouter</title>
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="shortcut icon" href="https://github.com/favicon.ico" target="_blank" rel="nofollow" />
      </head>
      <body>
        <nav>
          <Link to="/">Home</Link>
          <Link to="/about">About</Link>
          <Link to="/about?foo=bar">About: Foo Bar</Link>
        </nav>
        <main>
          <div>Search params: {searchParams.toString()}</div>
          <Switch>
            <Route path="/">
              <Home />
            </Route>
            <Route path="/about">
              <About />
            </Route>
            <Route>
              404
            </Route>
          </Switch>
        </main>
      </body>
    </html>
  );
}

James Edmonds · Answer 1 · Tue Oct 18 2022 17:27:23 GMT+0800 (China Standard Time)

Hey @bobwatcherx can you post your deno.json and importMap.json.

bobwatcherx · Answer 2 · Wed Oct 26 2022 12:28:32 GMT+0800 (China Standard Time)

Hey @bobwatcherx can you post your deno.json and importMap.json.
i am running : deno task dev

deno.json file :

{
  "tasks": {
    "dev": "deno run -A --no-check --watch ./server.tsx",
    "test": "deno test --allow-all",
    "build": "deno run -A ./build.ts",
    "start": "ULTRA_MODE=production deno run -A --no-remote ./server.js"
  },
  "compilerOptions": {
    "jsx": "react-jsxdev",
    "jsxImportSource": "react"
  },
  "importMap": "./importMap.json"
}

my importMap.json file:

{
  "imports": {
    "react": "https://esm.sh/react@18.2.0?dev",
    "react/": "https://esm.sh/react@18.2.0/",
    "react-dom": "https://esm.sh/react-dom@18.2.0",
    "react-dom/server": "https://esm.sh/react-dom@18.2.0/server?dev",
    "react-dom/client": "https://esm.sh/react-dom@18.2.0/client?dev",

    "twind": "https://esm.sh/twind@0.16.17",
    "twind/sheets": "https://esm.sh/twind@0.16.17/sheets",

    "react-router-dom": "https://esm.sh/react-router-dom@6.3.0?external=react",
    "react-router-dom/server": "https://esm.sh/react-router-dom@6.3.0/server?external=react",

    "@tanstack/react-query": "https://esm.sh/@tanstack/react-query@4.2.3?external=react",

    "ultra/": "https://deno.land/x/ultra@v2.0.0-beta.11/"
  }
}

bobwatcherx · Answer 3 · Wed Oct 26 2022 12:31:40 GMT+0800 (China Standard Time)

my FULL CODE : https://github.com/bobwatcherx/fixultra.git

James Edmonds · Answer 4 · Wed Oct 26 2022 12:50:31 GMT+0800 (China Standard Time)

Hey @bobwatcherx looks like you don't have a record for wouter in your importMap.

You would need to add these specifiers to your importMap.imports

{
  "imports": {
    ...
    "wouter": "https://esm.sh/wouter?external=react",
    "wouter/static-location": "https://esm.sh/wouter/static-location?external=react"
  }
}

But it also looks like you're trying to use both react-router and wouter, which wouldn't be ideal. Did your create your project using the 'create' script from Ultra?

bobwatcherx · Answer 5 · Wed Oct 26 2022 15:23:28 GMT+0800 (China Standard Time)

Hey @bobwatcherx looks like you don't have a record for wouter in your importMap.

You would need to add these specifiers to your importMap.imports
{
  "imports": {
    ...
    "wouter": "https://esm.sh/wouter?external=react",
    "wouter/static-location": "https://esm.sh/wouter/static-location?external=react"
  }
}
But it also looks like you're trying to use both react-router and wouter, which wouldn't be ideal. Did your create your project using the 'create' script from Ultra?

i use this script from you docs :
deno run -A -r https://deno.land/x/ultra/create.ts

James Edmonds · Answer 6 · Wed Oct 26 2022 15:29:54 GMT+0800 (China Standard Time)

I see. And did you choose wouter as the routing library when you ran that? Just trying to determine if there's an issue with our create script.

bobwatcherx · Answer 7 · Wed Oct 26 2022 16:10:35 GMT+0800 (China Standard Time)

I see. And did you choose wouter as the routing library when you ran that? Just trying to determine if there's an issue with our create script.

now it's running normally for wouter
Thank you

root@ubuntux-Lenovo-V145-14AST:/home/ubuntux/belajar/ultrajs# deno run -A -r https://deno.land/x/ultra/create.ts
Download ⠼ https://deno.land/x/ultra/create.ts Warning Implicitly using latest version (v2.0.0-beta.12) for https://deno.land/x/ultra/create.ts
Download ⠦ https://deno.land/std@0.159.0/_util/assert.ts Warning Implicitly using latest version (v0.2.2) for https://deno.land/x/color/mod.ts

▄• ▄▌▄▄▌ ▄▄▄▄▄▄▄▄ ▄▄▄·
█▪██▌██• •██ ▀▄ █·▐█ ▀█
█▌▐█▌██▪ ▐█.▪▐▀▀▄ ▄█▀▀█
▐█▄█▌▐█▌▐▌ ▐█▌·▐█•█▌▐█ ▪▐▌
▀▀▀ .▀▀▀ ▀▀▀ .▀ ▀ ▀ ▀

Welcome to Ultra

Let's get you setup with your new Ultra project.

What is the name of your project? wuter

Do you want to use TypeScript? [y/n] y

Which css/style library do you want to use?
'(0) None (1) Twind (2) Stitches 1

Which routing library do you want to use?
(0) None (1) React Router (2) Wouter 2

Which head management library do you want to use?
(0) None (1) React Helmet 0

Which query library do you want to use?
(0) None (1) React Query 1
✔️ Created: /home/ubuntux/belajar/ultrajs/wuter/deno.json
✔️ Created: /home/ubuntux/belajar/ultrajs/wuter/importMap.json
✔️ Created: /home/ubuntux/belajar/ultrajs/wuter/build.ts
✔️ Created: /home/ubuntux/belajar/ultrajs/wuter/client.tsx
✔️ Created: /home/ubuntux/belajar/ultrajs/wuter/server.tsx
✔️ Created: /home/ubuntux/belajar/ultrajs/wuter/src/app.tsx
✔️ Created: /home/ubuntux/belajar/ultrajs/wuter/public/style.css
✔️ Fetched: https://github.com/exhibitionist-digital/ultra/blob/main/examples/basic/public/favicon.ico
✔️ Created: /home/ubuntux/belajar/ultrajs/wuter/public/favicon.ico
✔️ Fetched: https://github.com/exhibitionist-digital/ultra/blob/main/examples/basic/public/robots.txt
✔️ Created: /home/ubuntux/belajar/ultrajs/wuter/public/robots.txt
✔️ Created: /home/ubuntux/belajar/ultrajs/wuter/src/twind/twind.ts
✔️ Created: /home/ubuntux/belajar/ultrajs/wuter/src/twind/TwindProvider.tsx
✔️ Created: /home/ubuntux/belajar/ultrajs/wuter/src/wouter/index.tsx
✔️ Created: /home/ubuntux/belajar/ultrajs/wuter/src/react-query/query-client.ts
✔️ Created: /home/ubuntux/belajar/ultrajs/wuter/src/react-query/useDehydrateReactQuery.tsx
/home/ubuntux/belajar/ultrajs/wuter/importMap.json
/home/ubuntux/belajar/ultrajs/wuter/deno.json
/home/ubuntux/belajar/ultrajs/wuter/client.tsx
/home/ubuntux/belajar/ultrajs/wuter/src/react-query/query-client.ts
/home/ubuntux/belajar/ultrajs/wuter/build.ts
/home/ubuntux/belajar/ultrajs/wuter/src/app.tsx
/home/ubuntux/belajar/ultrajs/wuter/src/wouter/index.tsx
/home/ubuntux/belajar/ultrajs/wuter/server.tsx
/home/ubuntux/belajar/ultrajs/wuter/src/react-query/useDehydrateReactQuery.tsx
/home/ubuntux/belajar/ultrajs/wuter/src/twind/TwindProvider.tsx
/home/ubuntux/belajar/ultrajs/wuter/src/twind/twind.ts
Checked 11 files

Your new Ultra project is ready, you can now cd into "wuter" and run deno task dev to get started!

root@ubuntux-Lenovo-V145-14AST:/home/ubuntux/belajar/ultrajs# cd wuter/
root@ubuntux-Lenovo-V145-14AST:/home/ubuntux/belajar/ultrajs/wuter# deno task dev
Warning deno task is unstable and may drastically change in the future
Task dev deno run -A --no-check --watch ./server.tsx
Watcher Process started.
[ultra] - INFO Loading compiler
Listening on http://localhost:8000/
[ultra] - INFO   <-- GET /
Hello world!
[ultra] - INFO   --> GET / 200 89ms
Warning: Each child in a list should have a unique "key" prop. See https://reactjs.org/link/warning-keys for more information.
    at script
[ultra] - INFO   <-- GET /style.css
[ultra] - INFO   --> GET /style.css 200 4ms
[ultra] - INFO   <-- GET /_ultra/compiler/client.tsx
[ultra] - INFO   --> GET /_ultra/compiler/client.tsx 200 62ms
[ultra] - INFO   <-- GET /favicon.ico
[ultra] - INFO   --> GET /favicon.ico 200 6ms
[ultra] - INFO   <-- GET /_ultra/compiler/client.tsx
[ultra] - INFO   --> GET /_ultra/compiler/client.tsx 200 13ms
[ultra] - INFO   <-- GET /_ultra/compiler/src/app.tsx
[ultra] - INFO   --> GET /_ultra/compiler/src/app.tsx 200 15ms
[ultra] - INFO   <-- GET /_ultra/compiler/src/twind/twind.ts
[ultra] - INFO   --> GET /_ultra/compiler/src/twind/twind.ts 200 15ms
[ultra] - INFO   <-- GET /_ultra/compiler/src/react-query/query-client.ts
[ultra] - INFO   --> GET /_ultra/compiler/src/react-query/query-client.ts 200 5ms
[ultra] - INFO   <-- GET /_ultra/compiler/src/wouter/index.tsx
[ultra] - INFO   --> GET /_ultra/compiler/src/wouter/index.tsx 200 18ms
[ultra] - INFO   <-- GET /_ultra/compiler/src/twind/TwindProvider.tsx
[ultra] - INFO   --> GET /_ultra/compiler/src/twind/TwindProvider.tsx 200 6ms

James Edmonds · Answer 8 · Wed Oct 26 2022 16:35:49 GMT+0800 (China Standard Time)

Not a problem!