ReactJS npm run build throws elifecycle & export errors (weird)

Question

I'm trying to build a React project via npm run build (Creating production build)

I can use npm start just fine and it compiles the react code and works perfectly on the browser

npm run build - error

It's weird since Initially I was only getting the ELIFECYCLE error, then I tried to clear the npm-cache along with deleting the node_modules directory and package-lock.json to reinstall everything fresh.

npm cache clean --force
delete node_modules folder
delete package-lock.json file
npm install

elifecycle error stackoverflow post

Now that i've done that, the npm start command still compiles & runs the react frontend just fine, however when I try to build it, I'm getting this export error aswell, it's weird since this isn't an issue

CheckBoard.js Component:

...
import { checkBoard } from './validation/checker_validation'
//import checker_validation from './validation/checker_validation'
//import { checker_validation } from './validation/checker_validation'
import { tokenChars } from 'ws/lib/validation'
import { parse } from 'uuid'
export default class CheckerBoard extends Component {
    state = {
        gameBoard: this.props.gameData,
        boardInv : this.props.boardInv,
        dispOverlay : {},
        selectedPawn : null,
        selectedValid : []
    }

    //Overlay Initializer:

    //Whenever a pawn is clicked, this function executes:
        //This function executes the validation algorithm, then generates an overlay of all possible moves the user can make

    pawnClick = async (e) => {
        const coord1D = parseInt((e.target.id).split('-')[1]);

        await this.setState({dispOverlay: {'selectedPawn' : coord1D} });

        const newGame = [...(this.state.gameBoard.map((e)=> {return parseInt(e)}))]

        console.log('PAWN CLICK DEBUG:');
        console.log('Game Board:');
        console.log(newGame);
        console.log('Coord 1D');
        console.log(coord1D);

        let valid = this.state.boardInv ? checkBoard(newGame.reverse(),63-coord1D) : checkBoard(newGame, coord1D);

        if(this.state.boardInv){
            valid = [...valid.map((e) => {return e.map( (j) => {return -1*j} )  })];
        }

        this.setState({
            selectedValid : valid
        })

        console.log('Validated: '+JSON.stringify(valid))

        const reducerSum = (pV, cV) => pV + cV;

        for(let v of valid){
            let entry = this.state.dispOverlay;
            
            if(Math.abs(v[0]) < 14){
                entry[parseInt(coord1D)+parseInt(v)] = false; //false is move, true is kill
            } else {

                for(let [i,e] of v.entries()){

                    const killEntry = parseInt(coord1D)+v.slice(0,i+1).reduce(reducerSum,0);
                    entry[killEntry] = true

                }




                //Returns the possible positions of selected Pawn (for every possibility)

                //entry[parseInt(coord1D)+parseInt(v)] = true;
            }
            this.setState({dispOverlay : entry});
        }
    }
...

checker_validation.js

const checkBoard = (board, pawnCoord, justKilled) => {
  ...algorithm that returns something...

    if(!foundKill){
        return [[]];
    }

    return res;
}


// console.log(checkBoard(gameboard,42))

module.exports = {
    checkBoard
} 
//exported here

I can't figure out why react run build is acting so odd, even after I fully reinitialized npm and the export clearly works on development builds and works, I dont know what the issue is with the build.

Package-lock.json: Github -> Frontend/package-lock.json (It's very long, that's why I cant copy/paste it onto here)

try changing `module.exports` to `export { checkBoard }` or simply prefix the `export` keyword before `const checkBoard` — shidoro, Jan 02 '22 at 14:47
The problem is most likely related to mixing CommonJS and es6 syntax with create-react-app, that's probably why the build is failing. I saw you're re-using `checkBoard` in your nodejs server. You can use import/export syntax in nodejs by adding `"type": "module"` in your package.json. Although that means you need to refactor all the `require` to `import` and `module.exports` to `export` — shidoro, Jan 02 '22 at 15:19
Thanks, after I changed it to the ES6 `export { checkBoard }` as you said, It compiled! — jasonmzx, Jan 02 '22 at 15:38

score 0 · Accepted Answer · answered Jan 02 '22 at 15:40

0

Thanks to shidoro I solved this, I changed the

module.exports = {
    checkBoard
}

to the ES6 way:

export{ checkBoard }

And it compiled (with warnings, but that's due to some lack of error handling)

answered Jan 02 '22 at 15:40

jasonmzx

507
5
15

ReactJS npm run build throws elifecycle & export errors (weird)

1 Answers1