Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

ecommerce-app-base does not work with create-contentful-app #194

Closed
sumanth-reply opened this issue Feb 23, 2021 · 3 comments · Fixed by #195 or #202
Closed

ecommerce-app-base does not work with create-contentful-app #194

sumanth-reply opened this issue Feb 23, 2021 · 3 comments · Fixed by #195 or #202

Comments

@sumanth-reply
Copy link

sumanth-reply commented Feb 23, 2021

Describe the bug
Installing the ecommerce library on top of create-contentful-app throws hooks error inside the AppConfig

To Reproduce
Steps to reproduce the behavior:

  1. A space with a content type of short text and short text list
  2. npx @contentful/create-contentful-app init my-first-app
  3. npx @contentful/create-contentful-app create-definition
  4. npm install @contentful/ecommerce-app-base --save
  5. Copy the example code provided (pasting here for reference)
import { Product, setup } from '@contentful/ecommerce-app-base';

setup({
  makeCTA: () => 'Select products',
  name: 'My SKU App',
  logo: 'https://example.com/logo.svg',
  color: '#d7f0fa',
  description: 'My example SKU App',
  parameterDefinitions: [
    {
      id: 'category',
      type: 'Symbol',
      name: 'Catehory',
      description: 'Product category of our shop',
      required: true,
    },
  ],
  validateParameters: () => null,
  fetchProductPreviews: async (skus) => {
    const responess = await Promise.all(
      skus.map((sku) => fetch(`https://example.com/products/${sku}`))
    );
    return responess.map<Product>((response) => response.json() as unknown as Product);
  },
  renderDialog: (sdk) => {
    const container = document.createElement('div');
    container.innerHTML = `<iframe src="https://example.com/products-search" />`;
    document.body.appendChild(container);
  },
  openDialog: async (sdk, currentValue, config) => {
    return await sdk.dialogs.openCurrentApp({
      parameters: { config, currentValue },
    });
  },
  isDisabled: () => false,
});
  1. Start the server npm start
  2. Go to app config screen

Expected behavior
App config should load properly

Actual behavior
There are errors in the console related to hooks and nothing loads on the screen

Screenshots
image
image
image

Desktop

  • OS: macOS Mojave
  • Browser Chrome
  • Version 88.0.4324.182
  • Node v12.19.0
  • npm 6.14.8
    Additional context
@VaguelySerious
Copy link
Contributor

VaguelySerious commented Feb 26, 2021

Hi @sumanth-reply, we made a PR to fix the issue (see above). Please allow for some time for the new version to become available over NPM.

@Artsu
Copy link

Artsu commented Mar 15, 2021

@VaguelySerious Hi! The same bug seems to also exist on dam-app-base

@VaguelySerious
Copy link
Contributor

Hi @Artsu, thank you for bringing this to our attention. I'll re-open the issue (@Jwhiles)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
3 participants