(初心者)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