Блог

Пожалуйста, помогите. У меня возникли проблемы с развертыванием в моем приложении Heroku. Я не могу успешно создать и развернуть Heroku.

Не удалось скомпилировать все компоненты моего класса

 remote:        Failed to compile.
remote:
remote:        ./src/contexts/shopify/ShopContext.js
remote:          Line 14:3:   'state' is not defined                        no-undef
remote:          Line 28:3:   'fetchShopInfo' is not defined                no-undef
remote:          Line 34:3:   'createCheckout' is not defined               no-undef
remote:          Line 40:3:   'fetchCheckoutById' is not defined            no-undef
remote:          Line 49:3:   'addVariantToCart' is not defined             no-undef
remote:          Line 67:3:   'updateQuantityInCart' is not defined         no-undef
remote:          Line 81:3:   'removeLineItemInCart' is not defined         no-undef
remote:          Line 91:3:   'fetchAllProducts' is not defined             no-undef
remote:          Line 97:3:   'fetchProductById' is not defined             no-undef
remote:          Line 103:3:  'sortProductsByTitle' is not defined          no-undef
remote:          Line 120:3:  'fetchProductsByCollectionId' is not defined  no-undef
remote:          Line 131:3:  'handleCartClose' is not defined              no-undef
remote:          Line 135:3:  'handleCartOpen' is not defined               no-undef
remote:
remote:        Search for the keywords to learn more about each error.
remote:
remote:
remote: npm ERR! code ELIFECYCLE
remote: npm ERR! errno 1
remote: npm ERR! Exit status 1
remote: npm ERR!
remote: npm ERR! Failed at the [appname]@3.0.1-SNAPSHOT build script.
remote: npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
remote:
remote: npm ERR! A complete log of this run can be found in:
remote: npm ERR!     /tmp/npmcache.WEaEj/_logs/2021-02-23T05_44_14_298Z-debug.log
remote: npm ERR! code ELIFECYCLE
remote: npm ERR! errno 1
remote: npm ERR! [appname]@1.0.0 heroku-postbuild: npm install --prefix client amp;amp; npm run build --prefix client
remote: npm ERR! Exit status 1
remote: npm ERR!
remote: npm ERR! Failed at the[appname]@1.0.0 heroku-postbuild script.
remote: npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
remote:
remote: npm ERR! A complete log of this run can be found in:
remote: npm ERR!     /tmp/npmcache.WEaEj/_logs/2021-02-23T05_44_14_319Z-debug.log
remote:
remote: -----> Build failed
remote:
remote:        We're sorry this build is failing! You can troubleshoot common issues here:
remote:        https://devcenter.heroku.com/articles/troubleshooting-node-deploys
remote:
remote:        If you're stuck, please submit a ticket so we can help:
remote:        https://help.heroku.com/
remote:
remote:        Love,
remote:        Heroku
remote:
remote:  !     Push rejected, failed to compile Node.js app.
remote:
remote:  !     Push failed
remote:  !
remote:  ! ## Warning - The same version of this code has already been built: 434f626f0467fb3d0d901ba80346bcc3da21c7c7
remote:  !
remote:  ! We have detected that you have triggered a build from source code with version 434f626f0467fb3d0d901ba80346bcc3da21c7c7
remote:  ! at least twice. One common cause of this behavior is attempting to deploy code from a different branch.
remote:  !
remote:  ! If you are developing on a branch and deploying via git you must run:
remote:  !
remote:  !     git push heroku <branchname>:main
 

Вот компонент класса

 class ShopProvider extends Component {
  state = {
    products: [],
    productsCollection: [],
    product: {},
    checkout: { lineItems: [] },
    isCartOpen: false,
    shop: {},
  };

  componentDidMount() {
    this.createCheckout();
    this.fetchShopInfo();
  }

  fetchShopInfo = async () => {
    const shopInfo = await client.shop.fetchInfo();

    this.setState({ shop: shopInfo });
  };

  createCheckout = async () => {
    const checkout = await client.checkout.create();

    this.setState({ checkout: checkout });
  };

  fetchCheckoutById = async (checkoutId) => {
    try {
      return await client.checkout.fetch(checkoutId);
    } catch (error) {
      console.error(error);
      return null;
    }
  };

  addVariantToCart = async (variantId, quantity) => {
    this.setState({ isCartOpen: true });

    const lineItemsToAdd = [
      {
        variantId,
        quantity: parseInt(quantity, 10),
      },
    ];

    const checkout = await client.checkout.addLineItems(
      this.state.checkout.id,
      lineItemsToAdd,
    );

    this.setState({ checkout: checkout });
  };

  updateQuantityInCart = async (lineItemId, quantity) => {
    const checkoutId = this.state.checkout.id;
    const lineItemsToUpdate = [
      { id: lineItemId, quantity: parseInt(quantity, 10) },
    ];

    const newCheckout = await client.checkout.updateLineItems(
      checkoutId,
      lineItemsToUpdate,
    );

    this.setState({ checkout: newCheckout });
  };

  removeLineItemInCart = async (lineItemId) => {
    const checkoutId = this.state.checkout.id;

    const newCheckout = await client.checkout.removeLineItems(checkoutId, [
      lineItemId,
    ]);

    this.setState({ checkout: newCheckout });
  };

  fetchAllProducts = async () => {
    const products = await client.product.fetchAll();

    this.setState({ products: products });
  };

  fetchProductById = async (productId) => {
    const product = await client.product.fetch(productId);

    this.setState({ product: product });
  };

  sortProductsByTitle = (products) => {
    if (!products) return null;

    return products.sort((a, b) => {
      const titleA = a.title.toUpperCase();
      const titleB = b.title.toUpperCase();
      if (titleA < titleB) {
        return -1;
      }
      if (titleA > titleB) {
        return 1;
      }

      return 0;
    });
  };

  fetchProductsByCollectionId = async (collectionId) => {
    const collection = await client.collection.fetchWithProducts(collectionId, {
      productsFirst: 30,
    });

    this.setState({
      productsCollection: this.sortProductsByTitle(collection.products),
    });
  };

  handleCartClose = () => {
    this.setState({ isCartOpen: false });
  };

  handleCartOpen = () => {
    this.setState({ isCartOpen: true });
  };

  render() {
    return (
      <ShopContext.Provider
        value={{
          ...this.state,
          fetchCheckoutById: this.fetchCheckoutById,
          fetchAllProducts: this.fetchAllProducts,
          fetchProductById: this.fetchProductById,
          addVariantToCart: this.addVariantToCart,
          fetchProductsByCollectionId: this.fetchProductsByCollectionId,
          updateQuantityInCart: this.updateQuantityInCart,
          removeLineItemInCart: this.removeLineItemInCart,
          handleCartClose: this.handleCartClose,
          handleCartOpen: this.handleCartOpen,
          client: client,
        }}
      >
        {this.props.children}
      </ShopContext.Provider>
    );
  }
}
 

Я попытался реорганизовать компонент и изменил его на функциональный компонент, теперь все компоненты моего класса не смогли скомпилироваться.

        Failed to compile.
       
       ./src/AppTopbar.js
         Line 5:10:  'defaultProps' is not defined  no-undef
         Line 9:10:  'propTypes' is not defined     no-undef
       
       Search for the keywords to learn more about each error.
 

Я думаю, что это была проблема с самим Heroku, я попытался повторно развернуть, и это сработало без добавления или удаления одной строки кода.