📖

日々の記録 2025-02-22

2025/02/22に公開

import したら Failed to resolve import エラー

とりあえずこんな感じに書いてみたが

import Menu from 'utils/menu.ts';

Failed to resolve import "utils/menu.ts" from "src/main.ts". Does the file exist?

とエラー。

色々試してがどれもエラー

import Menu from 'src/utils/menu.ts';
import Menu from 'src/utils/menu';
import Menu from 'src/utils/menu.js';

フォルダ構成は・・・

tree のインストール

フォルダ構成を記載するために tree インストール

sudo apt update
sudo apt upgrade
sudo apt install tree

フォルダ構成

$ tree src
src
├── counter.ts
├── main.ts
├── style.css
├── typescript.svg
├── utils
│   └── menu.ts
└── vite-env.d.ts

import Menu を記載したのは src/main.ts 。
Menu が記載されているのは src/utils/menu.ts なので、 utils/menu.ts でいけそうな気がしている。

./utils/menu.ts としたらエラーが変わった。

import Menu from './utils/menu.ts';

のように、パスを ./ で始まるように記載したら、エラーが変わった。

ブラウザの console には

Uncaught SyntaxError: The requested module '/src/utils/menu.ts' does not provide an export named 'default' (at main.ts:3:8)

Visual Studio Code では

Module '"...../src/utils/menu"' has no default export. Did you mean to use 'import { Menu } from "...../src/utils/menu"' instead?ts(2613)

VS Code に出ているアドバイスに従って修正

import { Menu } from './utils/menu.ts';

と書き換えたらエラーが解消された。

メニューの表示を縦ではなく横にする

に従って、メニューの表示を縦ではなく横にする。

Style Sheet を書けばよいかな ?

id="menu_root" の display を block から flex に変更する感じか ?

class は .クラス名
id は #id

#menu_root {
    display: flex;
}

子メニューをタップしたら開くようにする

style sheet のアニメーションで表現している模様。
style sheet で指定できるように class を設定する。

#menu_root > .menu_depth0 > .menu_depth1 {
    margin-right: 10px;
    height: 0;
    overflow: hidden;
    transform: .5s;
}
#menu_root > .menu_depth0:hover > .menu_depth1 {
    height: 2rem;
    overflow: visible;
}