## 事象 [[Vite]] 2.7.13でビルドすると以下の事象が発生する。 - `[vite] new dependencies found: vue/server-renderer, updating...`と表示されてしばらく固まる - `tsconfig/sourceMap` について `Sourcemap for "パス" points to missing source files` エラーが出る [[🦉Owlelia]]周りで[[ESモジュール (JavaScript)|ESモジュール]]に関するエラーが出ていそう。 ``` owlelia doesn't appear to be written in CJS, but also doesn't appear to be a valid ES module (i.e. it doesn't have "type": "module" or an .mjs extension for the entry point). Please contact the package author to fix. ``` 実行時にvueファイルでもエラーが。。 ``` Uncaught TypeError: Cannot read properties of undefined (reading 'modules') at _sfc_main.setup (:3000/hoge/src/App.vue:32:15) ``` ### 補足 - [[Vite]] 2.6.13では動く ## [[🦉Owlelia]]のエラーについて ### 原因 [[🦉Owlelia]]が[[CommonJS]]でも[[ESモジュール (JavaScript)|ESモジュール]]でも書かれていないため読み込みができていないから。 - 基本的に[[CommonJS]]形式で`node_modules`配下に配置されているな.. - [[🦉Owlelia]]は[[ESモジュール (JavaScript)|ESモジュール]]形式.. ```json:package.json "main": "dist/index.js", "types": "dist/index.d.ts", ``` ```json:tsconfig.json "target": "es2015", "moduleResolution": "node", ``` - `main`に指定しているので[[CommonJS]]形式が期待されてそう? - [[tsconfig.json]]の[[module (tsconfig)|module]]は[[target (tsconfig)|target]]が`es2015`のため`CommonJS`にはならない - おそらく`es2015` - **なので成果物が[[ESモジュール (JavaScript)|ESモジュール]]形式になっている** ### 対策 [[package.json]]と[[tsconfig.json]]の記述を、[[CommonJS]]か[[ESモジュール (JavaScript)|ESモジュール]]のどちらかに統一する。両方サポートするのが一番良さそうだが、ひとまず万能の[[CommonJS]]形式で対応する。 [[tsconfig.json]]の[[module (tsconfig)|module]]を`CommonJS`にする。 ```diff:tsconfig.json "target": "es2015", + "module": "CommonJS", "moduleResolution": "node", ``` ## 実行時のエラーについて テンプレートの設定が少し古かったので最新にする。 ```diff:tsconfig.json - "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"] + "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"], + "references": [{ "path": "./tsconfig.node.json" }] ``` `tsconfig.node.json`が追加されている。 ```json:tsconfig.node.json { "compilerOptions": { "composite": true, "module": "esnext", "moduleResolution": "node" }, "include": ["vite.config.ts"] } ``` 一部モジュールのバージョンがかなり古いので最新にしてみる。 ```txt:最新のtemplate +-- @vitejs/[email protected] +-- [email protected] +-- [email protected] +-- [email protected] `-- [email protected] ``` ```txt:うまく動かないもの +-- @vitejs/[email protected] +-- [email protected] +-- [email protected] +-- [email protected] `-- [email protected] ``` [[vue-tsc]]と[[vitejs.plugin-vue]]を最新化。ついでに[[Vite]]も2.8にする。なおった！ ## 参考 - [複数のモジュール形式\(CommonJS, ES Modules, UMD\)をサポートしたnpmパッケージの作り方 in TypeScript \- dackdive's blog](https://dackdive.hateblo.jp/entry/2019/09/23/100000)