I am trying to implement pagination in my react application. This is the site I am following React Pagination Component. But I am getting the following error while application build.

./node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/assertThisInitialized.js Module build failed: Error: ENOENT: no such file or directory, open '/Users/siddharthsinha/WebstormProjects/tweelyze-ui/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/assertThisInitialized.js'

As I am new to the react, I am unable to figure out what is wrong with my implementation. Here is the js file in which I have implemented pagination.

import React from 'react';
import NavigationBar from './NavigationBar';
import SearchPageResultsStyle from "../assets/css/SearchResultsPage.css"
import JwPagination from 'jw-react-pagination';
import Homepage from "./Homepage";
import SearchBarComponent from "./SearchBarComponent"
import MuiThemeProvider from "material-ui/styles/MuiThemeProvider";

class SearchResultsPage  extends React.Component{
    constructor(props) {
        super(props);
        console.log("Printing in the results ponent")
        console.log(this.props.location.state)
        this.state = {
            results: this.props.location.state.results,
            keyword: this.props.location.state.keyword,
            pageOfItems: []
        };
        this.onChangePage = this.onChangePage.bind(this);
    }

    onChangePage(pageOfItems) {
        // update local state with new page of items
        this.setState({pageOfItems});
    }
    render() {
        return(
            <div>
                <NavigationBar/>
                <h4 style={{textAlign:'center', color:'#1a0dab'}}>Showing search results for <span style={{fontWeight:'bold', fontStyle:'Italic'}}>'{this.state.data.keyword}'</span></h4>
                <hr/>
                <div className={'wrap'} style={SearchPageResultsStyle}>
                    <div className={'fleft'}>left column</div>
                    <div className={'fcenter'}>
                        <h3 style={{color:'#1a0dab'}}>Tweeter tweets text will be displayed here!!!</h3>
                        <a href={''}>Tweet urls will be displayed here</a>
                        <br/>
                        <div style={{display:'inline'}}>
                            <p><span style={{fontWeight:'bold', textColor:'#6a6a6a'}}>topic: </span>crime</p>
                            <p><span style={{fontWeight:'bold', textColor:'#6a6a6a'}}>city: </span>delhi</p>
                            <p><span style={{fontWeight:'bold', textColor:'#6a6a6a'}}>lang: </span>Hindi</p>
                            <p><span style={{fontWeight:'bold', textColor:'#6a6a6a'}}>Hashtags: </span></p>
                            <hr/>
                            <JwPagination items={this.state.results} onChangePage={this.onChangePage}/>
                        </div>
                    </div>
                    <div className={'fright'}>right column</div>
                </div>
            </div>


        )
    }

}

export default SearchResultsPage;

I am trying to implement pagination in my react application. This is the site I am following React Pagination Component. But I am getting the following error while application build.

./node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/assertThisInitialized.js Module build failed: Error: ENOENT: no such file or directory, open '/Users/siddharthsinha/WebstormProjects/tweelyze-ui/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/assertThisInitialized.js'

As I am new to the react, I am unable to figure out what is wrong with my implementation. Here is the js file in which I have implemented pagination.

import React from 'react';
import NavigationBar from './NavigationBar';
import SearchPageResultsStyle from "../assets/css/SearchResultsPage.css"
import JwPagination from 'jw-react-pagination';
import Homepage from "./Homepage";
import SearchBarComponent from "./SearchBarComponent"
import MuiThemeProvider from "material-ui/styles/MuiThemeProvider";

class SearchResultsPage  extends React.Component{
    constructor(props) {
        super(props);
        console.log("Printing in the results ponent")
        console.log(this.props.location.state)
        this.state = {
            results: this.props.location.state.results,
            keyword: this.props.location.state.keyword,
            pageOfItems: []
        };
        this.onChangePage = this.onChangePage.bind(this);
    }

    onChangePage(pageOfItems) {
        // update local state with new page of items
        this.setState({pageOfItems});
    }
    render() {
        return(
            <div>
                <NavigationBar/>
                <h4 style={{textAlign:'center', color:'#1a0dab'}}>Showing search results for <span style={{fontWeight:'bold', fontStyle:'Italic'}}>'{this.state.data.keyword}'</span></h4>
                <hr/>
                <div className={'wrap'} style={SearchPageResultsStyle}>
                    <div className={'fleft'}>left column</div>
                    <div className={'fcenter'}>
                        <h3 style={{color:'#1a0dab'}}>Tweeter tweets text will be displayed here!!!</h3>
                        <a href={'https://google.'}>Tweet urls will be displayed here</a>
                        <br/>
                        <div style={{display:'inline'}}>
                            <p><span style={{fontWeight:'bold', textColor:'#6a6a6a'}}>topic: </span>crime</p>
                            <p><span style={{fontWeight:'bold', textColor:'#6a6a6a'}}>city: </span>delhi</p>
                            <p><span style={{fontWeight:'bold', textColor:'#6a6a6a'}}>lang: </span>Hindi</p>
                            <p><span style={{fontWeight:'bold', textColor:'#6a6a6a'}}>Hashtags: </span></p>
                            <hr/>
                            <JwPagination items={this.state.results} onChangePage={this.onChangePage}/>
                        </div>
                    </div>
                    <div className={'fright'}>right column</div>
                </div>
            </div>


        )
    }

}

export default SearchResultsPage;

• javascript
• reactjs
• pagination

• Does it work without the jw-react-pagination module? – Andrew Axton Commented Jan 7, 2019 at 1:11
• yeah it was working perfectly before. – Siddharth Sinha Commented Jan 7, 2019 at 1:23
• 2 It might be because the file you are importing, github./cornflourblue/jw-react-pagination/blob/master/src/… (if you look at "main" field in package.json) is not being transpile by babel. Usually when you import something from NPM the author has already transpiled it for you. Many webpack setups actual ignore transpiling from any modules ing from node_modules directory. I would suggest just copy/pasting that file into your app, creating an issue to have the author do it, or modify the webpack loader to include this module – Andrew Axton Commented Jan 7, 2019 at 1:29

1 Answer 1

You should go into index.js file and import App from './App'; in this code you should change the ./App to currently used file path.