@k12da (K Yoshida)posted at 2022-07-18

Module not found: Error: Can't resolve

Q&A

npm SPA Vue.js GoogleBooksAPI Vuetify

Module not found: Error: Can't resolve を解消したい

UdemyでVue.jsの動画学習をしており、SPAとGoogleBooksAPIを使ったサンプルアプリを作ろうとしていました。

Vuetifyをインストールした後に、各ページのvueファイルを作成して簡易サーバを起動したら、下記のエラーが表示されました。

※ViewフォルダとComponentフォルダは削除しています。

発生している問題・エラー

Compiled with problems:

ERROR in ./src/router/index.js 3:0-51

Module not found: Error: Can't resolve '../views/@/pages/BookIndex' in '/Users/kyohei.yoshida/Downloads/vue_test/section8/bookapp/src/router'


ERROR in ./src/router/index.js 4:0-53

Module not found: Error: Can't resolve '../views/@/pages/BookSearch' in '/Users/kyohei.yoshida/Downloads/vue_test/section8/bookapp/src/router'


ERROR in ./src/router/index.js 5:0-49

Module not found: Error: Can't resolve '../views/@/pages/BookEdit' in '/Users/kyohei.yoshida/Downloads/vue_test/section8/bookapp/src/router'

該当するソースコード

bookapp/src/router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import BookIndex from '../views/@/pages/BookIndex'
import BookSearch from '../views/@/pages/BookSearch'
import BookEdit from '../views/@/pages/BookEdit'


Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'BookIndex',
    component: BookIndex
  },
  {
    path: '/search',
    name: 'BookSearch',
    component: BookSearch
  },
  {
    path: '/edit',
    name: 'BookEdit',
    component: BookEdit
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

bookapp/src/pages/BookIndex.vue

<template>
  <div>BookIndex</div>
</template>

<script>
export default {

}
</script>

<style>

</style>

bookapp/src/pages/BookSearch.vue

<template>
  <div>BookSearch</div>
</template>

<script>
export default {

}
</script>

<style>

</style>

bookapp/src/pages/BookEdit.vue

<template>
  <div>BookEdit</div>
</template>

<script>
export default {

}
</script>

<style>

</style>

自分で試したこと

ターミナルで npm install && npm updateをしましたが、変わりませんでした。

下記は、npm auditと入力すると表示される結果です。

# npm audit report

glob-parent  <6.0.1
Severity: moderate
glob-parent before 6.0.1 vulnerable to Regular Expression Denial of Service (ReDoS) - https://github.com/advisories/GHSA-cj88-88mr-972w
fix available via `npm audit fix --force`
Will install @vue/cli-plugin-babel@3.12.1, which is a breaking change
node_modules/chokidar/node_modules/glob-parent
node_modules/eslint/node_modules/glob-parent
node_modules/fast-glob/node_modules/glob-parent
  chokidar  >=1.0.0-rc1
  Depends on vulnerable versions of glob-parent
  node_modules/chokidar
    sass  >=1.6.0
    Depends on vulnerable versions of chokidar
    node_modules/sass
    webpack-dev-server  >=2.0.0-beta
    Depends on vulnerable versions of chokidar
    node_modules/webpack-dev-server
      @vue/cli-service  *
      Depends on vulnerable versions of @vue/cli-plugin-router
      Depends on vulnerable versions of @vue/cli-plugin-vuex
      Depends on vulnerable versions of copy-webpack-plugin
      Depends on vulnerable versions of globby
      Depends on vulnerable versions of webpack-dev-server
      node_modules/@vue/cli-service
        @vue/cli-plugin-babel  >=4.0.0-alpha.0
        Depends on vulnerable versions of @vue/cli-service
        node_modules/@vue/cli-plugin-babel
        @vue/cli-plugin-eslint  >=3.1.2
        Depends on vulnerable versions of @vue/cli-service
        Depends on vulnerable versions of globby
        node_modules/@vue/cli-plugin-eslint
        @vue/cli-plugin-router  *
        Depends on vulnerable versions of @vue/cli-service
        node_modules/@vue/cli-plugin-router
        @vue/cli-plugin-vuex  *
        Depends on vulnerable versions of @vue/cli-service
        node_modules/@vue/cli-plugin-vuex
  eslint  6.0.0-alpha.0 - 7.32.0
  Depends on vulnerable versions of glob-parent
  node_modules/eslint
  fast-glob  *
  Depends on vulnerable versions of glob-parent
  node_modules/fast-glob
    copy-webpack-plugin  >=6.0.0
    Depends on vulnerable versions of fast-glob
    Depends on vulnerable versions of globby
    node_modules/copy-webpack-plugin
    globby  >=8.0.0
    Depends on vulnerable versions of fast-glob
    node_modules/globby

13 moderate severity vulnerabilities

To address issues that do not require attention, run:
  npm audit fix

To address all issues (including breaking changes), run:
  npm audit fix --force

Are you sure you want to delete the question?