为什么当我降级node_modules时我的React应用程序可以正常工作，但是更新时却失败了？

Question

我有这个带有更新的node_modules应用，其中注册失败，但其他所有工作正常。 当我用旧版本的node_modules替换当前版本时，我有一个旧版本的备份。 它开始工作。 我也在netlify上部署它。 因此，当我运行npm run build并手动上载build文件夹以netlify起作用，但是当我尝试从github进行部署时，注册再次失败。

我尝试用旧的替换package.json，然后运行npm install但这也不起作用。

注册代码

import { Link, withRouter } from "react-router-dom";
import { Redirect } from "react-router";
import PasswordMask from "react-password-mask";
import {
  withFirebase,
  firebase,
  FirebaseContext,
  db
} from "../../../Components/Firebase/firebase";
import * as ROUTES from "../../../Constants/routes";
import { compose } from "recompose";
import PhyxData from "../../../Constants/phyxData.js";
import "./styles.css";

const DemoSignUpPage = () => (
  <div>
    <img
      src="/images/demoOnePage/group.png"
      className="demo-page-one-illustration dp-signup"
    />
    <div
      className="lead-text margin-top-40 demo-signup"
    >
      Thanks for trying Phyxable!
      <br />
      Let's continue the healing process.
    </div>
    <div className="center margin-top-16">
      <div className="inline-block">
        <DemoSignUpForm />
      </div>
    </div>
  </div>
);

const INITIAL_STATE = {
  username: "",
  email: "",
  passwordOne: "",
  passwordTwo: "",
  error: null
};
class DemoSignUpFormBase extends Component {
  constructor(props) {
    super(props);
    this.state = { ...INITIAL_STATE, redirect: false };
  }

  onSubmit = event => {
    console.log("sign up submit called", this.props);
    const { username, email, passwordOne } = this.state;
    this.props.firebase
      .doCreateUserWithEmailAndPassword(email, passwordOne)
      .then(authUser => {
        console.log("sign up submit called 2");
        return this.props.firebase.user(authUser.uid).update({
          joinDate: new Date().toLocaleDateString("en-US"),
          userProfile: {
            lastPhyx: { date: new Date(), level: 1, session: 1 },
            subscription: { paid: false },
            progress: {
              posture: {
                1: { 0: { date: new Date().toLocaleDateString("en-US") } }
              }
            },
            name: username,
            email: email,
            score: {
              feelingGood: 1,
              lastDate: new Date().toLocaleDateString("en-US"),
              longestStreak: 1,
              streak: 1,
              totalTime: 2
            },
            VAS: {},
            currentPhyx: "posture",
            accountType: "USER",
            notification: {},
            signedIn: false
          }
        });
      })
      .then(authUser => {
        console.log("in on submit sign up");

        this.setState({ ...INITIAL_STATE });
        this.setState({ redirect: true });
      })
      .catch(error => {
        this.setState({ error });
      });

    event.preventDefault();
  };

  onChange = event => {
    this.setState({ [event.target.name]: event.target.value });
  };

  handleTryFirstClick = () => {
    this.setState({ redirect: true });
  };
  render() {
    console.log("demo sign up", this.props);
    if (this.state.redirect) {
      // return <Redirect push to="/home" />;
      window.location.href = "/home";
    }

    const { username, email, passwordOne, passwordTwo, error } = this.state;

    const isInvalid =
      // passwordOne !== passwordTwo ||
      passwordOne === "" || email === "" || username === "";

    return (
      <form className="margin-top-16">
        <div className="center">
          <div className="inline-block">
            <input
              name="username"
              value={username}
              onChange={this.onChange}
              type="text"
              placeholder="Full Name"
            />
            <div className="height-8" />
            <input
              name="email"
              value={email}
              onChange={this.onChange}
              type="text"
              placeholder="Email Address"
            />
            <div className="height-8" />
            <PasswordMask
              id="password"
              name="passwordOne"
              value={passwordOne}
              onChange={this.onChange}
              type="password"
              placeholder="Password"
              inputStyles={{
                padding: "8px",
                fontSize: "16px"
              }}
              inputClassName="PasswordMaskInput"
              buttonStyles={{
                width: "61px"
              }}
            />
            {/* <PasswordMask
              name="passwordTwo"
              value={passwordTwo}
              onChange={this.onChange}
              type="password"
              placeholder="Confirm Password"
              inputStyles={{
                padding: "8px",
                fontSize: "16px"
              }}
              inputClassName="PasswordMaskInput"
              buttonStyles={{
                width: "61px"
              }}
            /> */}
          </div>
        </div>
        <div className="margin-top-40">
          <button
            onClick={event => {
              this.onSubmit(event);
            }}
            disabled={isInvalid}
            type="submit"
          >
            Sign Up
          </button>
        </div>
        {error && <p>{error.message}</p>}
      </form>
    );
  }
}

