🤖
【vite初心者】公式を参考に vite 環境を構築しようとして失敗した
事象
公式を参考に vite 環境を構築しようとして失敗した
yarn create vite- オプションを以下で設定
- Vanilla
- TypeScript
- プロジェクトフォルダが生成されたら
yarn install yarn run build- エラー表示
src/main.ts:1:8 - error TS2307: Cannot find module './style.css' or its corresponding type declarations.
1 import './style.css'
~~~~~~~~~~~~~
src/main.ts:2:28 - error TS2307: Cannot find module './typescript.svg' or its corresponding type declarations.
2 import typescriptLogo from './typescript.svg'
~~~~~~~~~~~~~~~~~~
src/main.ts:3:22 - error TS2307: Cannot find module '/vite.svg' or its corresponding type declarations.
3 import viteLogo from '/vite.svg'
~~~~~~~~~~~
Found 3 errors in the same file, starting at: src/main.ts:1
この時の気持ち
なんでやねん
環境
- VSCode
- Apple M2 Max
対応
VSC 拡張機能の Editor SDK を利用する
試したこと
対応1: src/vite-env.d.ts に型定義を追加
src/vite-env.d.ts に型定義を追加
vite-env.d.ts
/// <reference types="vite/client" />
declare module '*.svg' {
import type { FC, SVGProps } from 'react';
const content: FC<SVGProps<SVGSVGElement>>;
export default content;
}
declare module '*.css' {
const classes: { [key: string]: string };
export default classes;
}
declare module '*.scss' {
const classes: { [key: string]: string };
export default classes;
}
※ /// <reference types="vite/client" /> は最初からあったのでその下を追加
対応2: .yarnrc.yml で nodeLinker: node-modules を設定する
の「その1. .yarnrc.ymlに1行書く」の方法。
プロジェクトルートに .yarnrc.yml を以下の内容で作成
.yarnrc.yml
nodeLinker: node-modules
補足
nodeLinker はパッケージのインストール方法を指定できるもので、上記の指定をすることで node_modules 内にパッケージをインストールするようになる。
しかし、せっかくの PnP 機能を強制解除しているのはいかがなものか？ という気がする。
対応3: VSC 拡張機能の Editor SDK を利用する
の「その2. Editor SDKを導入する」 の方法
- VSCに拡張機能
ZipFSをインストール - プロジェクトルートで
yarn dlx @yarnpkg/sdks vscode -
cmd+shift+PからTypescript: Select TypeScript Version...を選択する
補足
せっかくの PnP 機能を利用するならこっちか
注意
プラグインをインストールし VSCode のコマンドから Typescript: Select TypeScript Version... を選択しようとしたところ候補が出ない。
VSC拡張機能の @builtin typescript を検索して出てくる「TypeScript と JavaScript の言語機能」を無効にしていることが原因だった。
ただ、もともと以下の件の対応で無効にしていたのが、有効にすることで以下の問題が再発する。
Discussion