Ive hit a bit of a wall with this. It is a Codecademy project “flashcards”. I am assuming that the reducers are either not importing or exporting. I have checked the syntax and even gone through the solution given but still having an issue with these three errors.
If someone could point me in the right direction that would be great
ERROR in ./src/app/store.js 6:0-56
Module not found: Error: Can’t resolve ‘../features/cards/cardsSlice’ in ‘/Users/matt/Projects/flashcards-starter/src/app’
ERROR in ./src/components/NewQuizForm.js 12:0-55
Module not found: Error: Can’t resolve ‘../features/cards/cardsSlice’ in ‘/Users/matt/Projects/flashcards-starter/src/components’
ERROR in ./src/features/cards/Card.js 8:0-43
Module not found: Error: Can’t resolve ‘./cardsSlice’ in ‘/Users/matt/Projects/flashcards-starter/src/features/cards’
webpack compiled with 3 errors and 1 warning
App.js
import React from "react";
import {
BrowserRouter as Router,
Switch,
Route,
NavLink,
useRouteMatch,
} from "react-router-dom";
import NewQuizForm from "../components/NewQuizForm";
import NewTopicForm from "../components/NewTopicForm";
import Topics from "../features/topics/Topics";
import Topic from "../features/topics/Topic";
import Quiz from "../features/quizzes/Quiz";
import Quizzes from "../features/quizzes/Quizzes";
import ROUTES from "./routes";
export default function App() {
return (
<Router>
<nav>
<ul>
<li>
<NavLink to={ROUTES.topicsRoute()} activeClassName="active">
Topics
</NavLink>
</li>
<li>
<NavLink to={ROUTES.quizzesRoute()} activeClassName="active">
Quizzes
</NavLink>
</li>
<li>
<NavLink to={ROUTES.newQuizRoute()} activeClassName="active">
New Quiz
</NavLink>
</li>
</ul>
</nav>
<Switch>
<Route path="/topics">
<TopicsRoutes />
</Route>
<Route path="/quizzes">
<QuizRoutes />
</Route>
</Switch>
</Router>
);
}
function TopicsRoutes() {
let match = useRouteMatch();
return (
<>
<Switch>
<Route path={`${match.path}/new`}>
<NewTopicForm />
</Route>
<Route path={`${match.path}/:topicId`}>
<Topic />
</Route>
<Route path={`${match.path}`}>
<Topics />
</Route>
</Switch>
</>
);
}
function QuizRoutes() {
let match = useRouteMatch();
return (
<>
<Switch>
<Route path={`${match.path}/new`}>
<NewQuizForm />
</Route>
<Route path={`${match.path}/:quizId`}>
<Quiz />
</Route>
<Route path={`${match.path}`}>
<Quizzes />
</Route>
</Switch>
</>
);
}
store.js
import { configureStore } from "@reduxjs/toolkit";
import topicsReducer from '../features/topics/topicsSlice';
import quizzesReducer from '../features/quizzes/quizzesSlice';
import cardsReducer from '../features/cards/cardsSlice';
export default configureStore({
reducer: {
topics: topicsReducer,
quizzes: quizzesReducer,
cards: cardsReducer
},
});
newQuizForm.js
import React, { useState } from "react";
import { useHistory } from "react-router-dom";
import { v4 as uuidv4 } from "uuid";
import ROUTES from "../app/routes";
import { useSelector, useDispatch } from 'react-redux';
import { selectTopics } from '../features/topics/topicsSlice';
import { addQuizThunk } from '../features/quizzes/quizzesSlice';
import { addCard } from '../features/cards/cardsSlice';
export default function NewQuizForm() {
const [name, setName] = useState("");
const [cards, setCards] = useState([]);
const [topicId, setTopicId] = useState("");
const history = useHistory();
const topics = useSelector(selectTopics);
const dispatch = useDispatch();
const handleSubmit = (e) => {
e.preventDefault();
if (name.length === 0) {
return;
}
const cardIds = [];
cards.map((card, index)=>{
const uniqueId = uuidv4();
cardIds.push(uniqueId);
dispatch(addCard({
id: uniqueId,
front: cards[index].front,
back: cards[index].back
}))
});
dispatch(addQuizThunk({
id: uuidv4(),
name: name,
topicId: topicId,
cardIds: cardIds
}));
history.push(ROUTES.quizzesRoute());
};
const addCardInputs = (e) => {
e.preventDefault();
setCards(cards.concat({ front: "", back: "" }));
};
const removeCard = (e, index) => {
e.preventDefault();
setCards(cards.filter((card, i) => index !== i));
};
const updateCardState = (index, side, value) => {
const newCards = cards.slice();
newCards[index][side] = value;
setCards(newCards);
};
return (
<section>
<h1>Create a new quiz</h1>
<form onSubmit={handleSubmit}>
<input
id="quiz-name"
value={name}
onChange={(e) => setName(e.currentTarget.value)}
placeholder="Quiz Title"
/>
<select
id="quiz-topic"
onChange={(e) => setTopicId(e.currentTarget.value)}
placeholder="Topic"
>
<option value="">Topic</option>
{Object.values(topics).map((topic) => (
<option key={topic.id} value={topic.id}>
{topic.name}
</option>
))}
</select>
{cards.map((card, index) => (
<div key={index} className="card-front-back">
<input
id={`card-front-${index}`}
value={cards[index].front}
onChange={(e) =>
updateCardState(index, "front", e.currentTarget.value)
}
placeholder="Front"
/>
<input
id={`card-back-${index}`}
value={cards[index].back}
onChange={(e) =>
updateCardState(index, "back", e.currentTarget.value)
}
placeholder="Back"
/>
<button
onClick={(e) => removeCard(e, index)}
className="remove-card-button"
>
Remove Card
</button>
</div>
))}
<div className="actions-container">
<button onClick={addCardInputs}>Add a Card</button>
<button>Create Quiz</button>
</div>
</form>
</section>
);
}
cardSlice.js
import { createSlice } from '@reduxjs/toolkit';
export const cardsSlice = createSlice({
name: 'cards',
initialState: {
cards: {}
},
reducers: {
addCard: (state, action) => {
const newCard = {
id: action.payload.id,
front: action.payload.front,
back: action.payload.back
};
state.cards[action.payload.id] = newCard;
}
}
})
export const selectCards = state => state.cards.cards;
export const { addCard } = cardsSlice.actions;
export default cardsSlice.reducer;
Card.js
import React, { useState } from "react";
import { Link, useParams } from "react-router-dom";
import { useSelector } from 'react-redux';
import { selectCards } from './cardsSlice';
export default function Card({ id }) {
const cards = useSelector(selectCards);
const card = cards[id];
const [flipped, setFlipped] = useState(false);
return (
<li>
<button className="card" onClick={(e) => setFlipped(!flipped)}>
{flipped ? card.back : card.front}
</button>
</li>
);
}
I did find a suggestion to say that it could be to do with the Node modules, but no further info was given.
