@talion

Are you sure you want to delete the question?

Leaving a resolved question undeleted may help others!

(初心者)Nuxt:`Module not found: Error: Can't resolve 'core-js/core/date'`の解決方法を教えてください

以下のリンクのコードを模写しながら、NuxtでTodoリストを作成中です。
https://www.boel.co.jp/tips/vol107/

解決したいこと

store/index.jsディレクトリで状態管理を実装中にエラーが発生しました。解決方法を教えてください。

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

src/store/index.jsでchangeState関数を記述したところ、以下のエラーが表示されました。

ERROR in ./store/index.js
Module not found: Error: Can't resolve 'core-js/core/date' in '/home/nori/work/todo_assignment0419/store'

環境

JavaScript, Nuxt, WSL-Ubuntu, VS Code

該当するソースコード

// src/store/index.js

import { now } from 'core-js/core/date';
import Vuex from 'vuex';

const createStore = () => {
  return new Vuex.Store({
    state: () => ({
      todos: [
        {content: 'テスト', created: '2020-04-30 17:00', state: '作業前'},
        {content: 'コーディング', created: '2020-04-30 16:00', state: '作業中'},
        {content: '環境構築', created: '2020-04-30 15:30', state: '完了'}
      ],
      option: [
        {id: 0, labe: '作業前'},
        {id: 1, label: '作業中'},
        {id: 2, labe: '完了'}
      ]
    }), 
    mutations: {
      insert: function(state, obj) {
        var d = new Date();
        var fmt = d.getFullYear()
                + '-' + ('00' + (d.getMonth() + 1)).slice(-2)
                + '-' + ('00' + d.getDate()).slice(-2)
                + ' ' + ('00' + d.getHours()).slice(-2)
                + ':' + ('00' + d.getMinutes()).slice(-2)
        state.todos.unshift({
          content: obj.content,
          created: fmt,
          state: '作業前'
        })
      },
      remove: function(state, obj) {
        for(let i = 0; i < state.todos.length; i++) {
          const ob = state.todos[i];
          if(ob.content == obj.content && ob.created == obj.created) {
            if(confirm("" + ob.content + "を削除しますか?")) {
              state.todos.splice(i, 1);
              return;
            }
          }
        }
      },
      changeState: function(state, obj) {
        for(let i = 0; i < state.todos.length; i++) {
          const ob = state.todos[i];
          if(ob.content == obj.content && ob.created == obj.created && ob.state == obj.state);
          let nowState;
          for(let j = 0; j < state.option.length; j++) {
            if(state.option[j].label == ob.state) {
              nowState = state.option[j].id;
            }
          }
          nowState++;
          if(nowState >= state.option.length) {
            nowState = 0;
          }
          obj.state = state.option[nowState].label
          return;
        }
      }
    }
  })
}

export default createStore;
// src/pages/index.vue

<template>
  <section class="container">
    <h1>Todoリスト</h1>
    <div class="addArea">
      <input type="text" name="addName" id="addName" v-model="content" placeholder="タスクを入力してください">
      <button id="addButton" class="button button--green" @click="insert">追加</button>
    </div>
    <div class="Filter">
      <button class="button button--gray is-active">全て</button>
      <button class="button button--gray">作業前</button>
      <button class="button button--gray">作業中</button>
      <button class="button button--gray">完了</button>
    </div>
    <table class="Lists">
      <thead>
        <tr>
          <th>タスク</th>
          <th>登録日時</th>
          <th>状態</th>
          <th> </th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in todos" :key="index">
          <td>{{ item.content }}</td>
          <td>{{ item.created }}</td>
          <td><button class="button">{{ item.state }}</button></td>
          <td><button class="button button--red" @click="remove(item)">削除</button></td>
        </tr>
      </tbody>
    </table>
  </section>
</template>

<script>
import { mapState } from "vuex";

export default {
  data: function() {
    return {
      content: ''
    }
  },
  computed: {
    ...mapState(['todos'])
  },
  methods: {
    insert: function() {
      if(this.content != ''){
        this.$store.commit('insert', {content: this.content});
        this.content = '';
      }
    },
    remove: function(todo) {
      this.$store.commit('remove', todo)
    }
  }
}
</script>

自分で試したこと

1.エラーメッセージに従いnpm install --save core-js/core/dateを実行するも以下エラーの通り、フォルダがないと叱られました。

npm ERR! code ENOENT
npm ERR! syscall open
npm ERR! path /home/nori/work/todo_assignment0419/core-js/core/date/package.json
npm ERR! errno -2
npm ERR! enoent ENOENT: no such file or directory, open '/home/nori/work/todo_assignment0419/core-js/core/date/package.json'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent 

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/nori/.npm/_logs/2022-04-27T12_31_43_271Z-debug-0.log

2.そのため、先にcore-js/core/dateフォルダを作成後にnpm install --save core-js/core/dateを実行しましたが、エラーメッセージは変わりませんでした

3.下記リンクを参考にnpm install --save-dev core-js@3を実行しましたが、同じエラーメッセージが表示されました。
https://qiita.com/riversun/items/63c5f08c8da604c5ec1a

行き詰っていまして、解決方法を教えていただけますと幸いです。

0 likes

No Answers yet.

Your answer might help someone💌