ReactJS npm 运行 构建抛出生命周期和导出错误(奇怪)
ReactJS npm run build throws elifecycle & export errors (weird)
我正在尝试通过 npm run build
(创建生产构建)
构建 React 项目
- 我可以很好地使用
npm start
它编译了反应代码并在浏览器上完美运行
npm run build - error
这很奇怪,因为最初我只收到 ELIFECYCLE 错误,然后我尝试清除 npm-cache 并删除 node_modules 目录和 package-lock.json 以重新安装所有新内容。
npm cache clean --force
delete node_modules folder
delete package-lock.json file
npm install
生命周期错误Whosebug post
现在我已经完成了,npm start
命令仍然编译 & 运行s 反应前端很好,但是当我尝试构建它时,我得到这个导出错误还有,这很奇怪,因为这不是问题
CheckBoard.js 分量:
...
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
我不明白为什么 react 运行 构建表现得如此奇怪,即使在我完全重新初始化 npm 并且导出显然适用于开发构建和工作之后,我也不知道问题出在哪里构建。
Package-lock.json: Github -> Frontend/package-lock.json(太长了,所以我不能copy/paste放在这里)
感谢shidoro我解决了这个问题,我改变了
module.exports = {
checkBoard
}
到ES6方式:
export{ checkBoard }
并编译(有警告,但这是由于缺乏错误处理)
我正在尝试通过 npm run build
(创建生产构建)
- 我可以很好地使用
npm start
它编译了反应代码并在浏览器上完美运行
npm run build - error
这很奇怪,因为最初我只收到 ELIFECYCLE 错误,然后我尝试清除 npm-cache 并删除 node_modules 目录和 package-lock.json 以重新安装所有新内容。
npm cache clean --force
delete node_modules folder
delete package-lock.json file
npm install
生命周期错误Whosebug post
现在我已经完成了,npm start
命令仍然编译 & 运行s 反应前端很好,但是当我尝试构建它时,我得到这个导出错误还有,这很奇怪,因为这不是问题
CheckBoard.js 分量:
...
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
我不明白为什么 react 运行 构建表现得如此奇怪,即使在我完全重新初始化 npm 并且导出显然适用于开发构建和工作之后,我也不知道问题出在哪里构建。
Package-lock.json: Github -> Frontend/package-lock.json(太长了,所以我不能copy/paste放在这里)
感谢shidoro我解决了这个问题,我改变了
module.exports = {
checkBoard
}
到ES6方式:
export{ checkBoard }
并编译(有警告,但这是由于缺乏错误处理)