时间戳

首页 > 解决方案 > 为什么我的 React 应用程序在我降级 node_modules 时运行良好，但在更新时失败？

javascript - 为什么我的 React 应用程序在我降级 node_modules 时运行良好，但在更新时失败？

问题描述

我有这个应用程序更新node_modules了注册失败但其他一切正常的地方。node_modules当我用那个版本替换当前版本时，我有一个旧版本的备份。它开始工作。我也在将它部署在netlify. 因此，当我npm run 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": ""
}

标签： javascriptreactjsfirebasedeploymentnetlify

解决方案

如果问题与您描述的完全一样，那么显然不是您的代码有问题，而是您的依赖项有问题。请注意，如果您的代码适用于某些版本，它可能不适用于其他版本（无论是升级还是降级），这也是很自然的

我会尝试的第一件事是获取旧的包 json，并使用它运行一个清晰的安装（在你备份你需要做的事情之后，清除你的节点缓存并完全删除你的 node_modules 文件夹）。如果它工作得很好，如果不是，那么你的一个依赖项有一个本应很小但又是一个重大更改的更改（它导致你的代码停止工作）

现在通常因为新版本（即使是那些不打算进行重大更改的版本）可能会导致重大更改，所以 npm 会创建一个名为 package-lock.json 的文件。与 package.json 不同，它包含在特定安装期间使用的确切版本，并且使用此包文件安装节点模块应该完全反映您当时的依赖关系状态。

如果您拥有该锁定文件并使用它安装 - 使用 npm ci - 那么它应该可以工作。

推荐阅读