WARN Compiled with 1 warnings
WARN ESLintError
/Users/noreen/xxx/microcms-nuxt-jamstack-blog/pages/index.vue
6:14 warning 'v-html' directive can lead to XSS attack vue/no-v-html
8:14 warning 'v-html' directive can lead to XSS attack vue/no-v-html
エラー in ./node_modules/sanitize-html/node_modules/htmlparser2/lib/esm/index.js 59:9 Module parse failed: Unexpected token (59:9) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders | return getFeed(parseDOM(feed, options)); | } > export * as DomUtils from “domutils”; | // Old name for DomHandler | export { DomHandler as DefaultHandler };
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router'
import store from './store'
import axios from 'axios'
import VueAxios from 'vue-axios'
createApp(App).use(router, store, VueAxios, axios).mount('#app')
この際に出たエラー文
Home.vue:5 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'state')
at Proxy._sfc_render (Home.vue:5:20)
at renderComponentRoot (runtime-core.esm-bundler.js:898:44)
at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js:5631:57)
at ReactiveEffect.run (reactivity.esm-bundler.js:187:25)
at instance.update (runtime-core.esm-bundler.js:5745:56)
at setupRenderEffect (runtime-core.esm-bundler.js:5759:9)
at mountComponent (runtime-core.esm-bundler.js:5541:9)
at processComponent (runtime-core.esm-bundler.js:5499:17)
at patch (runtime-core.esm-bundler.js:5101:21)
at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js:5711:17)
stateがどうこう言われているので、一旦routerとstoreを引き離してみる。
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router'
import store from './store'
import axios from 'axios'
import VueAxios from 'vue-axios'
createApp(App).use(router).use(store, VueAxios, axios).mount('#app')
Uncaught RangeError: Maximum call stack size exceeded
at isPlainObject (utils.js:129:23)
at assignValue (utils.js:287:9)
at forEach (utils.js:261:10)
at merge (utils.js:299:21)
at assignValue (utils.js:290:21)
at forEach (utils.js:261:10)
at merge (utils.js:299:21)
at assignValue (utils.js:290:21)
at forEach (utils.js:261:10)
at merge (utils.js:299:21)
実験してみると、2つ目のエラーは分けたことが原因なのではなく、VueAxios, axiosの順番で読み込まないといけないということだったみたいです。 NG
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router'
import store from './store'
createApp(App).use(router, store).mount('#app')
axiosの設定
npm install --save axios vue-axios
main.jsに追記
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router'
import store from './store'
import axios from 'axios'
import VueAxios from 'vue-axios'
createApp(App).use(router, store, VueAxios, axios).mount('#app')
% cd projects
% npm create vite@latest
Need to install the following packages:
create-vite@3.2.0
Ok to proceed? (y) y
✔ Project name: … vite-app
✔ Select a framework: › Vue
✔ Select a variant: › JavaScript
Scaffolding project in /Users/meow/Documents/projects/vite-app...