Vuexで謎のエラー

目次

• 経緯
• まとめ

経緯

新規の軽めなプロジェクトでTS,Vue,Viteという構成で開発を進めてていてVuexのエラーが起こった。

• "vue": "^3.2.25",
• "vuex": "^4.0.2"
• "vite": "^2.7.2",

エラー文

Uncaught SyntaxError: The requested module '/node_modules/.vite/vuex.js?v=53a70bc8' does not provide an export named 'createStore'

軽く2, 3試した上であっさり解決したためどれが効いたかはわからないが

1. node_modules削除の上でnpm i再実行
2. named export => default exportの修正
3. ごっそりリファクタ

named exportは

// default export
const hoge = "はげ"

export default hoge

// => 使う時
import hoge from "@/hoge"

// named export
export const str = "string"

// => 使う時
import { str } from "@/str"

こういうやつ。

まとめ

まぁ多分2が効いた気がする。思えばrouterなどもドキュメントがdefaultだったし。

超余談なんだけど僕が最近関わってるプロダクトはCIが回るのに10~20分とかかかってて、その解消にViteが使えるんじゃないかっていう実験の意味も込めて今回初めてViteを採用してるけど結構良さげな気がする。