Uncaught Error: Module build failed

JavaScript
#1

Hi i am learning react. (connecting with redux/redux-thunk).

In two of my projects, at some point the project fails to update because of error below. I am not sure what’s going on and would appreciate some help :slight_smile:

./src/components/PostList.js  Line 17:7:  Parsing error: Unexpected token  15 |     }  16 |     > 17 | const mapStateToProps = state => {     |       ^  18 |       19 |     return { posts: state.posts }  20 |     

App.js:15 Uncaught Error: Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: C:\Users\Yaz\react projects\redux-thunk-project\src\components\PostList.js: Unexpected token (17:6)

e[0m e[90m 15 | e[39m    }e[0m
e[0m e[90m 16 | e[39m    e[0m
e[0me[31me[1m>e[22me[39me[90m 17 | e[39me[36mconste[39m mapStateToProps e[33m=e[39m state e[33m=>e[39m {e[0m
e[0m e[90m    | e[39m      e[31me[1m^e[22me[39me[0m
e[0m e[90m 18 | e[39m    e[0m
e[0m e[90m 19 | e[39m    e[36mreturne[39m { postse[33m:e[39m statee[33m.e[39mposts }e[0m
e[0m e[90m 20 | e[39m    e[0m
    at Object.raise (C:\Users\Yaz\react projects\redux-thunk-project\node_modules\@babel\parser\lib\index.js:6420:17)
    at Object.unexpected (C:\Users\Yaz\react projects\redux-thunk-project\node_modules\@babel\parser\lib\index.js:7773:16)
    at Object.parseClassMemberWithIsStatic (C:\Users\Yaz\react projects\redux-thunk-project\node_modules\@babel\parser\lib\index.js:10955:12)
    at Object.parseClassMember (C:\Users\Yaz\react projects\redux-thunk-project\node_modules\@babel\parser\lib\index.js:10851:10)
    at withTopicForbiddingContext (C:\Users\Yaz\react projects\redux-thunk-project\node_modules\@babel\parser\lib\index.js:10806:14)
    at Object.withTopicForbiddingContext (C:\Users\Yaz\react projects\redux-thunk-project\node_modules\@babel\parser\lib\index.js:9884:14)
    at Object.parseClassBody (C:\Users\Yaz\react projects\redux-thunk-project\node_modules\@babel\parser\lib\index.js:10783:10)
    at Object.parseClass (C:\Users\Yaz\react projects\redux-thunk-project\node_modules\@babel\parser\lib\index.js:10757:22)
    at Object.parseStatementContent (C:\Users\Yaz\react projects\redux-thunk-project\node_modules\@babel\parser\lib\index.js:10051:21)
    at Object.parseStatement (C:\Users\Yaz\react projects\redux-thunk-project\node_modules\@babel\parser\lib\index.js:10009:17)
    at Object.parseStatement (C:\Users\Yaz\react projects\redux-thunk-project\node_modules\@babel\parser\lib\index.js:2028:26)
    at Object.parseBlockOrModuleBlockBody (C:\Users\Yaz\react projects\redux-thunk-project\node_modules\@babel\parser\lib\index.js:10585:25)
    at Object.parseBlockBody (C:\Users\Yaz\react projects\redux-thunk-project\node_modules\@babel\parser\lib\index.js:10572:10)
    at Object.parseTopLevel (C:\Users\Yaz\react projects\redux-thunk-project\node_modules\@babel\parser\lib\index.js:9940:10)
    at Object.parseTopLevel (C:\Users\Yaz\react projects\redux-thunk-project\node_modules\@babel\parser\lib\index.js:2862:28)
    at Object.parse (C:\Users\Yaz\react projects\redux-thunk-project\node_modules\@babel\parser\lib\index.js:11447:17)
    at Object../src/components/PostList.js (http://localhost:3000/static/js/main.chunk.js:47:7)
    at __webpack_require__ (http://localhost:3000/static/js/bundle.js:786:30)
    at fn (http://localhost:3000/static/js/bundle.js:151:20)
    at Module../src/components/App.js (http://localhost:3000/static/js/main.chunk.js:14:67)
    at __webpack_require__ (http://localhost:3000/static/js/bundle.js:786:30)
    at fn (http://localhost:3000/static/js/bundle.js:151:20)
    at Module../src/index.js (http://localhost:3000/static/js/main.chunk.js:67:73)
    at __webpack_require__ (http://localhost:3000/static/js/bundle.js:786:30)
    at fn (http://localhost:3000/static/js/bundle.js:151:20)
    at Object.0 (http://localhost:3000/static/js/main.chunk.js:146:18)
    at __webpack_require__ (http://localhost:3000/static/js/bundle.js:786:30)
    at checkDeferredModules (http://localhost:3000/static/js/bundle.js:46:23)
    at Array.webpackJsonpCallback [as push] (http://localhost:3000/static/js/bundle.js:33:19)
    at http://localhost:3000/static/js/main.chunk.js:1:91
#2

the error seems to begin once i start using the mapStateToProps function and the connect function together

import React from 'react';
import { connect } from 'react-redux';
import { fetchPosts } from '../actions';

class PostList extends React.Component {
    
     componentDidMount() {
            
            this.props.fetchPosts();
        }
    
    render() {
        
        return <div>Post List </div>;
    }
    
const mapStateToProps = state => {
    
    return { posts: state.posts }
    
    
    
}
    
}

export default connect(mapStateToProps, { fetchPosts })(PostList);
#3

It looks like your mapStateToProps function is inside the class and it shouldn’t be.

1 Like
#4

hi project 2 is solved, thanks! i altered it for the first project but it still didn’t solve it. What am i missing?

import React from 'react';
import { connect } from 'react-redux';

const SongDetail = ({ song} ) => {
    
    if (!song) {
        
        return <div> Select a Song </div> }
    //console.log(props)
        
        
    return ( <div>
        <h3>Details for </h3>
        <p> 
          Title:  {song.title} 
    <br />
            Duration: {song.duration}
        </p>
    /<div>
    )
    };
}

const mapStateToProps = state => {
    
    return { song: state.selectedSong };
    
        //we will reach into the state property and pull out only the object we care about}
    
};
    

    export default connect(mapStateToProps)(SongDetail);

./src/components/SongDetail.js
  Line 26:5:  Parsing error: Unexpected token

  24 | const mapStateToProps = state => {
  25 |     
> 26 |     return { song: state.selectedSong };
     |     ^
  27 |     
  28 |         //we will reach into the state property and pull out only the object we care about}

App.js:21 Uncaught Error: Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: C:\Users\Yaz\react projects\redux-1\src\components\SongDetail.js: Unexpected token (26:4)

e[0m e[90m 24 | e[39me[36mconste[39m mapStateToProps e[33m=e[39m state e[33m=>e[39m {e[0m
e[0m e[90m 25 | e[39m    e[0m
e[0me[31me[1m>e[22me[39me[90m 26 | e[39m    e[36mreturne[39m { songe[33m:e[39m statee[33m.e[39mselectedSong }e[33m;e[39me[0m
e[0m e[90m    | e[39m    e[31me[1m^e[22me[39me[0m
e[0m e[90m 27 | e[39m    e[0m
e[0m e[90m 28 | e[39m        e[90m//we will reach into the state property and pull out only the object we care about}e[39me[0m
e[0m e[90m 29 | e[39m    e[0m
    at Object.raise (C:\Users\Yaz\react projects\redux-1\node_modules\@babel\parser\lib\index.js:6420:17)
    at Object.unexpected (C:\Users\Yaz\react projects\redux-1\node_modules\@babel\parser\lib\index.js:7773:16)
    at Object.parseExprAtom (C:\Users\Yaz\react projects\redux-1\node_modules\@babel\parser\lib\index.js:8996:20)
    at Object.parseExprAtom (C:\Users\Yaz\react projects\redux-1\node_modules\@babel\parser\lib\index.js:3618:20)
    at Object.parseExprSubscripts (C:\Users\Yaz\react projects\redux-1\node_modules\@babel\parser\lib\index.js:8556:23)
    at Object.parseMaybeUnary (C:\Users\Yaz\react projects\redux-1\node_modules\@babel\parser\lib\index.js:8536:21)
    at Object.parseExprOps (C:\Users\Yaz\react projects\redux-1\node_modules\@babel\parser\lib\index.js:8402:23)
    at Object.parseMaybeConditional (C:\Users\Yaz\react projects\redux-1\node_modules\@babel\parser\lib\index.js:8375:23)
    at Object.parseMaybeAssign (C:\Users\Yaz\react projects\redux-1\node_modules\@babel\parser\lib\index.js:8325:21)
    at Object.parseMaybeAssign (C:\Users\Yaz\react projects\redux-1\node_modules\@babel\parser\lib\index.js:2681:18)
    at Object.parseExpression (C:\Users\Yaz\react projects\redux-1\node_modules\@babel\parser\lib\index.js:8275:23)
    at Object.jsxParseExpressionContainer (C:\Users\Yaz\react projects\redux-1\node_modules\@babel\parser\lib\index.js:3469:30)
    at Object.jsxParseElementAt (C:\Users\Yaz\react projects\redux-1\node_modules\@babel\parser\lib\index.js:3563:36)
    at Object.jsxParseElementAt (C:\Users\Yaz\react projects\redux-1\node_modules\@babel\parser\lib\index.js:3548:32)
    at Object.jsxParseElement (C:\Users\Yaz\react projects\redux-1\node_modules\@babel\parser\lib\index.js:3606:17)
    at Object.parseExprAtom (C:\Users\Yaz\react projects\redux-1\node_modules\@babel\parser\lib\index.js:3613:19)
    at Object../src/components/SongDetail.js (http://localhost:3000/static/js/main.chunk.js:98:7)
    at __webpack_require__ (http://localhost:3000/static/js/bundle.js:786:30)
    at fn (http://localhost:3000/static/js/bundle.js:151:20)
    at Module../src/components/App.js (http://localhost:3000/static/js/main.chunk.js:36:69)
    at __webpack_require__ (http://localhost:3000/static/js/bundle.js:786:30)
    at fn (http://localhost:3000/static/js/bundle.js:151:20)
    at Module../src/index.js (http://localhost:3000/static/js/main.chunk.js:199:73)
    at __webpack_require__ (http://localhost:3000/static/js/bundle.js:786:30)
    at fn (http://localhost:3000/static/js/bundle.js:151:20)
    at Object.0 (http://localhost:3000/static/js/main.chunk.js:277:18)
    at __webpack_require__ (http://localhost:3000/static/js/bundle.js:786:30)
    at checkDeferredModules (http://localhost:3000/static/js/bundle.js:46:23)
    at Array.webpackJsonpCallback [as push] (http://localhost:3000/static/js/bundle.js:33:19)
    at http://localhost:3000/static/js/main.chunk.js:1:67
#5

This time you’ve got an errant semicolon on line 22 and the closing <div> tag in your render method has the / outside the <

What editor or IDE are you using? Have you tried to configure eslint to help identify syntax errors?

1 Like
#6

oh that’s fantastic. thanks so much. i even used diffchecker and couldn’t notice the errors.

I’m using Brackets. How can i configure eslint so i can identify errors?

#7

I’ve never used Brackets before, but it looks like you can enable eslint with an extension. Then you want to make sure you have an eslint plugin that validates React and JSX (the airbnb one is popular and well-vetted).

#8

it seems like there isn’t a airbnb on brackets. may i ask which editor you use?

#9

I think you will need to manually add the eslint-config-airbnb package from npm: https://www.npmjs.com/package/eslint-config-airbnb.

I am having a good time using Visual Studio Code. I still had to add a couple of extensions to get everything working, but I have a pretty okay setup using eslint, prettier, and the React hooks eslint plugins.

Let me know how you like it if you try it out.

#10