'React Redux Template module Babel-Loader build fails

I'm learning Redux with the redux.js.org essentials tutorial and everything was working fine until I added a feature and now I'm getting this error.

I read many post here and it seems to be related to the babel module but on my case I didn't install this module because it was part of the template used for the tutorial, plus it's not included on my package.json so I'm not sure if that's the problem or not.

Hopefully somebody can see what I'm doing wrong. Thanks very much.

This is my package.json:

{
  "name": "redux-essentials-example",
  "version": "1.0.0",
  "private": true,
  "dependencies": {
    "@mswjs/data": "^0.8.4",
    "@reduxjs/toolkit": "^1.6.1",
    "@testing-library/jest-dom": "^5.16.1",
    "@testing-library/react": "^12.1.2",
    "@testing-library/user-event": "^13.5.0",
    "classnames": "^2.2.6",
    "date-fns": "^2.12.0",
    "faker": "^4.1.0",
    "miragejs": "^0.1.35",
    "mock-socket": "^9.0.3",
    "msw": "^0.36.3",
    "react": "^17",
    "react-dom": "^17",
    "react-redux": "^7.2.4",
    "react-router-dom": "^5.1.2",
    "react-scripts": "^4",
    "seedrandom": "^3.0.5",
    "txtgen": "^2.2.4"
  },
  "scripts": {
    "start": "react-scripts --openssl-legacy-provider start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "prettier": "^2.0.2"
  },
  "msw": {
    "workerDirectory": "public"
  }
}

This is my postSlice.js:

import {createSlice} from '@reduxjs/toolkit'
import {nanoid} from '@reduxjs/toolkit'
import {sub} from 'date-fns'

const initialState = [
{
    id: '1', title: 'Primer post', content: 'Hola como va', date: sub(new Date(), {minutes: 10}).toISOString()
},
{
    id: '2', title: 'Segundo post', content: 'Comentando ando',date: sub(new Date(), {minutes: 5}).toISOString()
}]

const postsSlice = createSlice({
    name : 'posts',
    initialState,
    reducers: {
        postAdded(state, action){
            state.push(action.payload)
        },

        prepare(title, content, userId) {
            return {
                payload: {
                    id: nanoid(),
                    date: new Date().toISOString(),
                    title,
                    content,
                    user: userId
                }
        }

        }
        postUpdated(state, action) {
            const {id, title, content} = action.payload
            const existingPost = state.find(post => post.id === id)
            if (existingPost){
                existingPost.title = title
                existingPost.content = content
            }
        }
    }
})
export const {postAdded, postUpdated} = postsSlice.actions

export default postsSlice.reducer

Solution 1:^[1]

The error was that on my postSlice.js after the prepare() reducer I forgot to add a comma for the next reducer function postUpdated().

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	MrPie

'React Redux Template module Babel-Loader build fails

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]