const DemoSignUpForm = compose(
  withRouter,
  withFirebase
)(DemoSignUpFormBase);
export default DemoSignUpPage;

export { DemoSignUpForm };

这是我的package.json ：

{
  "name": "finalphyx",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@material-ui/lab": "^3.0.0-alpha.30",
    "disable-scroll": "^0.4.1",
    "firebase": "^6.1.1",
    "firebase-functions": "^2.3.1",
    "html-loader": "^0.5.5",
    "mdbreact": "^4.15.0",
    "netlify": "^2.4.6",
    "react": "^16.7.0",
    "react-bootstrap": "^0.32.4",
    "react-div-100vh": "^0.3.4",
    "react-dom": "^16.7.0",
    "react-firebaseui": "^3.1.2",
    "react-ga": "^2.5.7",
    "react-jw-player": "^1.19.0",
    "react-meta-tags": "^0.7.4",
    "react-password-mask": "^3.3.1",
    "react-player": "^1.11.0",
    "react-responsive": "^7.0.0",
    "react-router-dom": "^5.0.1",
    "react-scripts": "^3.0.1",
    "react-scroll": "^1.7.11",
    "react-share": "^3.0.0",
    "react-stripe-checkout": "^2.6.3",
    "react-stripe-elements": "^3.0.0",
    "react-sweet-progress": "^1.1.2",
    "recompose": "^0.30.0",
    "stripe": "^7.1.0",
    "video-react": "^0.13.7",
    "waypoints": "^4.0.1",
    "window-scroll-manager": "^1.1.4"
  },
  "devDependencies": {
    "bundle-loader": "^0.5.6",
    "prettier": "^1.18.2",
    "pretty-quick": "^1.11.0",
    "aws-sdk": "^2.1.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build && echo '/*    /index.html   200' > build/_redirects",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    "deploy": "aws s3 sync build s3://www.phyxable.com"
  },
  "main": "index.js",
  "repository": {
    "type": "git",
    "url": "git+https://jacobmjones@bitbucket.org/jacobmjones/web.git"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ],
  "homepage": "/",
  "author": "",
  "license": "ISC",
  "description": ""
}

Answer 1

如果问题与您描述的完全相同，那么显然不是代码问题，而是依赖项。 请注意，如果您的代码与某些版本一起使用，则可能与其他版本（不管是升级还是降级）一起使用也很自然

我要尝试的第一件事是获取旧程序包json，并使用它进行清晰的安装（在备份需要执行的操作后，清除节点缓存并完全删除node_modules文件夹）。 如果它很酷，如果不是很酷，则您的一个依赖项的更改本来应该是次要的，但却是一个重大更改（这导致您的代码停止工作）

现在通常是因为新版本（即使不是本应具有重大更改的版本）也可能导致重大更改，因此npm创建了一个名为package-lock.json的文件。 与package.json不同，此软件包包含在特定安装过程中使用的确切版本，并且使用该软件包文件安装节点模块时，应准确反映当时依赖关系的状态。

如果您拥有该锁定文件并使用npm ci进行安装，则它应该可以工作。